iOS Voiceover Safari
Android Talkback Chrome
Windows Jaws Chrome
MacOS Voiceover Safari
Use semantic HTML
- This semantic HTML contains all accessibility features by default with no scripting required.
About the NATO alphabetThe (International) Radiotelephony Spelling Alphabet, commonly known as the NATO phonetic alphabet, is the most widely used set of clear code words for communicating the letters of the Roman alphabet.
Use semantic HTML where possible
This custom expander uses a semantic button with
aria-expanded with additional scripting to toggle content and states.
The (International) Radiotelephony Spelling Alphabet, commonly known as the NATO phonetic alphabet, is the most widely used set of clear code words for communicating the letters of the Roman alphabet.
- Inner text must 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
- Nielsen Norman Group study: The caret icon most clearly indicated to users that it would open an accordion in place, rather than linking directly to a new page.
- Not all users will notice there is hidden content or understand how these work. For this reason, you should only use them in specific situations and if user research supports it.