Table of Contents
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.