Accessibility of Quicktabs

JuliusCharles's picture

Hi all.

What is the best way to ensure that pages using quick tabs are accessible?

This is an example of a page using quick tabs:

As seen on the page, when you click on one of the links on the quick tab, "symptoms" for example, a new section of information about symptoms would appear. This event will hide the previous section.

I realize that it may be difficult for screen reader users to perceive at once the change that will take place when they click one of the links on the quick tab.
I'd like to know your thoughts on how we can make this more perceivable and accessible.

I'm thinking of two ways:
1. Provide textual information about the quick tab and how it works
  2. Create a way where, when the user presses enter on one of the links on the quick tab, the focus will be sent automatically at the beginning of the corresponding section.

Any other suggestions?



mgifford's picture

Hi Julius,

First step is usually to look in the module's issue queue and see if someone has reported it. If not, it should be added there. In this case, looks like there is a similar issue, so I've just added a link back to this article:

With WAI-ARIA you should be able to convey information from QuickTabs to the screen reader. It's going to take some time to develop a solution and provide it as a patch however.

On the plus side, it would probably be useful for SEO too.

Thanks, Mike. I'd like to see

JuliusCharles's picture

Thanks, Mike.

I'd like to see how WAI-ARIA would be developed so that it would be able to address the issue of quicktabs. Haven't been doing a lot of reading about WAI ARIA so I think I'll be reading a lot soon.


Reporting back

mgifford's picture

Would be worth while to report your findings back to the issue queue so it can be rolled into a future version of the module. Otherwise, you'll just need to remember to re-roll the patch when you want to upgrade.

These Quick Tabs may be accessible

nenamoss's picture


I used the FireFox Web Developer toolbar from and disabled stylesheets while viewing your page. The text from the quick tabs flowed down the page in an accessible manner.

To see how it really performs, try testing the site with a screen reader such as NVDA -

Quicktabs seem accessible

mnorth's picture

Running a quick check on a local page with quicktabs using NVDA found it read both the tab titles & the content of each tab. Our tabs contain a mixture of tables, lists(ordered & unordered), paragraphs, images etc....Everything that was correctly marked up was read by NVDA...It was only my second time using NVDA . A few weeks ago took a course in web accessibility and they brought in a blind user to show the differences they experience between well marked up accessible pages and non accessible pages. It was quite eye opening, not only in the user experience angle but the speed at which someone using JAWS or NVDA can scan a page...A site that was used for a good accessible example was The blind user was able to find and book a flight faster than any of the sighted people in the room....


Group events

Add to calendar

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week