Video examples
iOS Voiceover Safari
Android Talkback Chrome
Windows Jaws Chrome
MacOS Voiceover Safari
Code examples
Use semantic HTML
This semantic HTML contains all accessibility features by default with no scripting required.
<details>
<summary>
More info
</summary>
This semantic element covers all success
criteria with no additional scripting.
</details>
More info
This semantic element covers all success criteria with no additional scripting.Use semantic HTML where possible
This custom expander uses a semantic button with aria-expanded
with additional scripting to toggle content and states.
<div class="expander-group">
<button class="expander-toggle" aria-expanded="false">
More info
</button>
<div class="expander-content">
This button requires aria attributes
and additional scripting.
</div>
</div>
Developer notes
Name
- Inner text should describe the purpose
Role
<details>
identifies as details- Native button identifies as button by default
- Use
role="button"
for custom elements
Group
- You can use
aria-controls="popupId"
, but it is not well supported
State
- Menus or expanders use
aria-expanded="true/false"
Focus
- Focus must be visible