Proof of concept for an accessible navbar following the W3's WAI-ARIA Example Disclosure for Navigation Menus originally authored by Sarah Higley
npm i # install deps
npm start # should open browser at localhost:3000
Two videos where I demo how the current nav and this POC work with VoiceOver assistive technology.
🔊 Sound on 🔊
voiceover-developers.mp4
voiceover-a11y-navbar-example.mp4
- Announces that the button expands and collapses invisible content to screen readers through
aria-controls
andaria-haspopup
(accessibilityControls
andaccessibilityHaspopup
props in Gestalt) - Allows for easier keyboard navigation by making the disclosure button and sub-list as siblings
Here is some pseudo-xml to illustrate:
<list> <!-- navbar links -->
<listItem>
<button aria-controls='1'>
1. Disclosure button
</button>
<list id='1'> <!-- hide/show controlled by button -->
<listItem> 1.1 Item </listItem>
<listItem> 1.2 Item </listItem>
<listItem> 1.3 Item </listItem>
</list>
</listItem>
<listItem>
2. Item
</listItem>
<listItem>
<button aria-controls='3'>
3. Disclosure button
</button>
<list id='3'> <!-- hide/show controlled by button -->
<listItem> 3.1 Item </listItem>
<listItem> 3.2 Item </listItem>
</list>
</listItem>
</list>