A framework-agnostic component library designed for WCAG 2.1 AA compliance. Modern, lightweight, and ready to use.
Customize the Design System variables in real-time. The Contrast Checker will automatically validate your color choices against WCAG AA standards.
Interactive elements with clear focus states and semantic validation.
Web accessibility (a11y) is the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities.
The levels are A (minimum), AA (legal/global standard), and AAA (maximum). This system targets level AA.
This entire card is clickable thanks to CSS, but contains only one semantic link in the title.
Supports keyboard navigation and screen readers naturally.
Additional components following the ARIA Authoring Practices Guide.
Keyboard: ↓/↑ to navigate, Enter to select, Esc to close.
This is content that can be shown or hidden. Similar to Accordion but simpler, ideal for FAQs or single collapsible sections.
Each disclosure is independent. Opening one doesn't close the others.
Tooltips provide contextual information on hover or keyboard focus.
Keyboard: Tab to focus, Esc to hide.
Keyboard: ←/→ or ↓/↑ to adjust, Home/End for min/max, PgUp/PgDown for large steps.
Keyboard: ↓/↑ to navigate, Space/Enter to select, Home/End for first/last.
Keyboard: ↓/↑ to adjust, Home/End for min/max, PgUp/PgDown for large steps.
Keyboard: ←/→ to navigate controls, Home/End for first/last.
| Name | Age | Department | Salary |
|---|---|---|---|
| John Smith | 32 | IT | €45,000 |
| Laura White | 28 | Marketing | €38,000 |
| George Green | 45 | HR | €52,000 |
| Anna Black | 35 | IT | €48,000 |
| Paul Blue | 29 | Sales | €42,000 |
Interaction: Click headers to sort. Supports numeric and alphabetic sorting.
Keyboard: Arrow keys to navigate cells, Home/End for first/last cell in row.
Keyboard: → to expand, ← to collapse, ↓/↑ to navigate, Space/Enter to select.
Interaction: Click buttons to expand/collapse categories.
This is the first article in the feed. The Feed pattern supports accessible infinite scroll with automatic loading.
Scroll down to automatically load more articles. Screen readers will receive notifications.
Each article can receive keyboard focus and is navigable sequentially.
Interaction: Scroll down to automatically load new articles.
This panel can be resized by dragging the center separator.
You can also use the keyboard: focus the separator and use the ←/→ arrow keys to adjust size.
Resizing works with both mouse (drag & drop) and keyboard.
Home: Left panel to minimum (10%)
End: Left panel to maximum (90%)
Keyboard: Tab to focus separator, ←/→ to adjust, Home/End for min/max.