# Toegankelijkheid

Doel: WCAG 2.2 AA voor de kernflows.

## Semantiek

- één `h1` per pagina, hiërarchische headings;
- navigatie in `<nav>` met duidelijke accessible name;
- lijsten/tabellen voor werkelijke lijst-/tabulaire data;
- formulieren met expliciete `<label>`;
- statusmetadata als definition list waar passend;
- externe links herkenbaar in tekst/accessible label.

## Toetsenbord

Alle functies moeten zonder muis werken. Focusvolgorde volgt visuele volgorde. `:focus-visible` heeft een contrastvolle ring. Geen keyboard traps. Na server-POST landt focus logisch via heading/message; toekomstige modals herstellen focus.

## Kleur en contrast

- bodytekst minimaal 4,5:1;
- grote tekst minimaal 3:1;
- focus en componentgrenzen minimaal 3:1 waar vereist;
- status nooit alleen via kleur;
- light/dark afzonderlijk toetsen.

## Zoom en reflow

- bruikbaar op 320 CSS px breed;
- 200% zoom zonder verlies van acties/tekst;
- geen vaste hoogte voor tekstkaarten;
- lange URL's en woorden breken;
- horizontale scroll alleen voor intrinsiek brede data met alternatief.

## Forms en fouten

- foutsummary bovenaan bij meerdere fouten;
- inline fout bij veld;
- `aria-invalid` en `aria-describedby`;
- voorbeeld en vereiste syntax als hint;
- geen placeholder als enige label;
- validatie niet alleen on blur.

## Dynamiek

- server-rendering heeft geen verborgen loading state;
- async updates gebruiken live regions spaarzaam;
- successmessages niet alleen tijdelijk visueel;
- motion respecteert reduced motion;
- tijdslimieten bestaan niet in gebruikersflows.

## Vacaturetekst

Gesanitized HTML behoudt headings, paragraphs, lists en links waar veilig. Verwijder scripts, forms, iframes, eventhandlers en gevaarlijke URL-schema's. Voeg waar nodig `rel="noopener noreferrer"` toe aan externe links.

## Testen

Per zichtbare taak:

1. keyboard-only;
2. browser zoom/reflow;
3. automatische HTML/accessibilityscan waar beschikbaar;
4. screenreader smoke test voor dashboard, vacaturedetail en profiel;
5. contrastcontrole;
6. test met lange/lege/unknown content.

## VR-118 browservalidatie

- Dashboard gecontroleerd op 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800.
- Op alle zes viewports: exact één `h1`, geen documentbrede horizontale overflow en de juiste desktop/mobile navigatiestatus.
- Mobiel menu opent met `aria-expanded=true`, sluit met Escape/sluitactie en is buiten de focus-/accessibilityflow wanneer gesloten.
- Themawisselaar blijft bruikbaar wanneer browseropslag niet beschikbaar is; de UI geeft dan geen consolefout.
- Dashboard, vacaturelijst/detail, sollicitatiepipeline, profielen/editor, bronnen en systeem zijn met echte seeded data en zonder externe assets gevalideerd.
- Screenshots staan onder `docs/design/validation/` en zijn via `.dockerignore` uitgesloten van de productiecontainer.