WebAIM - Web Accessibility In Mind

E-mail List Archives

The ARIA Menu generator now supports variable tag structures, horizontal and vertical menu keyboard handling, customizable setting overrides, and graceful degradation.

for

From: Bryan Garaventa
Date: Feb 11, 2013 2:08AM

I thought I'd pass this on in case it's of interest.

My goal is to make this toolkit as powerful, scalable, and as accessible as possible while providing full control of content, styling, and implementation to developers.

So with this in mind, the ARIA Menu module, demoed at
http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
is now much more powerful.

You can now take pre-existing HTML markup like the following:

<!-- Level1 Menu -->

<ol id="topLevelMenuID" class="menu">
<li>
<a href="#" class="submenu" id="-SubmenuPointer">
Submenu One Name
</a>
</li>
<li>
<a href="URL" class="link" id="uniqueID">
Link Name
</a>
</li>
</ol>

<!-- Level2 Submenu -->

<ol id="topLevelMenuID-SubmenuPointer" class="menu">
<li>
<a href="URL" class="link" id="uniqueID">
Link Name
</a>
</li>
</ol>

You can see how the ID attribute of the top level OL tag is combined with the ID attribute of the submenu link ID, which matches the ID of the second OL tag as a reference pointer.

This is how submenu structures are mapped automatically, which can be nested to any level.

When opened, these menus and submenus are automatically configured as fully keyboard accessible ARIA Menu controls to ensure accessibility for screen reader and keyboard only users.

Since each menu link consists of an A tag with an href attribute, all menu structures support graceful degradation for Assistive Technologies that don't support the use of ARIA.

On the above demo page, there are now two flavors of ARIA Menu, a horizontal flyout menu, and a standard dropdown menu; both of which include nested submenus.

The flyout menu accepts the Left and Right arrow keys for traversing menu options at the same logical level, and the dropdown menu accepts Up and Down for this purpose instead.
Similarly Up and Down within the flyout will open or close submenus, and Left and Right within the dropdown will do the same instead.
Escape, Tab, or Shift+Tab will close the currently open menu.
Enter will open a submenu link or trigger a non-submenu link to activate.

You can see how each of these menu types are configured by viewing the setup script at
http://whatsock.com/modules/aria_tabs_menu_modules/js/setup.js
As you can see, this is very easy.

Additionally, each menu structure can be configured on a per-instance basis using the HTML5 data-horizontal, data-offsetleft, data-offsettop, and data-autoposition attributes within the menu tag markup, which are also documented on the demo page.

E.G

<ol id="topLevelMenuID" class="menu"
data-horizontal="true" data-autoposition="3" data-offsetleft="-30" data-offsettop="25">
...
</ol>

Similarly, many new HTML5 configuration settings have been added to the bootstrap Menu tab at
http://whatsock.com/bootstrap
so that menu behaviors can be easily configured using semantic HTML markup.

If you would like to try out a working example of this new functionality, where you can play with the settings and try out different configurations, the same ARIA Menu structures can be downloaded from
http://whatsock.com/modules/aria_tabs_menu_modules/menu_samples.zip
Which use the AccDC Interface for jQuery to power them.

Lastly, the minified and unminified source code has been added to all relevant GitHub projects:
Standalone AccDC API: https://github.com/accdc/accdc
AccDC API for jQuery: https://github.com/accdc/accdc-jquery
Standalone AccDC Bootstrap: https://github.com/accdc/bootstrap
AccDC Bootstrap for jQuery: https://github.com/accdc/bootstrap-jquery

Please let me know if you encounter any visual issues or bugs.

Best wishes,
Bryan