Tabbed navigation brings a real world element to the web, and when done right works very well in an interface. They help a user answer many essential questions without thinking: Where am I? Where else can I go? How much other stuff is there?

Done right, tabs are great. But there are a lot of ways to screw up tabbed navigation.

Bowman Systems Software Tabs

While doing an accessibility audit on Bowman Systems CallPoint software, I noticed that the screen reader I was using had a hard time reading the tabs on the screens. I also had a hard time understanding the tabs.

 

Example 1

 

Example 2

Problem

• To me, this looks like there are 3 levels of tabs, but I am not sure.

Solutions

• Only have 1 row of tabs: Stacking tabs on top of each other, complicates the UI and makes it harder for the user to navigate. This guideline specifically refers to having two or more sets of tabs and does not include double tab navigation. The latter is in fact considered a good convention to introduce hierarchy within tabs.
• The active tab should appear connected to the content area: So as to reinforce the real-life tab metaphor, you must make the active tab appear as being connected with the page containing its content. This is what users would expect with a filing cabinet.
• The page that is delivered by selection of the tab should be visually connected to the tab via design cues: color, brackets, borders etc.

 

Example 3

Accessibility

• Allow the user to navigate across the tabs in a logical order with the Tab key.
• A focused tab can be selected with the Enter key.
• Indicate the active tab (pane) by one of these alternative means (in addition to visual indication):
• Include a TITLE attribute with the word "active" into the link that was just activated.
• Include an invisible graphic with an ALT attribute and a word "active" into the link.
• Attach an ALT attribute with the word "active" to Yahoo's graphic that indicates active link.