65 lines
2.0 KiB
Markdown
65 lines
2.0 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.
|