summary element (html)
Screen Reader support level: partial (38/44)
Voice Control support level: partial (5/13)
On this page
- About this feature
- Age of results
- Expectations
- Related features
- Related tests
- Related AT or browser issues
- Is something not right?
About this feature
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.
Age of results
Results across all tests for this feature range from 2 years ago to 3 years ago. Detailed dates and version information can be found in associated tests.
Caution
Failing or partial results may be out of date. The oldest result is from 3 years ago. Consider running the associated tests and contributing results.
Expectations
Screen Reader support by expectation
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey its name | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
| MUST convey its role | supported | supported | supported | supported | supported | supported | supported | supported | supported | none | supported |
| MUST convey the expanded state | supported | supported | supported | supported | supported | supported | supported | supported | supported | none | supported |
| MUST convey when the expanded state is changed | supported | supported | supported | partial | none | none | supported | supported | supported | none | supported |
| SHOULD provide shortcuts to jump to this role | supported | supported | supported | supported | supported | supported | supported | supported | supported | none | none |
Voice Control support by expectation
| Expectation | Dragon Naturally Speaking | Voice Access (Android) | Voice Control (iOS) | Voice Control (MacOS) | Windows Speech Recognition | Windows Voice Access | ||
|---|---|---|---|---|---|---|---|---|
| Chrome | Chrome | Safari | Safari | Edge | Chrome | Edge | Chrome | |
| MUST convey its name | none | supported | supported | none | not applicable | supported | unknown | unknown |
| MUST convey its role | none | supported | not applicable | none | not applicable | supported | unknown | unknown |
Expectation: convey its name
Rationale:
A screen reader user needs to know what to enter.
Strength of this expectation for different types of assistive technologies:
- Screen Readers: MUST
- Voice Control: MUST
Examples:
- A screen reader might announce something like "<role>, <name>"
- Voice control software might allow the user to say something like "click <name>"
| Test | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| HTML basic details/summary test with a heading in the summary | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
| Test | Dragon Naturally Speaking | Voice Access (Android) | Voice Control (iOS) | Voice Control (MacOS) | Windows Speech Recognition | Windows Voice Access | ||
|---|---|---|---|---|---|---|---|---|
| Chrome | Chrome | Safari | Safari | Edge | Chrome | Edge | Chrome | |
| HTML basic details/summary test with a heading in the summary | none | supported | supported | none | not applicable | supported | unknown | unknown |
Expectation: convey its 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 this expectation for different types of assistive technologies:
- Screen Readers: MUST
- Voice Control: MUST
Examples:
- A screen reader might announce something like "button", "details", or "summary"
- Voice control software might allow the user to say something like "click button"
| Test | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| HTML basic details/summary test with a heading in the summary | supported | supported | supported | supported | supported | supported | supported | supported | supported | none | supported |
| Test | Dragon Naturally Speaking | Voice Access (Android) | Voice Control (iOS) | Voice Control (MacOS) | Windows Speech Recognition | Windows Voice Access | ||
|---|---|---|---|---|---|---|---|---|
| Chrome | Chrome | Safari | Safari | Edge | Chrome | Edge | Chrome | |
| HTML basic details/summary test with a heading in the summary | none | supported | not applicable | none | not applicable | supported | unknown | unknown |
Expectation: convey the expanded state
Rationale:
A user needs to know when they enter and exist the details.
Strength of this expectation for different types of assistive technologies:
- Screen Readers: MUST
- Voice Control: NA
Examples:
- A screen reader might announce either "expanded" or "collapsed"
| Test | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| HTML basic details/summary test with a heading in the summary | supported | supported | supported | supported | supported | supported | supported | supported | supported | none | supported |
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 this expectation for different types of assistive technologies:
- Screen Readers: MUST
- Voice Control: NA
Examples:
- A screen reader might announce the new new state value, either "expanded" or "collapsed"
| Test | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| HTML basic details/summary test with a heading in the summary | supported | supported | supported | partial | none | none | supported | supported | supported | none | supported |
Expectation: provide shortcuts to jump to this role
Rationale:
Screen reader users might want to quickly navigate to elements of this type.
Strength of this expectation for different types of assistive technologies:
- Screen Readers: SHOULD
- Voice Control: NA
| Test | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| HTML basic details/summary test with a heading in the summary | supported | supported | supported | supported | supported | supported | supported | supported | supported | none | none |
Related features
These are features that are usually used in combination with this feature.
details element (html)
| Dragon | JAWS | Narrator | NVDA | Orca | TalkBack | Voice Access | VC iOS | VC MacOS | VoiceOver (iOS) | VoiceOver (macOS) | Speech Recognition | Windows Voice Access | Windows | Mac | iOS | Android Keyboard |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| unknown | supported with 1 unknown result | supported with 1 unknown result | supported with 1 unknown result | supported with 1 unknown result | supported with 1 unknown result | unknown | unknown | unknown | supported with 1 unknown result | supported with 1 unknown result | unknown | unknown | unknown | unknown | unknown | unknown |