Day 11: Keyboard accessibility

Keyboard accessibility ensures that everyone, including users who rely on assistive technologies or cannot use a mouse, can interact with your website or application. This is vital for people with motor impairments, people who use screen readers, those with temporary injuries, or anyone who simply prefers using a keyboard.

Why keyboard accessibility matters

Websites and applications should be fully navigable using only a keyboard. This enables users to perform all essential actions, such as filling out forms, navigating menus, and submitting information, without relying on a mouse or touchpad. Supporting keyboard accessibility also ensures compatibility with other input devices, such as switches or voice commands.

Common keyboard accessibility issues

• unreachable elements: interactive components like buttons, links, and form fields are not focusable or operable using a keyboard, making them inaccessible.
• improper focus order: focus moves in an illogical or confusing order, making navigation difficult.
• keyboard traps: users get stuck and cannot move past or return to other elements.
• missing or inadequate focus indicators: if no visible focus indicators are used—or they are poorly implemented—keyboard users cannot see which element is currently focused, leaving them unsure of their position.

Tips for improving keyboard accessibility

• make all interactive elements focusable: use semantic HTML for elements like button and a. For custom components, ensure they are operable using tabindex and ARIA roles or properties where necessary.
• ensure a logical focus order: check that the tab order follows the natural reading flow of the page. Avoid unexpected jumps that disrupt navigation.
• provide a visible focus indicator: style the :focus state using CSS to make the currently focused element visible. Visit the GOV.UK Design System focus states for more guidance.
• enable keyboard navigation for complex widgets: for components like modals, dropdowns, and carousels, support keyboard actions such as arrow keys for navigation and the Escape key to close.
• add skip links: implement skip links to allow users to bypass repeated elements (for example, navigation) and go directly to the main content of the page.

Keyboard commands reference

The following table outlines common keyboard commands that should be supported for accessibility. This is not an exhaustive list.

Keyboard Commands

Key(s)	Function
Tab	Move to the next focusable element
Shift + Tab	Move to the previous focusable element
Enter	Activate a focused link, button, or other control, select a list item (click function)
Space	Open a dropdown menu, activate a focused button, check/uncheck a checkbox, page down
Escape	Close menus, or dialogs, cancel/close a prompt/modal
Arrow Keys	Navigate within menus, move between list items, tabs, radio buttons, scroll page
Command + L/ Ctrl + L	Go to address bar

Windows Keyboard example

Mac Keyboard example

Testing keyboard accessibility

You can test your website by unplugging your mouse and navigating entirely with the keyboard. When testing, check the following:

• you can tell where you are on the page (visible focus)
• the tabbing order makes logical sense
• nothing unexpected happens when tabbing through a page
• you do not get stuck in a keyboard trap
• forms are fully usable without a mouse
• skip links work, allowing users to bypass navigation
• content remains usable when zoomed in, magnified, or with enlarged text
• the page behaves as expected when users zoom in

Keyboard navigation checklist

Action	Expected Behaviour
Navigate between elements	Use Tab to move forward and Shift + Tab to move backward. Focus moves logically through the page.
Activate links and buttons	Press Enter or Space to activate interactive elements.
Use dropdowns or menus	Arrow keys move through options, and Enter selects an item.
Close modals or menus	Press Escape to close overlays or modals.

Keyboard nightmare before Christmas

Try the HOCUS :FOCUS keyboard accessibility horror game created by @HTeuMeuLeu which helps highlight the importance of keyboard accessibility.

Web accessibility perspectives: keyboard compatibility

Watch the video from WC3 on keyboard compatibility

Ensuring full keyboard support makes your site usable for a wider audience and is a key part of ensuring accessibility of a website or service.