WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to Generate Automatically Accessible ARIA Tabs and Menu Controls

for

From: Priti
Date: Sep 16, 2011 6:45AM

Hi Bryan,

This is excellent!
I am a screen reader user & tried this demo with IE 8 & FF 3.62 with NVDA
2011.2 & JAWS 11. Following are the results, if it helps:

Menus worked perfectly in both the browsers using NVDA & JAWS. However, in
case of tabs, JAWS failed to identify the tabs in FF whereas it worked fine
in IE, as described in the example instructions & keystrokes. On the other
hand, NVDA activated the tab without users requiring to activate their
selection (as mentioned in the instructions), which was slightly confusing
if one goes with the instructions in mind in both the browsers. Actually if
we compare it standard Windows tabs, the tab content is displayed as the
user navigates and doesn't require the user to activate it. If one forgots
what is mentioned in the instruction text, this is the perfect simulation of
a standard windows tab panel or dialog and I would personally go with this
one.
Would like to know what other list members have to say on this.


All in all a fantastic effort that works well for screen readers as well as
keyboard users.

Regards,
Priti Rohra


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: Friday, September 16, 2011 10:26 AM
To: WebAIM Discussion List
Subject: [WebAIM] How to Generate Automatically Accessible ARIA Tabs and
Menu Controls

I've written two modules that will automatically convert standard DOM
elements into interactive ARIA Tabs and Menu controls. CSS Selectors are
used to identify specified DOM nodes, and the ARIA Menu module supports
recursive processing to configure interactive submenus. The functionality of

each module should be easy to understand from the code.

ARIA Tab functionality simulates the software browsing experience within
standard Windows applications.
Keystrokes:
. Using a screen reader, press Tab or Arrow to a tab and press Enter to
activate.
. Use the arrow keys to select and activate successive tabs.
. Press Tab or Shift+Tab or Escape to move out of the tab selector field.

ARIA Menu functionality simulates the context menu experience within
standard Windows applications.
. Using a screen reader, activate the Options button.
. Use the Up and Down Arrow keys to traverse available menu options.
. Press the Right Arrow or Enter key to open a submenu, or to activate a
menu item.
. Press the Left Arrow key to close the currently open menu and return to a
previously open menu (if present).
. Press Escape, Tab, or Shift+Tab to close all currently open menus and
submenus.

Interactive Demo:
http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
Packaged Download: http://whatsock.com/modules/aria_tabs_menu_modules.zip

Enjoy,
Bryan

www.WhatSock.com