Accessibility

Last updated on 2026-09-02

The kit is built with WCAG AA accessibility as a baseline. Every component, from the Kanban pipeline board to data tables and form dialogs, follows accessible patterns.

Accessibility Features

All interactive elements are keyboard-accessible
Tab order follows logical reading order
Focus indicators are visible on all focusable elements (focus-visible:ring-2)
Dialogs and sheets trap focus and return it on close
The Kanban board supports keyboard reordering as a fallback to drag-and-drop
Data tables have focusable rows with keyboard-accessible action menus
Filter dropdowns, tag pickers, and date pickers are fully keyboard-operable

Semantic HTML throughout: <nav>, <main>, <footer>, <article>
One <h1> per page with no heading level skips
All images have descriptive alt text
Icon-only buttons have aria-label attributes
Form fields have associated <label> elements
Validation errors use aria-invalid and aria-describedby
Kanban columns announce their stage name, deal count, and total value
Pipeline stage changes are announced via live regions
Data tables use proper <thead>, <tbody>, and <th> elements

Color and Contrast

All text meets WCAG AA contrast ratio (4.5:1 for normal text, 3:1 for large text)
Status indicators use color + text + icon (never color alone)
Pipeline stage badges include text labels alongside color indicators
Priority flags use both color and icon weight (filled vs outline)
Both light and dark themes maintain contrast compliance
Focus rings are visible against all backgrounds

Reduced Motion

prefers-reduced-motion is respected throughout:

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up,
  .animate-float,
  .animate-scale-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

Kanban drag animations, chart transitions, and hover effects are disabled for users who prefer reduced motion
Toast notifications appear without slide-in animation

Touch Targets

All interactive elements meet the 44x44px minimum touch target size
Small visual elements (tag pills, priority flags, action dots) use padding to increase the touch area
Calendar day cells and filter buttons use min-h-11 px-3 for comfortable touch

Every page includes a skip-to-content link that becomes visible on focus, allowing keyboard users to bypass the sidebar navigation.

Form Accessibility

Forms are a core part of the CRM experience (contact forms, deal forms, task dialogs):

Required fields are marked with a red asterisk and aria-required="true"
Validation errors appear inline below the field
Error fields have aria-invalid="true" and link to error text via aria-describedby
Submit buttons show loading state with aria-busy="true" during async operations
Multi-step forms (CSV import wizard) announce step transitions

Kanban Board Accessibility

The drag-and-drop Kanban board is designed for inclusivity:

Each deal card is focusable and has a descriptive aria-label (e.g., "Acme Corp deal, $45,000, Proposal stage")
Column headers use role="heading" with stage name and summary
Drag-and-drop is supplemented by keyboard shortcuts for reordering
Stage changes via drag are announced to screen readers via aria-live regions
The stage select dropdown on the deal detail page provides an alternative to drag-and-drop

Data Table Accessibility

CRM data tables (contacts, companies, deals, tasks) follow table best practices:

Sortable table headers have aria-sort attributes
Proper <thead>, <tbody>, and <th scope="col"> elements
Action menus have descriptive labels (e.g., "Actions for John Smith")
Status badges use icon + text, not color alone
Pagination controls are keyboard-accessible with descriptive labels

Chart Accessibility

Report charts include accessibility considerations:

Charts have descriptive aria-label attributes summarizing the data
Tooltips are keyboard-accessible via focus on data points
Data tables are provided alongside charts for screen reader users
Chart colors maintain sufficient contrast between series

Design Tokens

Deployment