74 lines
2.8 KiB
Markdown
74 lines
2.8 KiB
Markdown
# 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.
|