Navigation Components Accessibility

[!CAUTION] BASED ON STANDARD RADIX/SHADCN PATTERNS — VERIFY AGAINST YOUR IMPLEMENTATION These accessibility patterns are derived from Radix UI primitive documentation and WAI-ARIA best practices. Your actual component implementations may differ. Test with a screen reader before relying on this guidance.

Applies To

• Tabs — tabbed interface (Radix Tabs primitive)
• Accordion — collapsible content sections (Radix Accordion primitive)
• Navigation Menu — top-level site navigation (Radix NavigationMenu primitive)
• Breadcrumb — hierarchical path indicator
• Sidebar — collapsible sidebar navigation
• Dropdown Menu — action menu (Radix DropdownMenu primitive)

Tabs

Built on Radix Tabs primitive.

ARIA Roles and Attributes

Radix Tabs automatically applies the correct ARIA roles:

Keyboard Interactions

Activation Mode

Radix Tabs supports two modes:

Recommendation: Use automatic activation for most cases — it's faster and matches user expectations. Use manual activation only if tab content is expensive to load.

Implementation Pattern

<Tabs defaultValue="account">
  <TabsList aria-label="Account settings">
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    {/* Account content */}
  </TabsContent>
  <TabsContent value="password">
    {/* Password content */}
  </TabsContent>
  <TabsContent value="notifications">
    {/* Notifications content */}
  </TabsContent>
</Tabs>

Key points:

• Add aria-label to TabsList to describe the tab group (e.g., "Account settings")
• Radix handles roving tabindex: only the active tab has tabindex="0", others have tabindex="-1"
• Tab panels are automatically hidden when not active (display: none or equivalent)

Screen Reader Announcement

Common Mistakes

Accordion

Built on Radix Accordion primitive.

ARIA Roles and Attributes

Radix wraps each trigger in a heading element. The heading level is configurable — set it to match your page hierarchy:

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    {/* Radix renders: <h3><button aria-expanded="false" aria-controls="...">...</button></h3> */}
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Keyboard Interactions

Accordion Types

Screen Reader Announcement

Common Mistakes

Navigation Menu

Built on Radix NavigationMenu primitive. Designed for site-level navigation with optional dropdown submenus.

ARIA Roles and Attributes

Keyboard Interactions

Implementation Pattern

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/products/widgets">Widgets</NavigationMenuLink>
        <NavigationMenuLink href="/products/tools">Tools</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/about" aria-current={isCurrentPage ? "page" : undefined}>
        About
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Key points:

• Use aria-current="page" on the link that matches the current page
• The <nav> element should have an aria-label if there are multiple navigation landmarks: <NavigationMenu aria-label="Main navigation">
• Submenu triggers need to convey that they open a submenu (Radix adds aria-haspopup and aria-expanded)

Common Mistakes

Breadcrumb

Not a Radix primitive — built with semantic HTML.

ARIA Roles and Attributes

Implementation Pattern

<nav aria-label="Breadcrumb">
  <ol className="flex items-center gap-2">
    <li>
      <a href="/">Home</a>
    </li>
    <li aria-hidden="true">/</li>
    <li>
      <a href="/settings">Settings</a>
    </li>
    <li aria-hidden="true">/</li>
    <li>
      <span aria-current="page">Profile</span>
    </li>
  </ol>
</nav>

Key points:

• Use <nav> with aria-label="Breadcrumb" — this creates a navigation landmark
• Use <ol> (ordered list), not <ul> — the order is semantically meaningful
• The current page (last item) gets aria-current="page" and should NOT be a link (it's the page you're already on)
• Separators (/, >, →) must be aria-hidden="true" — screen readers should announce "Home, link, Settings, link, Profile, current page" not "Home, slash, Settings, slash, Profile"

Screen Reader Announcement

"Breadcrumb, navigation" → "list, 3 items" → "Home, link" → "Settings, link" → "Profile, current page"

Common Mistakes

Sidebar

Typically a custom component — not a single Radix primitive.

ARIA Roles and Attributes

Keyboard Interactions

Implementation Pattern

