Keyboard accessibility

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)

Section 508 §1194.21 (a)
When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.