A better Slate menu & how it stays accessible

A navigation pattern for Slate portals — on-brand, keyboard- and screen-reader-friendly, and CSS-only (portals forbid custom JavaScript). Real anchor links plus a native checkbox/<label> disclosure for mobile — no faked ARIA tablist.

The component

Resize the window below 737px to see the bar collapse into a labelled “Menu” toggle. Tab through it: every control has a visible focus ring; the toggle is a real, keyboard-operable checkbox.

Start your application

The nav links are ordinary anchor links. Because each target section is tabindex="-1", the browser moves keyboard focus to it on activation — natively, no JavaScript.

Requirements

Mark the current page with aria-current="page"; the brand carries it with weight + an accent underline, never colour alone.

Application dates

On mobile the bar becomes a labelled “Menu” toggle (a real checkbox), so screen readers announce it honestly and the keyboard operates it.

Help & contact

The accent colour is reserved for interaction (links, focus, the active rail); structure is carried by weight. Everything clears WCAG AA.

Why this is accessible without JS: the links are real <a href> anchors (keyboard- and SR-native), and each target section is tabindex="-1" so the browser moves focus to it on activation; the mobile toggle is a <label> whose visible text (“Menu”) is the accessible name of its bound <input type="checkbox"> (no overriding aria-label — so it satisfies Label-in-Name / voice control), and it is focusable only at mobile widths where it is actually used. We deliberately avoid role="tab"/aria-expanded: those promise JS-driven behaviour (arrow-key navigation, live state) a CSS-only portal cannot deliver, so they would mislead assistive tech.

Use it in Slate

Paste the <nav class="pnav">…</nav> markup into a portal Static-Content widget and the .pnav CSS into the portal’s Custom CSS Rules (or ship it in build.css). On a Default-Branding portal the live --som-* tokens style it automatically.

Platform a11y gap (separate, build.css side-nav): the application side-nav’s mobile <select> is injected by Slate’s mobilify JS with no accessible name — a Technolutions platform limitation that branding CSS cannot repair. The build.css recommendation (a visible label + AA-styled select) plus a Technolutions feedback note live in docs/PORTAL_NAV_DESIGN.md. This portal pattern sidesteps it entirely by not depending on mobilify.