Accessibility

boodoo follows common web standards, and can easily be adapted to meet the WCAG 2.1 AA requirements with the proper markup and configuration.

Summary of accessibility features

• Focus visible: boodoo suppresses the focus ring only for mouse users (:focus:not(:focus-visible)) and keeps it for keyboard navigation.
• Skip link: the docs layout ships with a visually-hidden-focusable "skip to main content" link.
• Reduced motion: all animations and transitions respect prefers-reduced-motion: reduce.
• ARIA roles & states: components set aria-expanded, aria-selected, aria-busy, aria-labelledby, and use role="alert" / role="dialog" where appropriate.
• Keyboard: modals trap focus, dropdowns close with Esc, carousels support arrow keys.
• Color contrast: the default palette meets AA contrast on white, and subtle/emphasis variants are provided.
• Touch: 44px minimum interactive target sizes to satisfy touch accessibility guidelines.

Skip Link Example

Test the focusable skip link by clicking below and pressing Tab:

<a class="visually-hidden-focusable btn btn-primary" href="#main-content">
  <span>Skip to main content</span>
</a>

Reduced motion

boodoo includes a media query that disables animations and transitions for users who prefer reduced motion:

@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;
  }
}

Color contrast

Some combinations of colors that make up boodoo's default palette may not have sufficient contrast on certain backgrounds. You can adjust these via the Sass variables, or use the -subtle background/border helpers and -emphasis text helpers to tune it per component.

Accessibility Verification Matrix

To provide full transparency, Boodoo documents the explicit verification status and methodology for WCAG 2.1 & 2.2 AA accessibility criteria: