Correct HTML5/ARIA markup for collapsable submenus

Question

I'm trying to figure out how to correctly markup up a navigation with collapsable sections using HTML5 and ARIA.

This is what I've got so far:

<nav>
    <h2 id="heading-overview" aria-controls="section-overview">Overview</h2>
    <ul id="section-overview" aria-labeledby="heading-overview" aria-expanded="false">
        <li><a aria-selected="true">Layout</a></li>
        <li><a>Color Schema</a></li>
    </ul>
    <h2 id="heading-typography" aria-controls="section-typography">Typography</h2>
    <ul id="section-typography" aria-labeledby="heading-typography" aria-expanded="false">
        <li><a>Sizes</a></li>
        <li><a>Colors</a></li>
        <li><a>Types</a></li>
    </ul>
</nav>

For me, this seems like a big amount of attributes. Could it be that I am attaching attributes that is otherwise implicit in the markup? Or could I label it in some other way?

Answer 1

HTML5

If you don’t want to provide a h1 for the whole navigation, you might want to use explicit section elements so that the submenu headings are grouped under one item in the document outline.

Currently your outline is

1. untitled {body}
  1.1 Overview {nav}
  1.2 Typography {nav}

With explicit section elements you’d get:

1. untitled {body}
  1.1 untitled {nav}
    1.1.1 Overview {section}
    1.1.2 Typography {section}

i.e.,

<nav>
  <section>
    <h2>Overview</h2>
  </section>
  <section>
    <h2>Typography</h2>
  </section>
</nav>

WAI-ARIA

The attribute is called aria-labelledby, not aria-labeledby.

You could move the aria-labelledby attributes from ul to the section, if you like.

But I guess you don’t really need aria-labelledby in the first place as you are using heading elements which, by default HTML semantics, "label" the content of their section. However, HTML5 does not denote this by implicit WAI-ARIA semantics, so maybe you’ll want to keep this relationship on the WAI-ARIA level explicitly, too.