Nikolas Sprunt
Published in

Nikolas Sprunt

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.

Project

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.

Discovery

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.

Ideation

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.

Gospel Media section of churchofjesuschrist.org

Featured Collections is highlighted. From here, the user can tab to Just Added or enter Featured Collections by pressing enter or space.

Featured Collections in the Gospel Media section

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.

Secondary navigation on the Volunteer and Serve page

Another example is the Come Follow Me section.

Scriptures navigation

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.

Final Product

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store