WAI-ARIA Keyboard Focus

Setting keyboard focus using WAI-ARIA.

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

Need web help?

All websites and applications which form part of the University web presence are expected to be compliant with the W3C's Web Accessibility Guidelines (WCAG) 2.2 AA guidelines.

Get web accessibility help