43 lines
2.7 KiB
Markdown
43 lines
2.7 KiB
Markdown
# 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.
|