Tab Indexing for Complex Sites
Research and Design Case Study
Tab indexing allows users to navigate the web with just a keyboard or keyboard alternative. Fortunately, browsers are pretty smart and can implement tab indexing from reading HTML. Unfortunately, with more complex sites the tab indexing sequence can break.
Initially, I was running accessibility audits on several pages of the company’s website. There were a few instances of tab index errors. This problem was found in a handful of areas of the site. Upon further exploration, I felt that navigating the site with keyboard-only was long and difficult even when it worked properly. It turns out that this was something that my manager was looking into as well.
I was asked to research best practices for tab indexing and to write guidelines for future implementation.
I started by searching WCAG, USWDS, and a handful of university sites to find guidance. Other than learning about what is already implemented automatically, I didn’t find much. There is hardly anything out there on improving the tab index further than simply meeting the WCAG requirements. I did find a couple of things that were helpful though.
One of them was the bypass block that allows the user to skip the navigation to the main content. The Church already uses this, but a good idea for more complex navigation is to add a second bypass block that jumps to the search feature.
Another improvement that I found is to allow the user to tab to each nav item without having to go through each one’s dropdown menu. If they want to open the dropdown menu, they can push enter or space. Currently, each nav item’s dropdown menu has to be tabbed through to progress to the next one which makes it frustratingly long.
My research turned into fully understanding WCAG’s requirements for tab indexing in order to improve the experience without breaking the rules.
I started to explore the site with a keyboard. I found that the most impactful thing that I could do is to consolidate the tab index into sections. What I mean by that is to implement the same idea that I mentioned earlier with the nav items’ dropdown menus by highlighting a section of items allowing the user to tab to the next section or enter the current section. This would only be implemented in certain circumstances, for example if there were more than 5 items. Here’s an example.
Featured Collections is highlighted. From here, the user can tab to Just Added or enter Featured Collections by pressing enter or space.
Once they enter Featured Collections, they can either tab to the tile they want or they can leave by hitting escape or tabbing all the way through.
Most of the sections on this page have well over 10 tiles in them. In order to get halfway down the page, the user has to tab over 100 times. Once these guidelines will be implemented, the user will only have to tab around 10 times to get to the same spot.
The same idea would work in other areas too. For example, the Volunteer and Serve page.
Another example is the Come Follow Me section.
In the Come Follow Me and the Scriptures sections, there is a lengthy navigation to the left. Implementing this idea here would save keyboard-only users a lot of time as well.
The end goal of this project was to write documentation to give guidance on how to improve the tab index, and it was added to the company’s design system documentation. I was really hoping that I could do some testing, but I was unable to during my internship there. With that said, the solution I created sticks to the guidelines outlined by WCAG, and I believe this will greatly improve the tab indexing experience.
If you would like to see the documentation I wrote, or if you would like to talk more about any of my other work, reach out on LinkedIn. I’d love to chat!