0

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?

Stromgren
  • 1,064
  • 1
  • 16
  • 35

1 Answers1

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.

unor
  • 92,415
  • 26
  • 211
  • 360
  • Thanks, thats a great answer! I plan to add an H1 to the navigation. So i guess the H2's would outline the different sections of the navigation without using
    elements?
     – Stromgren Oct 18 '14 at 11:03
  • @Stromgren: Yes, you can omit the `section` elements if you add a `h1`; but note that HTML5 *encourages* (not: *requires*) to [provide them explicitly "instead of relying on the implicit sections"](http://stackoverflow.com/a/24987792/1591669). – unor Oct 18 '14 at 13:56