For the APG 1.1: Dual Functionality ARIA Menubar construct that supports page to page navigation

Hello,
This concept is something that has come up over and over for websites that use Menubars across the top navigation headers, which perform a page to page navigation when the top Menuitem link is clicked, but will instead open a dropdown menu when moused over.

Since we need something like this for the APG, I've built the following one which can be used for this purpose at
https://github.com/accdc/aria-menubar

Since ARIA doesn't actually support dual functionality as part of its logic, there is some extra directives to handle desktop versus touch screen devices built in that use some offscreen text to provide this information for non-sighted screen reader users. Without which, the directional information would be lost. This is easy to see where this occurs in the code, and you are welcome to change it and see what happens when this isn't included.

Additionally, it is necessary to wrap this construct in role=application, otherwise screen readers such as JAWS and NVDA will not enter the correct modality when attempting to interact with the Menubar instead of passing an onClick to it, which will negate the dual functionality of the widget.

Further directions are included within the .css and .html files as well as .js in order to make it absolutely clear what goes where and how. Additionally, I built this widget to be scalable, so if you add additional UL elements to add submenus, it will automatically map the parent child relationship accordingly.

All the best,
Bryan

Received on Tuesday, 8 September 2015 17:58:55 UTC