Semantic mark-up and WAI-ARIA for Tabbed Section?

Question

I'm in the process of marking up a site and I've been really trying to hone my accessibility skills. I'm wondering what the most semantic mark-up is for tabbed content. This is what I have now:

<section>
  <nav>
    <a href="#tab" aria-controls="content">Stuff</a>
    <a href="#tab" aria-controls="content">Stuff</a>
    <a href="#tab" aria-controls="content">Stuff</a>
  </nav>
  <section id="content" aria-live="polite" role="region">
    <article>...</article>
    <article>...</article>
    <article>...</article>
   </section>    
</section>

I have a few specific questions about this.

Am I on the right track? If not can someone recommend some changes?
Will I need to make changes if I were to load in the articles via AJAX?
Do I need the nav tag?
Are WAI-ARIA roles enough here?
Are these the correct WAI-ARIA roles to use?

Questions on “most semantic markup” are primarily opinion-based and tend to spawn discussion and debate rather than solid answers. If you asked for most accessible markup, it would be more constructive, especially if you explained which kinds of disabilities you are primarily thinking about. But you should also explain what you mean by “tabbed section” and “tabbed content” (especially from the technical implementation point of view, i.e. how tabs are supposed to work). — Jukka K. Korpela

Craig Brett Craig Brett · Accepted Answer · 2013-10-06T00:33:19

1.Am I on the right track? If not can someone recommend some changes?

Yes, you've absolutely started in a good way. Some of the tab stuff could be given some tab-related roles if you want to improve it, but it's functional as is.

2.Will I need to make changes if I were to load in the articles via AJAX?

No. It should be fine. The fact that it is a live region should (tested with NVDA only) mean that new content is announced. Is this the behaviour you're after?

3.Do I need the nav tag?

No, but I think it helps make it crystal clear what that bit of the document is for. A note though, that if you do what I've done below and mark it as a tablist, the fact that it's a navigation element doesn't get announced anymore.

4.Are WAI-ARIA roles enough here?

If by ARIA roles you're also including states and properties, yes essentially you should be covered for loading dynamic content (if that's what you're after). There's no case for moving the user's keyboard focus or anything with things as they are. IMO, you'd only really want to do that if there's a lot of navigational stuff between what the user clicked and what content you're giving them.

5.Are these the correct WAI-ARIA roles to use?

You're not far off. If you really want a tab-style experience, then you need the tablist, tab and tabpanel roles. I'll give an example.

I've taken your code and made a contrived but working example to test it. It's not loading anything in AJAX, just showing and hiding stuff. I wanted to be sure before I gave this answer, but I'll put the code here too in case it helps.

<html>
    <head>
        <title>Aria test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('nav a').on('click', function () {
                    hideArticles();
                    deslectAllTabs();
                    $(this).attr('aria-selected', true);
                    var tab = '#' + $(this).attr('aria-controls');
                    $(tab).show();
                });
            });

            function hideArticles() {
                $('article').hide();
            }
            function deslectAllTabs() {
                $('nav a').attr('aria-selected', false);
            }
        </script>
        <style type="text/css">
            article { display: none; }
        </style>
    </head>
    <body>
    <section>
        <nav role="tablist">
            <a href="#tab" aria-controls="content1" id="tab1" role="tab">Stuff1</a>
            <a href="#tab" aria-controls="content2" id="tab2" role="tab">Stuff2</a>
            <a href="#tab" aria-controls="content3" id="tab3" role="tab">Stuff3</a>
        </nav>
        <section id="content" aria-live="polite" role="region">
            <article id="content1" role="tabpanel">The lazy dog jumped over the quick fox</article>
            <article id="content2" role="tabpanel">If you click this tab then your life will be better</article>
            <article id="content3" role="tabpanel">Know your roles</article>
        </section>    
    </section>
    </body>
</html>

I hope this helps.

Semantic mark-up and WAI-ARIA for Tabbed Section?

2 Answers