iOS Voiceover Safari
Android Talkback Chrome
Windows Jaws Chrome
Windows NVDA Chrome
MacOS Voiceover Safari
Use semantic HTML
This semantic HTML contains all accessibility features by default with no scripting required.
More infoThis 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.
This button requires aria attributes and additional scripting.
- Inner text should describe the purpose
<details>identifies as details
- Native button identifies as button by default
role="button"for custom elements
- You can use
aria-controls="popupId", but it is not well supported
- Menus or expanders use
- Focus must be visible