WAI-ARIA Keyboard Focus

Rationale

  • All modern programming frameworks, for software and web, require that document elements can be interacted with using the keyboard.

Use Cases

  • High volume users of systems who may resort to using the keyboard more once they get tired
  • Users with mobility impairments who may not be able to use a mouse accurately or effectively
  • Screen reader users who do not use a mouse

The Problem

  • The Tab and Shift + Tab keys move focus between HTML elements
  • In HTML 4.01, keyboard focus was limited to form and anchor elements
  • Web 2.0 widgets typically do not have inherent keyboard support

The Solution

  • WAI-ARIA has a tabindex attribute that can now be applied to all rendered HTML elements
  • Once a widget receives focus, arrow keys, Space and Enter can be used to navigate the widget and trigger functions

Tab index Values

  • Widgets with no assigned tabindex will only receive focus if they are form controls and anchors
  • Widgets with a tabindex of less than zero, e.g. tabindex="-1", are not added to the tab sequence but they can be given focus using JavaScript via element.focus()
  • Widgets with a tabindex of zero, e.g. tabindex="0", will receive tab focus relative to their position in the document
  • Widgets with a tabindex greater than zero, e.g. tabindex="x" (where x is a positive integer between 1 and 32768), receive focus in accordance with their specified tab order

Worth remembering

  • Both focus and hover styles need to be added to your CSS for elements to appear the same when selected by either mouse or keyboard.

More Information