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.
For specific coding guidance, view the AccDC Technical Style Guide

ARIA Tabs

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

Keystrokes:

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

Non-ARIA Tabs

Golden Village Reflections Ship

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

Keystrokes:

ARIA Menus

Options (Horizontal Flyout)

Keystrokes:

To view the available configuration options when declaring an ARIA Menu control, view the setup JavaScript file: "setup.js"

Menu Tag Attributes

The following attributes may be set within the menu tag markup to enhance functionality on a once-per-menu instance basis.

Under the Golden Gate Bridge looking towards Marin
(photography by C. Wallenstein Garaventa)
Sete cidades village on the shore of the green lake, São Miguel, Azores
(photography by C. Wallenstein Garaventa)
People and their reflections, walking on the Sutro Bath ruins, San Francisco
(photography by C. Wallenstein Garaventa)
Golden Gate Bridge with freight ship
(photography by C. Wallenstein Garaventa)