Navigation

How

Two landmarks. nav.sdc-nav labelled “Main” shows on desktop; nav.sdc-nav-mobile labelled “Mobile” is a panel toggled by a button. A skip link precedes both.

When

Always. Both are part of the layout, not a per-page choice.

Where

Every page, from Site.astro. The header is sticky.

The skip link

The first focusable element on every page, offscreen until focused, then a real button at the top left. Without it, reaching the content by keyboard means passing the logo and five nav links on every page.

The sticky header has a cost

Because the header stays fixed, anything scrolled into view can land behind it. This was a live failure: a keyboard user tabbing to a link that sat just under the header got it scrolled to the top of the window, where the header covered it.

The fix is scroll-padding-top on the root equal to the header height. Anything the browser scrolls into view, focus included, now stops below the header.

Two places cancel that padding with a matching negative scroll-margin: the pinned decks, whose stage already pads for the header. If you add a new pinned section, it needs the same cancel or its anchor will land low.

The mobile panel

The toggle carries aria-expanded and aria-controls, and its label swaps between “Open menu” and “Close menu”. Opening moves focus to the first link; closing returns it to the toggle. Escape closes it.

The panel is hidden with display: none, which already removes it from the accessibility tree, so it carries no aria-hidden. A redundant aria-hidden becomes a real violation the moment someone switches the hiding mechanism to opacity.

The logo link

The name lives in the image’s alt text, not in a label on the link. Both produce the same name, but scanners checking image-only links look for the alt, and an empty alt reads as an unlabelled image inside a link.

Do

• Keep the skip link first in the document.
• Label both nav landmarks.
• Return focus to the toggle when the panel closes.

Don’t

• Add aria-hidden to something already display: none.
• Add a pinned section without cancelling the scroll padding.
• Put the site name on the link instead of the image.

Checks before you ship

1. Tab once from the top. The skip link appears.
2. Scroll a link under the header and Tab to it. It moves clear of the header.
3. Open the mobile panel with the keyboard. Focus enters, Escape returns it.