<blog>
Designing for Keyboard Accessibility

Image credit: Original image

Originally appeared in LinkedIn AccessABILITY

As I've been pointing out throughout this series, it's critical, now more than ever, to ensure that websites are accessible. Keyboard accessibility plays a major role in ensuring websites are accessible by allowing people to interact and explore webpages with just a keyboard. You may develop an inclusive user experience that accommodates a wide variety of users, including those with impairments or situational limits, by putting best practices for keyboard accessibility into place. In addition to regular keyboards, some users may use modified keyboards or other tools that mimic keyboard functions. I can't possibly cover everything in this post, but I'll do my best to cover the value of keyboard accessibility and offer helpful advice on how to make your website accessible to users who navigate using keyboards.

"Equality is accessibility. If you don’t have accessibility, you don’t have equality."
-Marc Benioff, Salesforce's founder, chairman, and co-CEO

Why Keyboard Accessibility Matters

Keyboard accessibility isn't just about ensuring compliance with the Web Content Accessibility Guidelines (WCAG); it's about creating a seamless user experience for everyone. It's long been a theme of designers to create website and application layouts only considering mouse or touch interactions. In turn, developers have taken the designs at face value and built digital projects that work – with a mouse (or touch). Imagine navigating the web without a mouse – for many users with disabilities, this is a daily reality. Keyboard accessibility ensures that everyone, including those with mobility or visual impairments, or those who simply prefer using keyboard shortcuts, can effectively interact with your digital product.

At its most basic level, keyboard navigation involves using the Tab key to move through interactive elements. Depending on the type of element, inputs can then be populated, the Enter or Space key can be used to activate buttons or links, and the arrow keys can be used to traverse select elements, radio/check box groups, sliders, or navigation dropdowns. Understanding these basics concepts is the first step in creating a keyboard accessible website or application.

Focus

The majority of keyboard accessibility has to do with “focus”, or the currently active element, or the element receiving input. In most web browsers, users can move focus forward by pressing the Tab key and backward by pressing the Shift + Tab keys. All interactive elements must receive keyboard focus in order to be keyboard accessible.

Focus Order

The focus order is the order in which the elements on a page receive their focus. The focus order is based on the order of the elements within the source code honoring the order of the document object model (DOM) or structure of the HTML.

The default focus order for most languages starts at the top of the page, moving from left to right, and ending at the bottom. For languages that are read right to left, or have other specifications based on that language the page may require a different focus order. Since the focus order is based on the document structure, it’s often recommended to turn off CSS styles and test that the order still makes sense.

Focus management is at the heart of keyboard navigation. Effective focus management involves:

• Visible Focus Indicator: Users should always know which element is currently focused. This can be achieved using CSS to style the focus state of elements.
• Logical Tab Order: The tab order should follow the visual and logical structure of the page. Elements should receive focus in a sequence that makes sense to the user, typically following the natural reading order.

Tabindex

The tabindex is a global attribute that allows an HTML element to receive focus. It needs a value of zero or a negative number in order to work in an accessible way. Interactive elements typically do not require a tabindex be used.

If an element has a tabindex with any negative value, it will be removed from the natural focus order. Which means that interactive elements that normally exist in the focus order, can be assigned a negative tabindex value (tabindex="-1") to remove them from it. A common example would be when an input is changed to disabled. Similarly, if a tabindex of zero (tabindex="0") is applied to a non-interactive or normally unfocusable element, then it will be added into the natural focus order of the page that aligns with where the element exists in the DOM.

Dynamic elements or interactive “widgets” are common examples of the need to adjust the tabindex values on an element. For example, interactive tabs should tabindex values set to not only the tabs, but sometimes also the content of each tab container. You should also consider any scrollable content that exists inside of an element with the overflow property applied to it. In order for the content to be scrollable by keyboard users, it must be able to receive focus, so a tabindex should be set.

Tabindex can seem like a lot, but at the basics of it are:

• Focus moves through elements with a tabindex greater than 0, in ascending order. If multiple elements have the same tabindex, those that exist earlier in the DOM will receive the focus first.
• Elements with tabindex="0" will occur according to their place within the DOM.
• Elements can have a tabindex greater than zero, but using values greater than zero is typically avoided as it can lead to maintainability issues.
• Elements can have a negative tabindex which removed them from the focus order.
• Tabindex values can be changed through interactive code, typically JavaScript.

Focus Indicators

Every modern web browser has a default style that is applied to focused elements using the CSS outline property. To ensure your keyboard accessibility efforts the visual focus should be retained. Do NOT set the outline property to “none” simply because the color or style doesn’t fit within your desired theme.

a:focus {
    outline: none; /* don't do this! */
}

Instead, adjust the color, size and/or shape of the outline.

a:focus {
    outline: auto 5px Highlight; /* for non-webkit browsers */
    outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

A focus indicator shape can take various forms, including an outline, a border, an underline, a box, a background change, or any other noticeable stylistic change that does not rely solely on color to signal that the keyboard's emphasis is on that element. When color changes are used, you must be careful to not introduce color contrast issues.

Keyboard Traps

To ensure keyboard accessibility, keyboard traps should not be present on a web page. Keyboard traps arise when a keyboard user is unable to shift focus away from an interactive element. Traps can appear in input boxes, drop-down menus, or hyperlinks. This forces the keyboard user to remain inside the input box or to activate a hyperlink without being able to navigate away from it.

Skip Navigation Links

Providing a "skip to main content" link at the top of your page allows users to bypass repetitive navigation and go directly to the main content. This is particularly useful for screen reader users and those navigating via keyboard.

Skip to content links should be coded to be “invisible” to all users and made visible/focusable when a user first tabs into the content of your website.

Conclusion

Keyboard accessibility is an important part of web development that guarantees your website is accessible to everyone. You can develop an inclusive web experience by successfully controlling focus, ensuring that all interactive items are keyboard operable, offering skip navigation links, and including ARIA landmarks. Regularly testing and tweaking your site will help it remain accessible as it changes.