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

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 (Horizontal Flyout) Options (Vertical Dropdown)

Keystrokes:

• Using a screen reader, activate the Options button.
• Use the Up and Down (vertical) or Left and Right (flyout) arrow keys to traverse available menu options.
• Press the Right (vertical) or Down (flyout) arrow to open a submenu, or press Enter to activate a menu item.
• Press the Left (vertical) or Up (flyout) arrow 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.

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

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

• data-horizontal="true" or "false" : Sets or unsets a horizontal flyout menu where the Left and Right arrow keys will be used to navigate menu item nodes, and Up and Down will be used to close or open submenus.
  Syntax:
  <ol id="topLevelMenuID-SubmenuPointer" class="menu" data-horizontal="true">
...
</ol>

• data-offsetleft : Specifies a positive or negative offsetLeft value that will be applied to the menu after it is rendered.
  Syntax:
  <ol id="topLevelMenuID-SubmenuPointer" class="menu" data-offsetleft="-30">
...
</ol>

• data-offsettop : Specifies a positive or negative offsetTop value that will be applied to the menu after it is rendered.
  Syntax:
  <ol id="topLevelMenuID-SubmenuPointer" class="menu" data-offsettop="20">
...
</ol>

• data-autoposition : Specifies a custom autoPosition value that will control where the menu is visually positioned relative to the triggering element.
  Syntax:
  <ol id="topLevelMenuID-SubmenuPointer" class="menu" data-autoposition="9">
...
</ol>

  Accepted values:
  
  • 0: Disabled
  • 1: Above/Center/Left Edge Aligned
  • 2: Above/Right/Right Edge Aligned
  • 3: Level/Right/Right Edge Aligned
  • 4: Below/Right/Right Edge Aligned
  • 5: Below/Center/Left Edge Aligned
  • 6: Below/Left/Left Edge Aligned
  • 7: Level/Left/Left Edge Aligned
  • 8: Above/Left/Left Edge Aligned
  • 9: Level/Center/Left Edge Aligned
  • 10: Above/Center/Right Edge Aligned
  • 11: Level/Center/Right Edge Aligned
  • 12: Below/Center/Right Edge Aligned