One important thing when learning how to make your website more accessible is understanding some people prefer to navigate with a keyboard. Many would rather not use a pointing device when utilizing the web — this can be for many reasons. Maybe you cannot use a mouse or don’t want to move your hands away from the keyboard, as every extra motion wastes time and energy.
From an accessibility point of view, consider why people might want or need to use only a keyboard for navigating purposes when designing our websites. This article will cover several approaches and techniques to ensure keyboard-only visitors can navigate your site easily.
Key takeaways:
- You can tell if your site is keyboard accessible if users navigate from top to bottom.
- Browsers will automatically ensure the focus state indicates the identification of the cursor.
- Use keyboard-accessible navigation features to make your site easier for people using keyboard-only navigation.
Best website builder for small businesses
Best website builder for small businesses
Best website builder for beginners
Best website builder for beginners
Is Your Site Keyboard-Only Accessible?
The first thing you need to understand when designing for keyboard navigability is users with only a keyboard will go through a site sequentially or from top to bottom. You can’t simply point at items to get to them; you need to tab through each item as it exists and either keep moving or use the “enter” key to trigger an action.
First, test out your site as it is. Place the cursor at the URL for the site, and put away your mouse or testing device. Try tabbing through the page, and observe what happens. Note: it is possible to tab through in reverse order using “Shift-tab,” so don’t worry if you accidentally skip past a critical item.
What a well-structured site looks like
On a well-structured site, you can see where you are at any point on the page and choose any link by simply hitting “enter.”
The flow of the page is from top to bottom; your progress will follow the layout of the page. It can be tedious to go through long lists of links on a left menu (though at least you can access everything). Keep this in mind as you design your site for keyboard accessibility.
Unlike mouse-driven navigation, which enables users to click on a page simply, keyboard navigators must know where they are on a web page at a given moment. This is controlled by “focus.”
On the most straightforward sites, all browsers will automatically ensure that the focus state indicates the identification of the cursor. In some cases, it will be a thin border around the link element; in others, it might be a small dotted line underneath the focused element.
If you do nothing other than code simple HTML, your site should be easily navigable. Many designers and developers run into trouble when they override some of this functionality because they believe it “just doesn’t look good.”
This is often done inside Cascading Style Sheets (CSS) files or removing things like underlining links. While this may be tempting, it’s a bad idea from an accessibility standpoint. If you must remove these for artistic reasons, ensure something else visible is in place.
These are some keyboard navigation mistakes to avoid:
Div and span elements
With modern web design, it is not uncommon to create a great deal of interactivity on the page and to make many elements on a page using JavaScript, which modifies many existing “div” and “span” elements.
Unfortunately, these particular types of elements are not visible to keyboards. While interaction may be possible and obvious for those using a pointing device, keyboards may simply skip over interactive elements designed in this fashion.
There is a solution. Simply use “tabindex” attributes for these elements, which the tab button on the keyboard will recognize. Tabindex is an attribute that will indicate that the element can be focused, and the number assigned to it will be the order that a keyboard will tab through to it.
For instance, if you want to do this with a div element, it can be done like so:
<div tabindex="0">This will be the first item that a tab on the keyboard will go to after any previous tabs</div>
The value of 0 indicates that it will be accessed in sequential order. If you wish to have the elements tab in any different order than they appear on the page, give them orders lower than previous tabindex entries.
Note, avoid using -1 as a tabindex value, as it will be unreachable by keyboard navigation (it is sometimes used for JavaScript purposes, wherein it can become helpful in dynamic elements).
Drop-down menus
A common web design pattern is to use drop-down menus that provide access to a wide array of categories in minimal space. But if you only use keyboards for navigation, these menus can cause problems.
For example, the down arrow used by keyboard navigation automatically selects the first item on the menu instead of enabling users to move through the different items on the list. The down-arrow key should allow you to choose different items and use the enter key to select your desired item.
Add these features to your site to make it easier to navigate via keyboard:
Comprehensive tab key navigation
Incorporate the ability for users to navigate through every element of the website using the Tab key.
Drop-down list navigation
Enable seamless navigation through drop-down lists using arrow keys, ensuring that unexpected actions do not occur.
Escape from keyboard traps
Implement mechanisms to allow users to escape elements easily they accidentally enter by pressing the Tab key, thus avoiding the “keyboard trap” scenario.
Logical tab order
Arrange the tab order in a left-to-right fashion that follows the natural reading order, enhancing the user’s understanding and navigation flow.
Visible focus indicator
Ensure that the focus of each element is visually distinct and visible as users navigate using the Tab key, aiding in orientation and navigation.
Intuitive image link identification
Make it evident to users when images are links to other webpages, facilitating their understanding that these links can be opened solely using the keyboard.
Additional considerations
There are many other keyboard-accessible features to keep in mind. One is to avoid using CAPTCHA elements on your web pages, as these can cause serious accessibility problems for keyboard users and many others, particularly those who use screen readers.
Beyond the simple methods described above, you can use a few advanced tricks, such as creating keyboard-navigable JavaScript elements, using tabindex, or various non-native controls. You can also use tools like React to create custom keyboard shortcuts for your web pages.
