Accessibility

with WAI–ARIA

Scope and history

Assistive Technologies

Accessibility Tree

Microsoft OLE Accessibility (1995)

Microsoft ActiveX Accessibility (MSAA )

UI Automation (UIA)

ARIA DOM attributes

WAI-ARIA

WAI-ARIA

Web Accessibility Initiative –

Accessible Rich Internet Applications

 

W3C specification (2014)

Declaration of HTML attributes:

  role=     button
  name=     Search
  status=   unselected
  property= focusable

Two ways to program a button

<button>Pause</button>

<div onclick="..." class="pauseBtn">Pause</div>

• Browsers, tools, search engines recognise this as a button
   
• Screen reader says "Pause button"
   
• Even without CSS recognisable as a button; it is clear that you can click on it
   
• Reachable with Tab key
   
• Activate with Enter and Space
   
• Visible outline

• Semantically this is not a button
  (so it is not in the accessibility tree)
   
• Screen reader says "Pause"
   
• Without CSS this does not look like a button; even onMouseOver does not indicate that it is clickable
   
• Not reachable with Tab key
   
• Cannot be activated via keyboard
   
• No outline

An ARIA Menu must meet all of the following requirements:

1.  If styled vertically, the menu container must include role="menu".

     If styled horizontally, the menu container must include role="menubar".

 

2.  All selectable children within the menu must include one of the following Roles:

• role="menuitem"
• role="menuitemcheckbox"
• The arrow keys should traverse logically through each menu item node as expected, or open or close submenus when applicable.

 

3.  Through scripting:

• Programmatic focus must only be set to elements that include a Role of menu, menubar, menuitem, menuitemcheckbox, or menuitemradio.
• When a menu or submenu opens, focus must be set to the new menu.
• A menu should have only one tab stop.
• The arrow keys should traverse logically through each menu item node as expected, or open or close submenus when applicable.

 

4.  If a menu item node opens a submenu (another ARIA Menu construct), the focusable element node that includes

     role="menuitem" must also include aria-haspopup="true".

 

5.  If an external keyboard accessible triggering element opens a menu, it too must include the attribute

     aria-haspopup="true".

 

6.  If programmatic focus is set to the element node that includes role="menu" or role="menubar", the attribute

     aria-activedescendant must be used to point to the currently selected menu item node that includes either

     role="menuitem", role="menuitemcheckbox", or role="menuitemradio".

demo!