Roosevelt Docs
Design System

Accessibility

WCAG 2.2 AA richtlijnen, contrast en keyboard navigatie

Accessibility

Roosevelt OPS voldoet minimaal aan WCAG 2.2 Level AA. Accessibility is geen afterthought — het is ingebouwd via de token architectuur.

Contrast Requirements

LevelRatioGeldt voor
AA (normaal)4.5:1Body tekst (< 18px / < 14px bold)
AA (groot)3:1Headings (>= 18px / >= 14px bold)
AAA7:1Verhoogde leesbaarheid

Token Contrast Tabel

TokenOp achtergrondRatioLevel
label-primarysurface-primary (light)17.4:1AAA
label-secondarysurface-primary (light)~7:1AAA
label-tertiarysurface-primary (light)~4.5:1AA
brandsurface-primary (light)12.31:1AAA
brandsurface-primary (dark)4.6:1AA
label-on-colorbrand (light)12.31:1AAA

Focus Management

Alle interactieve elementen gebruiken een consistente focus ring:

<button class="... focus-visible:outline-none focus-visible:ring-2
               focus-visible:ring-outline-active focus-visible:ring-offset-2">
  Action
</button>
PropertyWaarde
Ring width2px
Ring color--color-outline-active
Ring offset2px

Keyboard Navigatie

ComponentKeys
ButtonEnter, Space — activeer
LinkEnter — navigeer
InputTab — focus, Escape — clear/cancel
ModalEscape — sluit, Tab — cycle focus
DropdownArrow Up/Down — navigeer, Enter — selecteer, Escape — sluit

ARIA Patterns

<!-- Skip link -->
<a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4
                       focus:z-50 focus:rounded-s focus:bg-surface-primary focus:px-4
                       focus:py-2 focus:text-body focus:shadow-md">
  Skip to content
</a>
 
<!-- Live region voor dynamische content -->
<div aria-live="polite" aria-atomic="true" class="sr-only">
  3 resultaten gevonden
</div>
⚠

Kleur als indicator

Gebruik kleur nooit als enige indicator. Combineer altijd met tekst, iconen of patronen. Badges, status indicators en error states moeten ook zonder kleur begrijpelijk zijn.

Previous

Feedback

Next

Dark Mode

On this page