Accessibility

Neobrutal UI is built with accessibility as a core principle. All interactive components are designed to meet WCAG 2.1 AA standards while maintaining the bold Neobrutalist aesthetic.

Foundation

Components that require complex interactions are built on Base UI, which provides:

Complete keyboard navigation
Proper ARIA attributes and roles
Focus management and trapping
Screen reader announcements

Keyboard Navigation

All interactive components support keyboard navigation:

Tab

Move focus between interactive elements

Enter / Space

Activate buttons, toggle checkboxes and switches

Arrow Keys

Navigate within radio groups, sliders, and menus

Escape

Close dialogs, popovers, and tooltips

Focus Management

All components have visible focus indicators that meet contrast requirements. Focus is properly trapped in modal dialogs to prevent users from tabbing out of the dialog content.

.focus-visible:ring-2 .focus-visible:ring-black .focus-visible:ring-offset-2

Color Contrast

The default color palette uses high-contrast combinations. Text is always black on light backgrounds, meeting WCAG AAA contrast ratios. When customizing colors, verify contrast using a tool like WebAIM Contrast Checker.

Semantic HTML

Components use semantic HTML elements whenever possible:

button for interactive buttons
nav for navigation (breadcrumbs, pagination)
dialog for modal windows
label for form control labels
input, textarea for form fields

Component-Specific Notes

Form Controls

Always pair inputs, textareas, checkboxes, radio buttons, and switches with a Label component. The htmlFor attribute links the label to the control.

Dialog

Focus is automatically trapped and returned to the trigger element on close. Dialogs use aria-labelledby and aria-describedby to announce their title and description.

Toast

Standard toasts use aria-live="polite" to not interrupt the user. Error toasts use aria-live="assertive" for immediate announcement.

Accordion

Implements proper ARIA patterns for expandable sections. Triggers are focusable and announce their expanded/collapsed state.

Select

Uses role="combobox" with proper aria-expanded and option selection announcements.