Keyboard accessibility

All content must be operable using the keyboard.

Keyboard-only users and users of assistive technology use the keyboard to navigate all website content and access every interactive element.

All interactive elements must receive keyboard focus in order to be keyboard accessible. Buttons, links, and form controls will automatically receive keyboard focus. However, links will not receive keyboard focus if they do not have a value.

For any other interactive element, a tab index should be added to make the element responsive to keyboard focus.

Operability

Buttons, links and form controls

All buttons, links, and form controls should be operable using the keyboard by default. This can be overridden by the use of certain scripts and HTML attributes if necessary, but that step is taken on a case-by-case basis.

onclick effect

When applied to an HTML element, the “onclick” attribute can be used to activate JavaScript and other forms of interactivity. Clicking the assigned element triggers “onclick,” which is operable using the keyboard with most browsers and assistive technology.

onmouseover and onfocus effects

When applied to an HTML element, the “onmouseover” attribute can be used to activate JavaScript and other forms of interactivity. Users can activate “onmouseover” by hovering over the assigned “onclick” element, but “onmouseover” is not operable using the keyboard.

Instead, the “onfocus” attribute provides equivalent functionality by activating the effect when the interactive element receives keyboard focus.

Equivalency

Making some functions, such as a drag-and-drop system, keyboard accessible isn’t practical or possible.

In these situations, equivalent functionality must be provided for keyboard-only users. They may be unable to drag and drop content elements, but as long as they can reorder the elements through other means, the function is considered keyboard accessible.

Traps

A keyboard trap occurs when a user tabs to an interactive element, frame, etc, but cannot move on to the next element and/or return to an earlier element. Keyboard interactions should never be trapped, and any apparent traps should be remedied immediately.

Examples

Tab index markup

Tab index is applied using the tabIndex attribute. The value of the tab index is an integer. The higher the integer, the higher the priority in the tab order (e.g., "4" will receive focus before "2").

By default, all links, buttons, and form controls have a tab index of "0". Giving your interactive element a tab index of "0" will place it logically in the default tab order.

See tabindex attribute on line 8:

<!doctype html>
<html lang="en-US">
  <head>
    <title>Keyboard Accessibility - Web Accessibility Top Ten - UITS</title>
  </head>
  <body>
	<ul>
	<li onclick="some_script"  tabindex="0">Run Some Script</li>
	...
	</ul>
</body>
</html>

onclick Markup

The onclick attribute can add interactivity to all types of elements. To trigger the assigned interaction for each element, press the “enter” key or click the mouse when focusing on or selecting the element.

See the onclick attribute on line 8:

<!doctype html>
<html lang="en-US">
  <head>
    <title>Keyboard Accessibility - Web Accessibility Top Ten - UITS</title>
  </head>
  <body>
	<ul>
	<li onclick="some_script" tabIndex="0">Run Some Script</li>
	...
	</ul>
</body>
</html>

onfocus Markup

The onfocus attribute adds interactivity to all types of elements. To trigger the assigned interaction for each element, focus the keyboard on the element or select it with the mouse.

See the onfocus attribute on line 7:

<!doctype html>
<html lang="en-US">
  <head>
    <title>Keyboard Accessibility - Web Accessibility Top Ten - UITS</title>
  </head>
  <body>
	<a href="example.com" onfocus="some_script">Go to example.com</a>
</body>
</html>

Best practices

Check that all interactive elements receive tab order
Test all interactive elements for keyboard-focus activation
Verify that all mouseover effects, hover effects, etc. can be activated using the keyboard
Provide equivalent functions that can be accessed using the keyboard for any interactive elements

Checking for correct usage

Attempt to navigate the entire web page using strictly the keyboard
- Fix any accessibility issues you might find

Relevant standards

WCAG 2.0 SC 2.1.1 - Keyboard
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)

WCAG 2.0 SC 2.1.2 - No Keyboard Trap
If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away. (Level A)

WCAG 2.0 SC 2.1.3 - Keyboard (No Exception)
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes. (Level AAA)