/a11y-navbar

Testing out an accessible dropdown disclosure

Primary LanguageJavaScript

A11y Navbar

Proof of concept for an accessible navbar following the W3's WAI-ARIA Example Disclosure for Navigation Menus originally authored by Sarah Higley

Edit a11y-navbar

Run locally

npm i      # install deps
npm start  # should open browser at localhost:3000

VoiceOver Demo

Two videos where I demo how the current nav and this POC work with VoiceOver assistive technology.

🔊 Sound on 🔊

Current

voiceover-developers.mp4

POC

voiceover-a11y-navbar-example.mp4

General structure

  • Announces that the button expands and collapses invisible content to screen readers through aria-controls and aria-haspopup (accessibilityControls and accessibilityHaspopup 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>