details element (html)
Screen Reader support level: supported
On this page
About this feature
The details element represents a disclosure widget from which the user can obtain additional information or controls.
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.
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 role | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
| MUST convey the name of the group if the group role is conveyed | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable |
| MUST convey the boundaries of the details element if the group role is conveyed | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable |
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: NA
Examples:
- A screen reader might announce the role as "group" or "details"
- A screen reader might consider the group as presentational and not convey a group role
| 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 |
Expectation: convey the name of the group if the group role is conveyed
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: 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 | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable |
Expectation: convey the boundaries of the details element if the group role is conveyed
Rationale:
A user needs to know when they enter and exit an element
Strength of this expectation for different types of assistive technologies:
- Screen Readers: MUST
- Voice Control: NA
Examples:
- A screen reader might announce the role of the element when entering and say something like "leaving" when exiting.
- A screen reader might not explicitly announce entering and existing the element, but instead imply that the is in the containing object by conveying the roles of required children (options in a listbox for example).
- A screen reader might announce position in set information such as "1 of 6".
- A screen reader might not convey boundaries if the content fits on a single line
| 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 | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable | not applicable |
Related features
These are features that are usually used in combination with this feature.
summary 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 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| no known support | supported with 1 unknown result | partial (3/5) | partial (10/13) | supported with 1 unknown result | supported with 1 unknown result | supported with 1 unknown result | supported with 1 unknown result | no known support | partial (1/5) | supported with 1 unknown result | supported with 1 unknown result | unknown | unknown | unknown | unknown | unknown |
We are missing data on some combinations.