One of the most fundamental aspects of creating accessible web experiences is keyboard accessibility. Not everyone navigates the web using a mouse or touchscreen. For many users, including those with motor disabilities, visual impairments, or power users who prefer efficient navigation, the keyboard is the primary tool for interacting with websites.

This article explores what keyboard accessibility is, why it’s important, and what you should keep in mind when designing and developing keyboard-friendly interfaces.

Disclaimer: Please note that the content provided here is only a suggestion and does not constitute legal advice. Any liability in connection with the use of the information provided is excluded. No guarantee is given for the accuracy, completeness and up-to-dateness of the information. We advise you to seek legal advice if you have any uncertainties or questions.

What Is Keyboard Accessibility?

Keyboard accessibility means that all interactive elements on a website or app can be accessed and operated using a keyboard alone, without the need for a mouse.

This involves:

• Navigating through links, buttons, form fields, and widgets using Tab, Shift + Tab, Enter, Space, Arrow keys, and other keyboard commands.
• Clearly indicating which element has focus.
• Ensuring all functionality (such as opening a menu or submitting a form) is available via keyboard.

Best Practices for Keyboard Accessibility

1. Ensure Logical Tab Order
   Interactive elements should follow a logical flow when using the Tab key. This means aligning tab order with the visual and structural order of content.
    
2. Make All Interactive Elements Focusable
   Elements like buttons, links, form inputs, and custom widgets must be focusable and usable via keyboard.
    
3. Provide Visible Focus Styles
   Users need to see which element currently has focus. The design of the focus style is predetermined by the browser that is used. You can adjust the style of the focus outline with custom code. Avoid removing outlines (with CSS like outline: none) unless you replace them with a custom visible alternative. Also ensure that styles do not interfere or overlap the focus outlines of elements, so be careful when e.g. using overflow: hidden for a parent element. 

We are working on ensuring that all selectable elements in sections and templates have a visible focus outline. However, we recommend checking your website for keyboard accessibility according to the best practices listed above before publishing.