Accessible ARIA Demos

The following samples demonstrate recursive JavaScript modules for automatically generating accessible tabs and menus using ARIA.
Module files:

1. aria_tabs_module.js : Automatically generates ARIA tabs using CSS Selectors to identify standard elements in the DOM.
2. aria_menu_module.js : Automatically generates ARIA menus using CSS Selectors to identify parent/child elements in the DOM.

Dynamic functionality is powered by the AccDC API via setup.js.
The packaged file for this demo can be downloaded from WhatSock.com under Downloads.

The ARIA Tab generator now supports semantic configuration via HTML5, optional ARIA and non-ARIA implementations, optional preloading of external tab panels and images, and property overrides.

The above tabs consist of standard DIV tags, which are automatically converted into an ARIA Tab List using a CSS Selector.

Keystrokes:

• Using a screen reader, press the TabKey or Arrow to a tab and press Enter to activate.
• Use the arrow keys to move focus between relative tabs.
• Press Return or the Spacebar to open a selected tab.
• Press Tab or Shift+Tab or Escape to move out of the tab selector field.

ARIA Tab functionality simulates the software browsing experience within standard Windows applications.

The above tabs consist of standard A tags, which are automatically converted into a non-ARIA Tab List using a CSS Selector.

Keystrokes:

• Using a screen reader, press the TabKey or Arrow to a tab and press Enter to activate.
• Press the TabKey to move focus between relative tabs.
• Press Return to open a selected tab.

Options Updated to support scalability, recursive processing, and lazy loading.

The Options button will open an overlay consisting of standard list markup, which is automatically converted into recursive ARIA menus using CSS Selectors.
Keystrokes:

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

ARIA Menu functionality simulates the context menu experience within standard Windows applications.