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: Bryan Garaventa
Date: Feb 11, 2013 11:47AM

Of course, are they using jQuery?


----- Original Message -----
From: "Lucy Greco" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Monday, February 11, 2013 10:38 AM
Subject: Re: [WebAIM] The ARIA Menu generator now supports variable tag
structures, horizontal and vertical menu keyboard handling, customizable
setting overrides, and graceful degradation.


> 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
> > > > > >