Woordenlijst toegankelijkheid

Gebruik <details>/<summary> of button + aria-expanded + aria-controls. Pijltoetsen optioneel. Inhoudspaneel moet gekoppeld zijn aan de trigger.

Voeg autocomplete-attributen toe aan invoervelden die persoonlijke gegevens verzamelen (naam, e-mail, adres, betaling). Helpt wachtwoordmanagers en hulptechnologie formulieren automatisch in te vullen.

Gebruik nav met aria-label="Broodkruimel", een geordende lijst, en aria-current="page" op het laatste item. Scheidingstekens moeten decoratief zijn (CSS of aria-hidden). Helpt oriëntatie voor alle gebruikers.

Bied pauze/stopbesturingen. Ondersteun toetsenbordnavigatie (pijlen voor slides). Role="group" op elke slide met aria-roledescription="slide". Auto-rotatie moet prefers-reduced-motion respecteren.

Een tekstinvoer met een pop-uplijst met opties. Een van de moeilijkste ARIA-patronen: role="combobox" + aria-expanded + aria-activedescendant + listbox. Kapotte implementaties zijn overal — test met schermlezers.

Gebruik <th> met scope="col"/"row". Voeg <caption> of aria-labelledby toe. Gebruik nooit tabellen voor lay-out. Slechts 19% van de waargenomen tabellen had geldige opmaak in de WebAIM Million 2026.

Berucht ontoegankelijk. Moet toetsenbordnavigatie ondersteunen (pijltoetsen voor dagen, page up/down voor maanden). Bied altijd een tekstinvoer-alternatief. Native <input type="date"> is vaak de beste optie.

Focusvasthouding binnenin, Escape om te sluiten, focus keert terug naar trigger bij sluiting. Gebruik <dialog> of role="dialog" + aria-modal="true". Een van de meest kapotte patronen.

Elk invoerveld heeft een zichtbaar, programmatisch gekoppeld label nodig. Placeholder-tekst is geen label. Ontbrekende formulierlabels treffen 49% van de homepagina's — de op één na meest voorkomende WCAG-fout na contrast.

aria-expanded op de triggerknop, aria-controls verwijzend naar het menupaneel. Focusbeheer: verplaats focus naar menu bij openen, terug naar trigger bij sluiten. Escape om te sluiten.

Gebruik nav met aria-label="Paginering". Huidige pagina krijgt aria-current="page". Uitgeschakelde links gebruiken aria-disabled, niet verwijderde href. Bied duidelijke vorige/volgende labels.

role="tablist" > role="tab" + role="tabpanel". Pijltoetsen voor tabbladwisseling, niet Tab. aria-selected op actief tabblad. Paneel wordt gekoppeld via aria-labelledby.

Korte statusberichten die verschijnen en automatisch verdwijnen. Gebruik role="status" of aria-live="polite". Mogen niet de enige manier zijn om kritieke informatie over te brengen. Bied sluitknop en voldoende weergavetijd.

Tooltips moeten toegankelijk zijn via focus (niet alleen hover). Gebruik role="tooltip" + aria-describedby. Escape om te sluiten. Mag essentiële inhoud niet verbergen.

Alle besturingen moeten toetsenbordtoegankelijk zijn. Bied ondertiteling, audiodescriptie en transcriptie. Geen autoplay (of respecteer prefers-reduced-motion). Volume en voortgang moeten via toetsenbord bedienbaar zijn.