WebAIM - Web Accessibility In Mind

E-mail List Archives

how to make accessible tabs

for

From: Jennifer Sutton
Date: Dec 17, 2014 12:59PM

Hello:

I've changed the subject line.

There are many tutorials out and around about how to make accessible
tabs. What you'd choose all depends, I believe, on how you want them
to work with your content and what kind of style you want.

Below my name, I'll paste some examples/articles.

Jennifer

Two blog posts from Nomensa:
http://www.nomensa.com/blog/2011/accessible-tabs-part-1-the-problem/
and

http://www.nomensa.com/blog/2011/accessible-tabs-part-2-the-solution/

YouTube video on Accessible in-page tabs:
https://www.youtube.com/watch?v=OOAsU9SUooA


You could also look around at things like implementing accessible
expand and collapse functionality. The idea I'm trying to convey here
is that you could, as an example, have expand and collapse, using a
button, or you could use ARIA tabs,, or accordions might work. It all
depends on what you want to achieve.

And there are probably other design patterns that aren't coming to
mind for me at the moment.

At 01:52 PM 12/15/2014, Joey G. wrote:
>...And/or I also like to be able to activate a link (or perhaps a tab), and
>then have the answer exposed right below.
>
>I want to learn how to do this. Can you point me to a tutorial on how to
>implement this technique?
>
>Joey