WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Lucy Greco
Date: Feb 11, 2013 11:38AM

Hello:
Brian do you have a how to for incidental developers on how to use all of
this we would like our developers to start using some of these but most of
them say they can't see how to incorporate the modules on their sites. Do
you have a step by step what to do to add say the accordion on a site
thanks Lucy

Lucia Greco
Web Access Analyst
IST-Campus Technology Services
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: Monday, February 11, 2013 1:08 AM
To: WebAIM Discussion List
Subject: [WebAIM] The ARIA Menu generator now supports variable tag
structures, horizontal and vertical menu keyboard handling, customizable
setting overrides, and graceful degradation.

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