# Toegankelijkheid

Doel: WCAG 2.2 AA voor alle kernflows van de server-rendered Stitch-cockpit.

## Productiecontract

- Skiplink, `aside`/`nav`, `header`, één `main` en één `h1` per pagina.
- Headingniveaus volgen de visuele hiërarchie; tabulaire data gebruikt echte headers.
- Formulieren hebben expliciete labels, hints, gekoppelde errors en servervalidatie.
- Status gebruikt tekst naast kleur; score en datakwaliteit zijn afzonderlijk benoemd.
- Icon-only controls hebben een toegankelijke naam; lokale decoratieve SVG's zijn verborgen.
- Externe vacaturetekst is gesanitized; links gebruiken veilige attributen en geen verborgen automatische actie.

## Toetsenbord en progressive enhancement

Alle routes, filters, feedback, dossiers, statuswijzigingen en profiel-/bronforms werken zonder JavaScript. JavaScript verbetert uitsluitend drawer, disclosure, viewtoggle, zoekfocus en thema. De mobiele drawer beheert `aria-expanded`, focus en sluitactie. Focus is zichtbaar; er zijn geen tijdslimieten of keyboard traps. `prefers-reduced-motion` reduceert alle transities.

## Contrast, zoom en reflow

De donkere en lichte tokensets bewaren tekst-, focus- en componentcontrast. Metadata is gedempt maar niet de enige informatiedrager. Content heeft geen vaste teksthoogte. Op 360 px en bij 200% zoom blijft het document binnen het viewport; alleen intrinsiek brede pipeline-/tabeldata gebruikt een gelabelde interne scroller.

## Browservalidatie VR-213

Op 22 juli 2026 zijn de negen hoofdervaringen met echte lokale data gecontroleerd:

- viewports: 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800;
- aanvullende widescreencontrole: 1920×1080 en 2560×1440;
- op iedere gecontroleerde route: één `h1`, skiplink, hoofdlandmark, geen kapotte images en geen documentbrede overflow;
- mobiele sidebar is gesloten buiten gebruik, opent met `aria-expanded=true` en sluit terug naar `false`;
- dark/light wisselt met de correcte actienaam; de initiële naam volgt nu ook een opgeslagen voorkeur;
- pipeline en automationtabellen scrollen lokaal zonder de pagina te verbreden;
- browserconsole bevatte geen errors of warnings.

De elf bewijsscreenshots staan onder `artifacts/visual-validation/`. De optionele pytest-Playwrightvariant blijft lokaal overgeslagen wanneer Playwright niet geïnstalleerd is; de HTML/a11y-probe en de geïntegreerde Codex-browseraudit vormen samen het uitgevoerde bewijs.

## Handmatige reviewchecklist

1. Tabvolgorde en zichtbare focus op dashboard, detail, profiel en pipeline.
2. Screenreader-smoke voor shelllandmarks, scorelabels en formuliererrors.
3. Dark/light contrast en status zonder kleur.
4. 200% zoom, lange titels, lege/unknown states en 360 px reflow.
5. Fout/success na POST en terugkeer naar een logisch heading- of messagepunt.