Video examples

iOS Voiceover Safari

Android Talkback Chrome

Windows Jaws Chrome

Windows NVDA 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>
This button requires aria attributes and additional scripting.

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