All functionality is operable with a keyboard

Design Notes

Some people use keyboards or key emulators such as sip-and-puff software, on-screen keyboards and speech input software to access content.

All functionality provided by the interactive elements on the page must be able to be operated with a keyboard or keyboard interface.

Developer Notes

Ensure all functionality is operable with a keyboard

The easiest way to ensure keyboard operability is to use native, semantic HTML elements for controls:

• Use <button> and <a> elements over generic elements such as <div> and <span>. Doing so means you get several accessibility benefits 'for free' — such as keyboard interactions supported by default.

More information

• Favourite Accessibility Test: Tab Key
• Keyboard-navigable JavaScript widgets
• Nutrition Cards: Accessibility Requirements for Components

Testing Notes

All functionality is operable with a keyboard

All functionality provided by the interactive elements on the page must be able to be operated with a keyboard or keyboard interface.

Steps to check

• use the tab key to progress through all links and controls
• shift-tab to reverse
• enter to follow links and activate buttons
• space to select form controls (such as checkboxes) and activate buttons
• arrow keys for radio buttons, tab controls and menu items

Impact range: Medium-High

Test type: Manual (with some support from tools)

Tool:

• ARC Toolkit (Show and Track Focus option)
• Force focus outlines bookmarklet — alternative tool to force visual focus indicator to assist testing

WCAG Reference: Understanding Success Criterion 2.1.1 Keyboard