How to semantically mark up a nav with sections, where section headers aren't clickable

Question

• Imagine a navigation element, which is not the primary navigation on the site, but which navigates you to the several pages of an area on the site. Those pages are grouped into categories.

• Every page also has headings within the content itself, an H1, H2, etc.

• Before the content there is a navigation section structured like this. The two sections shown here are NOT collapsible, nor are they clickable. The widget will show a highlight for whatever page you are currently on.

---

Preparing to Drive

• Checking your mirrors
• Setting Navigation
• Setting Music

Driving

• Ignition
• Gear Selector
• Pedals

---

Important: "Preparing to Drive" and "Driving" are not links. They aren't pages, just categories of pages. There are 6 pages and one page is the "current page" at any time. When you click one, you'll go to that page and see the same nav.

My instinct is to do something like:

<nav>
  <h3>Preparing to Drive</h3>
  <ul> (list of links) </ul>

  <h3>Driving</h3>
  <ul> (list of links) </ul>
</nav>

But!

• I've picked h3 randomly above, because it seems stupid to add a potentially large number of "h1" tags to the page since the WCAG (etc) rules are also finicky about wanting exactly ONE <h1>... but those same rules also do not want anything but a 'proper outline' containing one hierarchy of H tags on the page,* right? Since this type of navigation is not within the flow of the actual document itself (I'm even before the H1) I don't really want to use any "numbered" heading here at all. I'd be wrong no matter what number I try to use.

• I considered using role=treeview here, but I can't find any guidance saying whether you can have non-clickable headings as some of your tree nodes, and every example I have seen is a very pure tree like a file explorer, where each 'containing' item is both expandable and selectable -- like a pure file browser.

What's the best way to mark this up to be usable and accessible to all assistive technology?

Answer 1

This is what <section> tags are for:

<nav aria-labelledby="nav-title">
  <h2 id="nav-title">More on driving</h2>

  <section aria-labelledby="prep-title">
    <h3 id="prep-title">Preparing to Drive</h3>
    <ul> (list of links) </ul>
  </section>

  <section aria-labelledby="driving-title">
    <h3 id="driving-title">Driving</h3>
    <ul> (list of links) </ul>
  </section>
</nav>

You mentioned that this navigation was not the primary one, so there are several and it will be helpful to name them. So it will need a title, and the logical next level would be <h2>.

For sections,

Authors MUST give each element with role region a brief label that describes the purpose of the content in the region

Answer 2

The reflex was not bad, I’d recommend this one:

<nav aria-labelledby="nav-title">
  <h2 id="nav-title">More on driving</h2>

  <h3 id="prep-title">Preparing to Drive</h3>
  <ul aria-labelledby="prep-title">
      (list of links)</ul>

  <h3 id="driving-title">Driving</h3>
  <ul aria-labelledby="driving-title">
    (list of links) </ul>
</nav>

It’s minimal, but still provides important information:

• The navigation is named, because it’s not the only one on the page
• The lists are named as well, to make sure the title is announced once the user focuses on the first element via Tab

<h2> is the recommended level here.

aria-current="page"> must be used additionally to the visual highlight of the current page.

---

The region role, which is used by <section>, should

contain content that is […] sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.

This does not seem to apply for subsections of a navigation. I don’t see any need to further group the elements.