User Tools

Site Tools


Keyboard Navigation and Visible Focus

The ability to navigate a site using only the keyboard is important for screen reader users as well as sighted people with mobility impairments. Understanding tab order is essential. Keyboard users will navigate every focusable item on the screen, in sequential order, unless skip links and ARIA landmarks are provided. Using the tab and arrow keys, users should reach each element on the page in the same order it appears visually.

Avoid setting the tabindex attribute to a positive value if you can help it. The browser determines the tabbing order automatically based on the sequence of elements in the markup.

Click actions must be available to people using keyboards as well as mice. Use <button> instead of <a> for triggering actions that do not reload the page, so that click events will include keyboard support automatically.

Avoid attaching essential actions to hover events. These will be unavailable to both keyboard and touchscreen users.

Visible Focus

Sighted people using keyboards for navigation need to see which page element has focus. Most native HTML controls have focus indicators; it’s important to avoid turning these off. Custom components may need to have focus styles set explicitly. The focus color should have a 3:1 contrast ratio with the background (using the WebAIM contrast checker).

In CSS, `:focus` will create an outline that is visible when an element has focus via keyboard navigation and mouse clicks, while `:focus-visible` behaves differently depending on the mode of input. You can use `:focus-visible` to avoid visible focus rings on clicked buttons and links (but do some user testing first to make sure the rings are not helpful).

In modal windows, focus must be trapped in the modal until it is dismissed, and there must be a way to dismiss the modal using the keyboard.


accessibility/common_issues/keyboard.txt · Last modified: 2024/01/24 10:53 by scl

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.