WAI-ARIA Keyboard Focus

Rationale

  • All modern programming frameworks, for software and web, require that document elements can be interected 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

Contact Us

For assistance or to report accessibility problems please contact:

Andrew Normand
Web Accessibility Lead
Email: anormand@unimelb.edu.au
Phone: +61 3 9035 4867