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:

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

2.0 KiB Raw Blame History