orange-opensource/orange-boosted-bootstrap/accessibility

Accessibility (WCAG 2.2)

Compliance target

WCAG 2.2 Level AAA primary, with Level AA as documented fallback when brand constraints make AAA infeasible. Every component meets at least AA.

ARIA patterns (quick reference)

Focus management

• Use @include focus-visible() mixin — never outline: none without alternative
• Focus indicators: 3:1 contrast minimum, 2px thick (AAA: 3-4px)
• Modal/offcanvas: trap focus via focustrap.js, Escape closes, focus returns to trigger
• Focused elements must not be obscured by sticky headers or overlays

Color contrast

When AA fallback needed: use larger/bolder text, redundant visual cues (never color alone), document with // OUDS mod: AA fallback — [reason].

Touch targets (WCAG 2.5.8)

Minimum 44×44px on all interactive elements. Use @include target-size() mixin.

Reduced motion (WCAG 2.3.3)

All animation respects prefers-reduced-motion: reduce. The @include transition() mixin handles this — which is why direct transition: is forbidden.

Semantic HTML

• <button> for actions, <a> for navigation — never <div>/<span> as interactive
• Heading hierarchy: <h1> → <h2> → <h3> (never skip)
• role="alert" for auto-announced; role="status" for polite
• .visually-hidden for SR content — never display: none

Color modes

Use data-bs-theme attribute, never prefers-color-scheme media queries.

WCAG 2.2 specifics