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.
  • It uses CSS pseudo attributes to create the expanded/collapsed indicator, no Javascript.
<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 must 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