Users must be able to navigate your content efficiently. For keyboard and screen reader users, this means providing shortcuts to skip repetitive content and clear indications of where they are.

Regulatory Context

Bypass Blocks (WCAG 2.4.1): A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

Focus Visible (WCAG 2.4.7): Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Consistent Navigation (WCAG 3.2.3): Navigational mechanisms that are repeated on multiple Web pages occur in the same relative order.

1. Skip to Content

Every page must have a "Skip to main content" link as the very first focusable element. This allows keyboard users to jump straight to the content without tabbing through the entire navigation menu on every page load.

/* Tailwind class for visually hidden but focusable skip link */ <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-primary-600 focus:text-white focus:p-4 focus:z-50" > Skip to main content </a>

2. Consistent Navigation

Keep your primary navigation, search, and footer in the same place across the site. Using a consistent layout component handles this automatically.

1. Skip Link (Skip to Content)

A hidden link that becomes visible on focus. Try clicking here and then pressing Tab (or Shift+Tab if you clicked below).

Skip to Main Content (Demo)

Main Content (Target)

import { SkipLink } from '@holmdigital/components'; // Place at the top of your app (e.g., in App.tsx or Layout) <body> <SkipLink targetId="main-content" /> <nav>...</nav> <main id="main-content"> ... </main> </body>

2. Breadcrumbs

Helps users understand their location (WCAG 2.4.8). Separators and aria-current are handled automatically.

import { Breadcrumbs, BreadcrumbItem } from '@holmdigital/components'; <Breadcrumbs> <BreadcrumbItem href="/">Home</BreadcrumbItem> <BreadcrumbItem href="/docs">Docs</BreadcrumbItem> <BreadcrumbItem isCurrent>Page</BreadcrumbItem> </Breadcrumbs>

3. Navigation Menu

An accessible menu handling dropdowns with correct ARIA attributes and keyboard support.

import { NavigationMenu } from '@holmdigital/components'; const items = [ { label: 'Home', href: '/' }, { label: 'Services', children: [ { label: 'Web', href: '/web' }, { label: 'App', href: '/app' } ] } ]; <NavigationMenu items={items} />

3. Visble Focus

Never remove the default focus outline (`outline: none`) unless you replace it with something better.

Best Practices

Use a high-contrast outline color (often blue or black/white double line).
Ensure the outline has at least 3:1 contrast against the background.
Consider using `focus-visible` to only show the ring for keyboard users, if preferred design-wise.