PedanticDesign System · aCo

Navigation

Three patterns cover every aCo page: a skip link, primary navigation in the header, and a labelled side navigation for sections. Each one announces where you are.

Skip link

The first focusable element on every page. It is hidden until it receives keyboard focus, then it appears at the top and moves focus to <main id="main">. Press Tab on this page to see it.

Primary navigation

Pill links inside the Header. The current page is filled and carries aria-current="page" — current state is never color alone, because the attribute is what assistive technology reports. Below 44rem the list collapses behind a Menu button with aria-expanded and aria-controls; try this page at phone width.

Section navigation

Documentation and other deep sections use a side navigation card with grouped, labelled lists — the pattern in the left rail of this page. Groups have real headings, links are full-row targets, and the current page is highlighted and marked with aria-current="page".

<!-- Skip link: first element in <body>, on every page -->
<a class="skip-link" href="#main">Skip to main content</a>

<!-- Primary navigation (lives inside the Header component) -->
<nav class="pds-nav" aria-label="Primary">
  <ul class="pds-nav__list">
    <li><a class="pds-nav__link" href="/" aria-current="page">Overview</a></li>
    <li><a class="pds-nav__link" href="/foundations.html">Foundations</a></li>
    <li><a class="pds-nav__link" href="/components/">Components</a></li>
  </ul>
</nav>

<!-- Section (side) navigation -->
<nav class="doc-sidenav" aria-label="Documentation">
  <h2>Components</h2>
  <ul>
    <li><a href="/components/buttons.html" aria-current="page">Buttons</a></li>
    <li><a href="/components/forms.html">Forms</a></li>
  </ul>
</nav>

Rules

Do

Label every <nav> with aria-label naming its job (“Primary”, “Breadcrumb”, “Footer”, “Documentation”).

Keep link text identical to the destination page’s heading.

Don’t

Don’t hide navigation behind hover-only menus, and don’t mark the current page with color alone.

Don’t duplicate the same link list in two landmarks with the same label.

Accessibility notes