How to Make Accessible Tabs

Tab panels are a great way to conserve space and reduce scrolling when there is a lot of content on the page. Tabs can keep a web page free of clutter and add some “interactive” elements to the page (something clients frequently ask for when they want their website to appear more “fancy”). But, if not implemented properly, tabs can be an accessibility nightmare.

Common Accessibility Problems in Tabs

Some common accessibility mistakes in tab panels include:

1. Missing focus indicator for tabs (even if your theme adds this, many popular tab plugins remove it).
2. Not providing a way to navigate between and select tabs using the keyboard only (tabs coded as divs or spans).
3. No screen reader announcement to indicate which tab is currently selected.
4. Not providing a way to identify the content of each tab or the relationship between the tab and its associated content.
5. Tabs missing ARIA to identify them as tabs or not containing them in a tablist.

The issues listed above can make it nearly impossible for keyboard-only or screen reader users to access the information within the tabs if they’re not coded properly.

How to Code Accessible Tabs

Tabs don’t have to be tricky to code, but they require attention to detail.

There are two types of tab elements: tabs that are interacted with via arrow keys and that change the active tab automatically when the left or right arrow is pressed (“Automatic tabs”), and tabs that are triggered manually with the Return/Enter key or Space Bar (“Manual tabs”).

Tabs are made up of three components:

• Tablist: the container for the tabs themselves.
• Tab: the element in a tablist that labels and controls visibility for one of the tab panels. There is usually more than one tab elements in a tablist.
• Tabpanel: the container for the content that gets revealed as tabs are activated.

If you’re coding custom tabs, the ARIA Authoring Practices Guide (APG) for the Tabs Pattern has a detailed explanation of expected keyboard interactions for tabs, and also has two examples with code:

• Tabs With Automatic Activation
• Tabs With Manual Activation

To code accessible tabs, you’ll need to write HTML, CSS, and JavaScript – more than I can include here – so I recommend reviewing these examples. There is also a fair bit of ARIA that needs to be included to ensure screen reader users understand the tab interactions.

If you prefer video tutorials, Kevin Powell has a great video showing how to make accessible tabs.

The Accessibility of Tab WordPress Plugins

Unfortunately, there are not a lot of stand-alone WordPress plugins that get tab accessibility right, including some popular plugins that have 20,000+ active installs. Beware if you’re using these plugins on your website: Tabs, Tabs Responsive,  Tabby Responsive Tabs, or other tab-only plugins.

KadenceWP has an automatic tab block that passes accessibility checks. Joe Dolson also has an Accessible Tab Block plugin on his Github that is probably worth checking out. Of the page builders, Beaver Builder seemed to have decent tabs, though I’ll admit I didn’t test them all.

Do you have a plugin that you use to create accessible tabs in WordPress? Share it in the discussion!