Accessibility features

TreeNav is built with accessibility in mind, following WCAG 2.1 AA guidelines.

Overview

TreeNav provides:

Full keyboard navigation
Screen reader support with ARIA
Focus management
Reduced motion support
High contrast compatibility

Keyboard navigation

Tree embed

The tree uses a single tab stop with arrow key navigation:

Key	Action
`Tab`	Enter/exit tree
`↑` / `↓`	Move between visible nodes
`→`	Expand node (if collapsed) or move to first child
`←`	Collapse node (if expanded) or move to parent
`Enter`	Activate link (navigate to collection)
`Home`	Jump to first node
`End`	Jump to last visible node

Drilldown

Key	Action
`Tab`	Move between pills
`←` / `→`	Move between pills
`Enter`	Activate link

Breadcrumb

Key	Action
`Tab`	Move between links
`Enter`	Activate link

Screen reader support

Tree structure

The tree uses proper ARIA roles:

role="tree" on the container
role="treeitem" on each node
aria-expanded indicates expand/collapse state
aria-selected indicates current page

Announcements

Screen readers announce:

Node labels
Expand/collapse state
Product counts (if enabled)
Current page indication

Focus management

Focus rescue

When a subtree is collapsed, focus automatically moves to the parent node if focus was inside the collapsed section. This prevents focus from being lost.

Visible focus

All interactive elements have visible focus indicators:

Keyboard users see clear outlines
Focus styles respect your theme's focus color
Works with forced-colors mode (Windows High Contrast)

Reduced motion

TreeNav respects the user's motion preferences:

@media (prefers-reduced-motion: reduce) {
  /* Animations are disabled */
}

Users with motion sensitivity won't see:

Expand/collapse animations
Hover transitions
Sliding effects

High contrast mode

TreeNav works with Windows High Contrast and forced-colors mode:

Uses system colors
Borders remain visible
Focus indicators are clear

Color contrast

Default colors meet WCAG AA contrast ratios:

Text on background: 4.5:1 minimum
Interactive elements: 3:1 minimum

When customizing colors, verify contrast ratios using tools like:

WebAIM Contrast Checker
Chrome DevTools color picker

Best practices

Labels

Use clear, descriptive collection names
Avoid abbreviations that may confuse screen readers
Keep labels concise but meaningful

Structure

Maintain logical hierarchy
Don't skip levels (e.g., don't nest 3 levels deep without intermediate levels)
Keep trees manageable (avoid 100+ nodes)

Testing

To test accessibility:

Keyboard only: Navigate without a mouse
Screen reader: Test with NVDA, VoiceOver, or JAWS
Zoom: Test at 200% zoom
High contrast: Enable Windows High Contrast mode

Mobile accessibility

Touch targets meet minimum size requirements:

Tap targets are at least 44x44 pixels
Adequate spacing between interactive elements
Drawer layouts work with mobile screen readers

Semantic HTML

TreeNav uses semantic elements:

<nav> for navigation landmarks
<ul> / <li> for tree structure
<a> for navigation links
Proper heading hierarchy

Next steps

Match your theme's style for color customization
Display options for layout settings