Skip to content Skip to footer

How to enable accessible keyboard navigation.

Illustration of a keyboard used as a tool to navigate a website by many users.
Article Content
  • How a webpage is structured for users navigation with a keyboard.
  • What the tab index is.
  • Why as a beginner you should avoid editing the tab index.
  • The value of semantic code in enabling efficient keyboard navigation.
  • How to approach fixing issues with keyboard navigation.

The keyboard and the tab key are fundamental to many users navigating and interacting with a website. This can be because they prefer not to use a mouse or are unable to. Their reasons for this can range from physical disabilities, which make the fine motor control of using a mouse difficult, to finding the use of the keyboard more comfortable. The value of a keyboard as a tool for navigation, means its important to control and manage the interaction between it and your website and this vital tool. Getting this management right has a strong influence over the overall accessibility of your content.

The structure of a website for keyboard users

When considering how to design for a user using a keyboard, it’s best to think of your website as a list of links and blocks of content. Essentially someone using a keyboard moves through this list by using the tab key. At the start of using your website when they press the tab key, they will cycle through all the links in your navigation, e.g. home, about etc. They will then move on to the next block of content, which will be defined by an HTML element, so for example, in a semantic structure, you would normally find the next block of content would be the main tag, which would then have headings, paragraphs etc, inside.

You can see a visual demonstration of how your content is ordered for users of keyboards through the developer tools on most browsers ( you can read about accessibility browser tools here). On Firefox if you go onto the accessibility tab, you can see a checkbox for the tabbing order. This will show the order that the tab key will cycle through by putting a numbered box against each element. This can be useful for troubleshooting, if on testing you find that there is an issue with the tabbing order, for example it is not cycling through your links correctly.

The tab index and semantic code

This order shown by the developer tools is a visual demonstration of the tab index. This index is established automatically by the browser. It gives each HTML element of webpage a number. The browser can then establish the order it needs to cycle through for keyboard users.

This tab index is applied logically based on your code structure. You can edit the tab index, such as adding a 0 index to add a div into the tabbing order, or – tab index to take an element such as a widget, out of the tabbing order. Joshue O’Connor has described this within his work on accessibility (read a summary of Joshue’s book here).

However, there is a lot of caveats to altering a tab index appropriately. You should never try to make a div behave like a button, by altering the tab index. (read the Web Docs article on this here). Equally adding positive index on any element can impair accessibility. Read Scott Ohara’s thoughts on this here or, read this article on A11Y Project or Roselli’s blog on the topic . My advice would be as a beginner to avoid editing the tab index, unless there is a very specfic circumstance that requires it and even then I would look to see if you can find a different solution to solve the issue.

How to fix tab order issues

Most often you will find that issues with the tabbing order come down to problems within your code structure. A semantically and logically coded website should consequently have a logical tabbing order that has been established by default.

Issues may be caused for example, by not formatting links correctly especially when using buttons. For example, having a link inside of a button rather than a HTML link being styled to look like a button can cause issues. (Read this article here on button and links for more on this) This demonstrates a practical use case of why semantic code structure (as discussed in this article) is so important for accessibility.

Instead, you can use the visible tab index on tools such as Firefox. This will highlight issues with the semantics of your code. You can then fix the issues by changing your code structure rather than hijacking the tab index.

Useful Tip

As well as looking at the tab order in Firefox make sure to regularly test your website to see how easy it is to navigate just using the tab key. It’s also good research to look at other websites and try navigating with just the tab key. If you spot any issues on these sites, make a note of them, and try to work out why it’s happening and how you might fix it. This will provide you with knowledge which will be useful if you have similar issues in the future.

The tabbing order should match the logical visual order. Someone reading your website will move down the website and read left to right (for Western audiences). The tabbing order should therefore follow a similar logic. In using a website, you would read the navigation first and then move on to the main content. This logic used when navigating a website should be reflected in the tabbing order. (This article on skip content links here , can show how you can give user the option to skip to the main content).

This article discussed the importance of the keyboard for navigation, the tab index and value of semantic code. To learn more on stying of keyboard interactions, can read this article here on the focus element.

Leave a Reply

Your email address will not be published. Required fields are marked *