Dashboard

The dashboard is the main screen of the A11y Starter Kit, demonstrating accessible navigation patterns, stat card layouts, and interactive widgets.

Page URL

/dashboard

Key Features

• Sidebar navigation with keyboard support and active state indicators
• Skip link that jumps past the sidebar to main content
• Stat cards with proper semantic structure
• Activity feed with time-relative formatting
• Breadcrumb navigation with aria-label="Breadcrumb"

Accessibility Patterns

Skip Link

The root layout includes a skip link that appears on focus:

<a href="#main-content" className="skip-link">
    Skip to main content
</a>

This lets keyboard users bypass the sidebar navigation and jump directly to the page content.

Sidebar Navigation

The sidebar uses semantic <nav> with aria-label="Main navigation":

• Each link has aria-current="page" when active
• Focus-visible outlines are styled with high contrast
• The sidebar is collapsible with proper aria-expanded state

Stat Cards

Stat cards use semantic HTML with descriptive content:

• Each card is a <div> with a clear heading and value
• Trend indicators include screen-reader text (e.g., "increased by 12%")
• Icons are marked aria-hidden="true" since the text provides the meaning

Landmarks

The dashboard uses proper ARIA landmarks:

• <nav aria-label="Main navigation"> -- sidebar
• <nav aria-label="Breadcrumb"> -- breadcrumbs
• <main id="main-content"> -- primary content area
• <header> -- page header with search

Customization

To adapt the dashboard for your app:

1. Replace seed data in data/seed.ts with your metrics
2. Modify stat cards in components/dashboard/ to match your domain
3. Update sidebar links in components/layout/app-sidebar.tsx
4. Connect activity feed to your real event stream