WCAG uitgelegd
Heldere uitleg van WCAG 2.2 succescriteria. Per criterium lees je wat het betekent, waarom het belangrijk is en hoe je eraan voldoet.
overflow: hidden knipt de focusindicator af
Een mooie kaartcomponent. Afgeronde hoeken. overflow: hidden om te voorkomen dat content buiten de hoeken valt.
Link opent in een nieuw venster zonder waarschuwing
Je klikt op een link. Een nieuw tabblad opent. Je drukt op de terugknop. Niets. Want je zit in een nieuw tabblad. Er is geen geschiedenis.
Focus verdwijnt na het sluiten van een dialoogvenster
Je klikt op “Verwijderen.” Een bevestigingspopup verschijnt. “Weet je het zeker?” Je drukt op “Annuleren.”
Sitenaam vóór de paginanaam
Drie tabbladen open: “Gemeente Utrecht - Paspoort aa…” “Gemeente Utrecht - Rijbewijs ve…” “Gemeente Utrecht - Verhuizing d…”
SC 2.5.8 - Wat betekent "Doelgrootte (minimum)"?
Een kruisje van 16 pixels om een melding te sluiten. Pagineringsnummers die tegen elkaar aan staan. Een rijtje piepkleine iconen in de footer. Voor wie een trillende hand heeft, grote vingers, of gewoon in een hobbelende trein zit, zijn zulke doelen bijna niet te raken. Mis je net, dan klik je vaak op het verkeerde doel ernaast. Daarom zegt WCAG: een klikbaar doel is minstens 24 bij 24 pixels, of heeft genoeg lege ruimte om zich heen.
Zelfgemaakte focusindicator die onzichtbaar is
Tab. Tab. Tab. Waar ben ik? Je navigeert met je toetsenbord door een website. Elke knop en link zou een zichtbare focus moeten hebben. Maar je ziet… niets. Of een vage lichtblauwe gloed.
Kolommen die niet onder elkaar gaan
Sidebar links. Content rechts. Op een groot scherm: perfect. Bij 400% zoom: twee kolommen gepropt in 320 pixels. De sidebar neemt de helft in beslag. De content wordt zo smal dat je twee woorden per regel leest. Of je moet horizontaal scrollen.
Die mooie oranje knop met witte tekst
Oranje knop. Witte tekst. “Bestel nu!” Ziet er goed uit. Valt op. Precies wat je wilt van een call-to-action.
Actieve pagina in het menu: alleen een andere kleur
Home. Over ons. Diensten. Contact. Je bent op “Diensten.” Hoe weet je dat? De tekst is blauw in plaats van zwart.
Tabel nagebouwd met divs
Maandag. Dinsdag. Woensdag. Donderdag. Vrijdag. 09:00 - 17:00. 09:00 - 17:00. 09:00 - 17:00. 09:00 - 17:00. 09:00 - 13:00.
Fieldset legend
“Hoe wil je benaderd worden?” Met daaronder drie radiobuttons: telefoon, e-mail, brief. Je begrijpt direct dat die opties bij die vraag horen.