Notice: This is a work in progress. Please submit feedback or suggestions.

summary element (html)

Screen reader support level: partial (28/32)

Voice Control support level: partial (5/9)

On this page

The details element represents a disclosure widget from which the user can obtain additional information or controls. Note that per the HTML5 spec, headings are allowed in the summary element.

Expectations

What are expectations?

Screen Reader support by expectation

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
MUST convey an appropriate namesupportednot applicablesupportedsupportedsupportedsupportedsupported
MUST convey an appropriate rolesupportednot applicablesupportedsupportedsupportednonesupported
MUST convey the expanded statesupportednot applicablesupportedsupportedsupportedsupportedsupported
MUST convey when the expanded state is changedsupportednot applicablesome partial supportsupportedsupportedsupportednone
SHOULD provide shortcuts to jump to this rolesupportednot applicablesupportedsupportedsupportednonenone

Voice Control support by expectation

ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
MUST convey an appropriate namenonesupportedsupportednonesupported
MUST convey an appropriate rolenonesupportednot applicablenonesupported

Expectation: convey an appropriate name

Rationale: A screen reader user needs to know what to enter.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST
Screen Reader support for 'MUST convey an appropriate name'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
HTML basic details/summary test with a heading in the summarysupportednot applicablesupportednot applicablesupportedsupportedsupportedsupportedsupportedsupported
Voice Control support for 'MUST convey an appropriate name'
TestDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
HTML basic details/summary test with a heading in the summarynonesupportedsupportednonesupported

Expectation: convey an appropriate role

Rationale: A screen reader user needs to know how they can interact with the element. Voice control software might use the role to help users activate controls that do not have a visible name.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST
Screen Reader support for 'MUST convey an appropriate role'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
HTML basic details/summary test with a heading in the summarysupportednot applicablesupportednot applicablesupportedsupportedsupportedsupportednonesupported
Voice Control support for 'MUST convey an appropriate role'
TestDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
HTML basic details/summary test with a heading in the summarynonesupportednot applicablenonesupported

Expectation: convey the expanded state

Rationale: A user needs to know when they enter and exist the details.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA
Screen Reader support for 'MUST convey the expanded state'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
HTML basic details/summary test with a heading in the summarysupportednot applicablesupportednot applicablesupportedsupportedsupportedsupportedsupportedsupported

Expectation: convey when the expanded state is changed

Rationale: A user needs to know when the state changes and that their action was successful.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA
Screen Reader support for 'MUST convey when the expanded state is changed'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
HTML basic details/summary test with a heading in the summarysupportednot applicablesupportednot applicablepartialnonesupportedsupportedsupportednone

Expectation: provide shortcuts to jump to this role

Rationale: Screen reader users might want to quickly navigate to elements of this type.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: NA
Screen Reader support for 'SHOULD provide shortcuts to jump to this role'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
HTML basic details/summary test with a heading in the summarysupportednot applicablesupportednot applicablesupportedsupportedsupportedsupportednonenone

Related features

These are features that are usually used in combination with this feature.

details element (html)

DragonJAWSNarratorNVDAOrcaTalkBackVoice AccessVC iOSVC MacOSVoiceOver (iOS)VoiceOver (macOS)Speech Recognition
not applicablesupportedsupportedsupportedsupportedsupportednot applicablenot applicablenot applicablesupportedsupportednot applicable