<>
  <Button
    aria-expanded={sidebarOpen}
    aria-controls="main-sidebar"
    aria-label={sidebarOpen ? "Close sidebar" : "Open sidebar"}
    onClick={toggleSidebar}
  >
    <PanelLeft className="size-4" aria-hidden="true" />
  </Button>

  <aside
    id="main-sidebar"
    aria-label="Sidebar navigation"
    className={cn(sidebarOpen ? "w-64" : "w-0 overflow-hidden")}
  >
    <nav>
      <ul>
        <li><a href="/dashboard" aria-current={isActive ? "page" : undefined}>Dashboard</a></li>
        <li><a href="/settings">Settings</a></li>
      </ul>
    </nav>
  </aside>
</>

Key points:

• Use <aside> for supplementary navigation; use <nav> if the sidebar is the primary navigation
• The toggle button must have aria-expanded and a clear aria-label
• When collapsed, sidebar content should be hidden from screen readers (not just visually hidden) — use display: none, visibility: hidden, or aria-hidden="true" + tabindex="-1" on all focusable elements
• Use aria-current="page" on the active link within the sidebar
• If the sidebar overlays content on mobile, it should behave like a dialog (focus trap, Escape to close)

Common Mistakes

Dropdown Menu

Built on Radix DropdownMenu primitive.

ARIA Roles and Attributes

Keyboard Interactions

Typeahead Behavior

Radix DropdownMenu supports typeahead search:

• Typing "d" focuses the first item starting with "d"
• Quickly typing "de" focuses the first item starting with "de"
• After a brief pause, the typeahead buffer resets

This is handled automatically by Radix.

Implementation Pattern

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" size="icon" aria-label="User menu">
      <MoreVertical className="size-4" aria-hidden="true" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <User className="mr-2 size-4" aria-hidden="true" />
      Profile
    </DropdownMenuItem>
    <DropdownMenuItem>
      <Settings className="mr-2 size-4" aria-hidden="true" />
      Settings
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <LogOut className="mr-2 size-4" aria-hidden="true" />
      Log out
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Key points:

• The trigger button must have a label — if icon-only, use aria-label
• Icons next to menu items should be aria-hidden="true" (the text label provides the accessible name)
• Disabled items: use disabled prop on DropdownMenuItem — Radix makes them non-interactive but still visible/focusable for discoverability
• When the menu closes, focus returns to the trigger automatically

Screen Reader Announcement

Common Mistakes

Cross-Component Focus Management

Focus Return Pattern

All components that open content (tabs panels, accordion sections, menus, submenus) must manage focus predictably:

Reduced Motion

All navigation components that animate (accordion expand, menu open, sidebar slide) should respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  [data-state="open"],
  [data-state="closed"] {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

Testing Checklist

Screen Reader Testing

• Tabs: role="tablist", role="tab", role="tabpanel" announced correctly
• Tabs: "selected" state announced on active tab; "X of Y" position announced
• Accordion: aria-expanded state announced on triggers
• Accordion: content role="region" with label announced when navigating inside
• Navigation Menu: <nav> landmark announced with label
• Navigation Menu: aria-current="page" on active link announced as "current page"
• Breadcrumb: navigation landmark announced; separators NOT announced
• Breadcrumb: last item announced as "current page"
• Sidebar: expanded/collapsed state announced; active link identified
• Dropdown Menu: role="menu" and role="menuitem" announced; typeahead works

Keyboard Testing

• Tabs: Tab enters tablist, arrows move between tabs, Tab moves to panel
• Accordion: Enter/Space toggles, arrow keys move between triggers
• Navigation Menu: Tab moves between top items, arrows open/navigate submenus, Escape closes
• Breadcrumb: Tab navigates between links
• Sidebar: Toggle button operable, links navigable, Escape closes (mobile)
• Dropdown Menu: Enter/Space/ArrowDown opens, arrows navigate, Escape closes, typeahead works

Visual Testing

• Focus ring visible on all interactive elements in every component
• Active/selected states visible beyond color alone
• Expanded/collapsed states have visible indicators
• Animations respect prefers-reduced-motion

References

• WAI-ARIA Tabs Pattern
• WAI-ARIA Accordion Pattern
• WAI-ARIA Menu Pattern
• WAI-ARIA Breadcrumb Pattern
• Radix Tabs Primitive
• Radix Accordion Primitive
• Radix NavigationMenu Primitive
• Radix DropdownMenu Primitive

Last updated: February 9, 2026