WebAIM - Web Accessibility In Mind

E-mail List Archives

How to Generate Automatically Accessible ARIA Tabs and Menu Controls

for

From: Bryan Garaventa
Date: Sep 15, 2011 10:54PM

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