skip to content W3C SVG

Submenu navigation

Introduction

The forms on the site are currently only available via dropdown sub-menus (pictured).

C3 Dropdowns

Dropdown sub-menus are precarious design patterns, prone to accessibility issues. In the case of C3’s implementation, there is are a few issues:

  • The link that activates each submenu does not communicate state (expanded or collapsed).
  • The menu does not close when focus is moved from its last item to the next adjacent link (e.g., from “Generate User Alert” under Alerts to Batch Control/Journal Entry).
  • Menu disclosures are inconsistent. The menu closes when the enter key is pressed to activate the next adjacent menu, but at times does not close when the next adjacent menu is clicked (i.e., the menus, at times, do not function the same way for mouse users and keyboard users).
  • The nested lists are not identified as submenus which, though not crucial, would be helpful.

WCAG criteria

Fixing the issue

It is recommended that the enhancements to the dropdown menu noted in the introduction are provided, as well as providing in-page navigation menus for each child page.

  • Give the top-level links role="button" (since they no longer function as links).
  • Include aria-expanded on the top-level links and toggle between false (nested dropdown menu not showing) and true (nested dropdown menu showing).
  • Add aria-label="submenu" to the nested dropdowns.
  • Close the menu when the last item is unfocused in a forwards direction.