Why the Tabbing Order is Important

Clive Loseby on July 19, 2022 at 10:45am |Updated on February 26, 2024 at 3:06pm

Why do we use the tab key?

If you are disabled, you will sometimes have to resort to using the tab key to navigate through a web page. It can a long time but sometimes you have to resort to doing it.  Screen readers and dictation software are usually quite good at allowing you to shortcut this process and jump to specific parts directly, provided the web page has been marked up correctly, but if a web page has been poorly coded, you have to resort to the basics.

This is why the order that the tab key follows is really important, it must flow in a logical way otherwise it can be very confusing for the user. Usually, you would expect to be able to follow the order in which the elements of a page are laid out.

You can test this for yourself. I talked about the Tab Test at the end of my TEDx Talk and it involves nothing more complicated than going to your website and pressing the tab key repeatedly.

Ideally, you should be able to select every element on the screen: logo, navigation, social media links etc.. before you go onto the main website. If you are lucky, the very first things you may see are what are known as Skip Links. These links allow you to jump past the navigation and go straight to the main content of the page or to something else equally important, such as your accessibility statement or a site map of the entire website.

The logo often takes you Home

You will often see the logo shown in the top left-hand corner and clicking on it will return you to the Home page. You would expect to see this to be one of the first selectable elements of the web page but unfortunately, this is not always the case. That in itself does not matter if you always have a Home link as part of your main navigation, however, you do not always see this option on websites.

What if you cannot use a mouse?

Websites will sometimes have additional navigation down the left-hand side and this is often when more issues can arise. Although visually you can clearly where this extra navigation and can easily reach it with a mouse, it can often be rather more challenging if you cannot use a mouse and / or cannot see!

It is not just blind people who cannot use a mouse. If you have difficulties with fine motor control, you may always prefer using a keyboard or dictation software. I met someone yesterday (who also has a Degree, 4 Master's Degrees and a Doctorate)  who falls into that category. Iona, one of my amazing team of disabled auditors (and also studying for a degree) uses the same dictation software herself.

If the tab order has not been thought through, you may find that you may need to press the Tab key dozens of times before you reach this extra navigation. I often audit websites where it is not possible to get to these additional pages any other way, making the entire process extremely tiresome.

Overlays do not work with the tab key!

This is also one of the many reasons why I have issues with overlays because they usually cannot be accessed by using the Tab key, which means they are inaccessible for disabled people, of course. This is especially true with overlays that claim to “fix” inaccessible websites cause havoc with the tab order of websites and cause even more accessibility issues!

Getting the Tab order sorted first makes can make a fundamental difference to a website’s accessibility and gives you a solid base to build from.

Would you like to find out more?

If you are interested in a free initial review of your website, why not book yourself in for a consultation? Please follow this link to do so. It will open in the same browser.