Accessibility

Slate is built with accessibility in mind.

All Slate components aim for WCAG 2.1 AA compliance:

• ✅ Proper ARIA attributes
• ✅ Keyboard navigation
• ✅ Screen reader support
• ✅ Color contrast ratios

Components include appropriate ARIA attributes:

• aria-label for icon-only buttons
• aria-expanded for collapsible components
• aria-describedby for form inputs
• role attributes where needed

All interactive components support keyboard navigation:

• Tab to focus
• Enter/Space to activate
• Escape to close modals (topmost overlay only when nested)
• Arrow keys for navigation

dialog, sheet, drawer, and alert-dialog share:

• Focus move into the panel on open, restore to the trigger on close
• Tab cycle inside the panel
• Escape closes only the topmost open overlay
• html.slate-scroll-lock while any overlay is open (nesting-safe count)
• prefers-reduced-motion short-circuits overlay transitions

• Prefer logical props (start / end) on sheets, drawers, and toaster placement
• Overlay slide directions flip under [dir="rtl"]
• Buttons, accordion, sidebar, app-shell, and overlays respect prefers-reduced-motion / motion-reduce

Components are designed to work with screen readers:

• Semantic HTML
• Proper heading hierarchy
• Descriptive labels
• Status announcements

All color combinations meet WCAG AA standards:

• Text on backgrounds
• Interactive elements
• Focus indicators
• Error states

1. Use semantic HTML - Slate components use proper elements
2. Add labels - Always label form inputs
3. Test with screen readers - Verify accessibility
4. Keyboard only - Test without a mouse

• WCAG Guidelines
• ARIA Authoring Practices
• WebAIM