Keyboard access and visual focus 

Navigating with a keyboard

Accessible websites enable users to access all content and functionality – links, forms, media controls, etc. – through a keyboard or voice commands. Keyboard focus should be visible, such as a highlight or border that moves and follow the logical order of page elements as the tab key is pressed.

What to check

• Users can tab to all elements in each web page including links, form fields, buttons, and media controls.
• Users can tab away from all elements they can tab into without the control getting stuck.
• The tab order follows the logical reading order (generally left to right and top to bottom).
• The focus of the tab’s location is clear (highlighted or outlined) as users tab through elements.
• Users can do everything with the keyboard and do not need the mouse for any functions.
• In a drop-down list, users can use the arrow keys to navigate without triggering an action.
• There are bypass blocks used to skip any repeated content.
• When images are links, users have a clear visual focus and can be activated using the keyboard.

Keyboard focus example on From Tides to Tins

Keyboard focus examples on Navigating the St. Lawrence

Resources

• Easy checks – A first review of web accessibility: keyboard access and visual focus
• Bypass blocks
• Focus order
• Focus visible