Accessible Tabs – Part 1: The Problem

Tabs are a well recognised feature of many of today’s websites. Websites such as the BBC, Yahoo and the National Autistic Society all use tabs to utilise the space on their pages by showing more content in a smaller area.

The use of tabs on the web is still a relatively new feature which has only really become popular in the last few years. This surge in popularity is mainly due to the introduction of JavaScript libraries such as jQuery which make it extremely easy to add tabs to a website.

The idea

The idea of using tabs to organise content has been around for a number of years. Originally tabs were used to label folders to help separate documents in filing cabinets. In a filing cabinet system folders usually have tabs, which are labelled based on the information inside the folder. Labelling each folder makes it easy to tell the difference between the contents in each folder.

Traditionally the tabs can be located either at the top of the folders or at the side. The contents of the folder can then be displayed by selecting the relevant tab.

Evolution

This idea of using folders and tabs to group items of related information was later used in software applications such as Microsoft Word, and then more recently on the web. However, this evolution has not been as smooth as it might appear. The transition from applications to the web has brought about a number of problems in how tabs function. In particular the simplicity of how tabs function and the ease in which people can use them has been lost to some degree. A number of problems have been introduced for people using keyboards and those using screen reading software who do not find tabs on the web particularly intuitive. Often, keyboard commands for tabs differ between applications and the web, making the process of interacting with them more difficult.

Tabs in applications vs web

Applications

In an application, the interaction with tabs via a keyboard is different to those on the web. Taking Microsoft Word 2007 as an example, tabs have been used to display the editorial features of Word in a limited amount of space.

When using a mouse, each tab title can be selected which brings the chosen tab into view whilst hiding all the other tabs. This behaviour is the same on the web, selecting the tab title displays the content in the tab.

If you use a keyboard with Word, hitting the F6 key allows you to interact with the tabs and positions the keyboard focus on the currently selected tab title. You then have two options from this point. You can either:

• Use the ‘left’ and ‘right’ arrow keys to move between each tab title (noting that as you do this the content of each tab is displayed as well) or;
• Use the ‘tab’ key to move into the currently open tab.

If you’ve never used Word with a keyboard before, have a go right now.

Web

On the web these types of controls are not provided for tabs. For the majority of tabs, it is not possible to switch between tabs using the arrow keys. For people using screen readers, pressing the arrow keys when focused on a tab title often results in the individual letters of the tab title being read out.

Alternatively using the ‘tab’ key often takes the keyboard focus through each tab title without displaying the content of the tab at the same time. Once you have moved through the tab menu, you often end up in the content relating to the currently open tab, as shown in the diagram below.

The wrong tab order

To display a particular tab’s content you must hit ‘enter’ on the desired tab title to view the content. Ideally the keyboard focus should move to the newly displayed content however this is very rarely the case. For people using screen readers who may not be able to see the screen it is often difficult to understand if anything has happened on the page without further investigation.

Next time: an accessible solution

Ideally tabs on the web should replicate the functionality used in applications, so they are more intuitive for everyone. Coming up in ‘Accessible Tabs – Part 2: The Solution‘ we will look at some existing plugins for creating tabs to see if they work in this way.