E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

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

Number of posts in this thread: 3 (In chronological order)

From: Bryan Garaventa
Date: Mon, Feb 11 2013 2:08AM
Subject: The ARIA Menu generator now supports variable tag structures, horizontal and vertical menu keyboard handling, customizable setting overrides, and graceful degradation.
No previous message | Next message →

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:



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



<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

From: Lucy Greco
Date: Mon, Feb 11 2013 11:38AM
Subject: Re: The ARIA Menu generator now supports variable tag structures, horizontal and vertical menu keyboard handling, customizable setting overrides, and graceful degradation.
← Previous message | Next message →

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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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:



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



<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

From: Bryan Garaventa
Date: Mon, Feb 11 2013 11:47AM
Subject: Re: The ARIA Menu generator now supports variable tag structures, horizontal and vertical menu keyboard handling, customizable setting overrides, and graceful degradation.
← Previous message | No next message

Of course, are they using jQuery?

----- Original Message -----
From: "Lucy Greco" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS 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:
>
> 
>
> <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>
>
> 
>
> <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
> > > > > >