H97Sufficient technique WCAG 2.4.1 WCAG 1.3.1 Level A Partly scanner-detectable

Wrap navigation link groups in nav elements

The nav element marks a group of links as navigation, and assistive technology exposes it as a landmark people can jump to or past. W3C lists H97 as sufficient for 1.3.1 Info and Relationships and, separately, as advisory for 2.4.1 Bypass Blocks, and that difference is worth holding onto. Wrapping your menu in nav makes the structure real. It does not, by itself, satisfy the rule about skipping repeated blocks. Where a page carries more than one nav, give each an accessible name with aria-labelledby or aria-label so they can be told apart. And not every group of links wants a nav. W3C says so directly. Links that do not represent a discrete section of the page belong in a list or in other structure, and a nav wrapped around something that is not navigation is worse than no nav at all.

How we find it in an audit

Scanners report pages with no landmarks and multiple navs with no distinguishing names. We walk the landmark list on each template and check it against what is actually on the page. Every real navigation block present, each one named in words that mean something, and nothing wrapped in nav that is not navigation.

How affected users experience it

Landmark navigation works the way heading navigation does. One keystroke cycles main, navigation, search, and a person lands where they meant to. With real nav elements, skipping a 40-link header menu is one press. When the menu is anonymous divs, the landmark list comes back empty and the only route to the content runs through all 40 links, on every page, every visit.

Passes vs. fails

Passes: one jump past the header. Fails: tab through everything, every page.

Passes

<nav aria-label="Main">
  <a href="/">Home</a>
  <a href="/pricing">Pricing</a>
</nav>
<nav aria-label="Breadcrumb">
  <a href="/">Home</a>
</nav>

Fails

<div class="main-menu">
  <a href="/">Home</a>
  <a href="/pricing">Pricing</a>
</div>

How this gets tested

The W3C publishes test rules that define what a checker looks for here.

Bypass Blocks of Repeated ContentA tool finds candidates, you decide
Document has heading for non-repeated contentNothing implements this yet
Document has a landmark with non-repeated contentA tool can check this
Block of repeated content is collapsibleNothing implements this yet
Document has an instrument to move focus to non-repeated contentNothing implements this yet
ARIA attribute is defined in WAI-ARIAA tool can check this
ARIA state or property has valid valueA tool can check this
Element with role attribute has required states and propertiesA tool can check this
Form field has non-empty accessible nameA tool can check this
Headers attribute specified on a cell refers to cells in the same table elementA tool can check this
Role attribute has valid valueA tool can check this
ARIA global properties not used where prohibitedA tool can check this
ARIA required context roleA tool can check this
ARIA required owned elementsA tool can check this
ARIA state or property is permittedA tool can check this
Table header cell has assigned cellsA tool can check this

The other techniques filed under this rule

10 guides on this site are filed under 2.4.1 Bypass Blocks. W3C lists this one as advisory for that rule rather than sufficient, which means it helps real readers without being accepted as evidence you conformed.

This guide is our interpretation of W3C technique H97: Grouping related links using the nav element. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.