-
Accessibility
-
WAI-ARIA
-
WAI-ARIA Keyboard Focus
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