Accessibility
Every Cognivo component is built with accessibility as a non-negotiable requirement. ARIA attributes, keyboard navigation, focus management, and reduced motion — all built in.
Principles
Sufficient color contrast, text alternatives, visible focus indicators, and no information conveyed by color alone.
Full keyboard access, no keyboard traps (except intentional focus traps in modals), sufficient touch targets.
Consistent patterns, predictable behavior, clear error messages, and meaningful labels.
Valid HTML, proper ARIA usage, Shadow DOM with correct role propagation, works with assistive technology.
Built-in Features
ARIA Roles & Attributes
Every interactive component ships with correct ARIA roles, states, and properties. Buttons have role="button", modals have role="dialog" with aria-modal, tabs implement the tabpanel pattern.
cg-modalcg-tabscg-accordioncg-dropdownai-chat Keyboard Navigation
All components are fully operable via keyboard. Arrow keys for radio groups, tabs, and dropdowns. Enter/Space for buttons and toggles. Escape to close overlays.
cg-radio-groupcg-tabscg-dropdowncg-modalcg-drawer Focus Management
Modal and drawer implement focus traps — Tab and Shift+Tab cycle within the overlay. Focus returns to the trigger element on close.
cg-modalcg-drawerai-command-palette Focus Rings
Dual-layer focus rings (offset + accent color) appear on keyboard focus only (:focus-visible). Consistent across all interactive components.
cg-buttoncg-inputcg-selectcg-checkboxcg-switch Reduced Motion
All animations respect prefers-reduced-motion. When enabled, transitions are instant (0.01ms) and animations are disabled.
All components Touch Targets
Interactive elements maintain a minimum 44x44px touch target area following WCAG 2.5.5. Small visual elements have expanded hit areas.
cg-buttoncg-checkboxcg-switchcg-radio Color Contrast
Semantic color tokens are designed to meet WCAG AA contrast ratios (4.5:1 for text, 3:1 for large text and UI elements) in both light and dark themes.
All components via tokens Screen Reader Support
Components use semantic HTML elements (button, input, dialog) where possible. ARIA labels, live regions, and descriptions provide context for assistive technology.
ai-thinkingai-streaming-textcg-spinnercg-progress-bar Keyboard Patterns
All interactive components follow WAI-ARIA keyboard interaction patterns.
| Pattern | Keys | Behavior |
|---|---|---|
| Button / Link | Enter, Space | Activate the element |
| Checkbox / Switch | Space | Toggle checked state |
| Radio Group | Arrow Up/Down | Move selection between options |
| Tabs | Arrow Left/Right | Switch between tab panels |
| Dropdown / Select | Arrow Up/Down, Enter | Navigate and select options |
| Modal / Drawer | Escape | Close the overlay |
| Modal / Drawer | Tab, Shift+Tab | Cycle focus within trap |
| Accordion | Enter, Space | Toggle section open/closed |
| Slider | Arrow Left/Right | Adjust value by step |
| Command Palette | Arrow Up/Down, Enter | Navigate and execute commands |
Focus Ring System
Cognivo uses a dual-layer focus ring — a white offset ring plus an accent-colored outer ring. This ensures visibility on both light and dark backgrounds.
/* Shared focus ring style (built into all interactive components) */
:host(:focus-visible) {
outline: 2px solid var(--cg-color-action-primary-border-default);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(223, 255, 97, 0.15);
}
/* Focus rings only appear on keyboard navigation, not mouse clicks */
/* Uses :focus-visible, NOT :focus */Reduced Motion
All components include this media query. Animations, transitions, and scroll behavior are instantly disabled when the user has enabled reduced motion in their OS settings.
/* Applied globally across all components */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Dark Mode Accessibility
Both light and dark themes maintain WCAG AA contrast ratios. The semantic token system ensures that switching themes preserves readability — only the underlying palette values change, not the contrast relationships. Dark mode uses lighter shadows with higher opacity to maintain depth perception.
Test Coverage
1,906 automated tests across the component library, 83 end-to-end tests in Playwright (15 interaction, 60 visual regression, 8 axe-core a11y scans).
Every component ships with dedicated tests for ARIA roles, keyboard navigation, and focus management.
Visual regression catches subtle rendering drift across light and dark themes.
CI blocks merges that introduce new axe-core violations or fail the 15-test keyboard interaction suite.
Testing Accessibility
<!-- Use the built-in accessibility report component -->
<ai-accessibility-report
target="#my-app"
auto-scan
></ai-accessibility-report>
<!-- Runs axe-core style checks and reports: -->
<!-- - Missing alt text -->
<!-- - Low contrast ratios -->
<!-- - Missing ARIA labels -->
<!-- - Keyboard trap detection -->
<!-- - Touch target size violations --><ai-accessibility-report>
component provides in-app accessibility auditing.