Toegankelijkheid voor ontwikkelaars: inclusieve code bouwen
Ontwikkelaars zijn de architecten van toegankelijkheid op implementatieniveau. Terwijl ontwerpers de visuele en interactiefundamenten leggen, is het de code die uiteindelijk bepaalt of een website werkt met toetsenbordnavigatie, correct communiceert met schermlezers en toegankelijkheid behoudt over browsers en apparaten heen.
Het goede nieuws is dat de meeste best practices voor toegankelijkheid overeenkomen met algemene best practices voor schone, semantische, standaardconforme code. Toegankelijke code schrijven gaat niet over het toevoegen van complexiteit — het gaat over het correct schrijven van code vanaf het begin.
Eerst semantische HTML
Het meest impactvolle wat u kunt doen voor toegankelijkheid is semantische HTML-elementen correct gebruiken. HTML5 biedt een rijk vocabulaire aan elementen die inherente betekenis en toegankelijkheidsfuncties met zich meebrengen. Een <button>-element is automatisch focusbaar, activeerbaar met het toetsenbord en wordt door schermlezers aangekondigd als knop. Een <div> met een onclick-handler heeft geen van deze functies zonder aanzienlijk extra werk.
Gebruik <nav> voor navigatiegebieden, <main> voor de primaire content, <header> en <footer> voor hun respectieve secties, <section> en <article> voor contentgebieden, <h1> tot en met <h6> voor koppen in de juiste hiërarchische volgorde, <ul> en <ol> voor lijsten, <table> met <th> voor tabelgegevens, <label> met for-attributen voor formulierbesturingselementen, en native <button>- en <a>-elementen voor interactieve besturingselementen.
Deze elementen creëren een toegankelijkheidsboom die hulptechnologieën gebruiken om uw content aan gebruikers te presenteren. Wanneer u ze correct gebruikt, wordt veel van de toegankelijkheid automatisch afgehandeld.
Koppenstructuur
Koppen creëren de structurele omtrek van uw pagina. Schermlezergebruikers navigeren vaak via koppen om de contentorganisatie te begrijpen en specifieke secties te vinden. Elke pagina zou precies één <h1> moeten hebben, en koppen zouden een logische hiërarchie moeten volgen zonder niveaus over te slaan — een <h3> zou niet na een <h1> moeten komen zonder een <h2> ertussen.
Gebruik nooit kopelementen voor visuele opmaak. Als u grote vetgedrukte tekst nodig heeft die geen kop is, gebruik dan CSS op een ander element. Omgekeerd, als content als kop functioneert, markeer het dan als zodanig, ongeacht de visuele presentatie.
Toetsenbordtoegankelijkheid
Alle functionaliteit moet bedienbaar zijn via alleen een toetsenbordinterface. Dit betekent dat elk interactief element — links, knoppen, formulierbesturingselementen, menu's, modals, sliders, tabs — bereikbaar moet zijn via de Tab-toets (of Shift+Tab voor achteruit), activeerbaar met Enter of Spatie, en waar van toepassing afsluitbaar.
Maak nooit toetsenbordvallen waar gebruikers in een element kunnen tabben maar er niet uit kunnen tabben. Modale dialogen moeten de focus binnen het dialoogvenster vasthouden terwijl het open is en de focus terugzetten naar het activerende element wanneer het wordt gesloten, maar het indrukken van Escape moet het dialoogvenster altijd sluiten.
Zorg ervoor dat de focusvolgorde een logische reeks volgt die overeenkomt met de visuele lay-out. De DOM-volgorde moet over het algemeen overeenkomen met de visuele presentatie. Vermijd het gebruik van positieve tabindex-waarden, die de natuurlijke focusvolgorde overschrijven en verwarring creëren. Gebruik tabindex="0" om niet-interactieve elementen focusbaar te maken wanneer dat nodig is, en tabindex="-1" voor elementen die alleen programmatisch focusbaar moeten zijn.
Paginataal
Stel de standaardtaal van elke pagina in met het lang-attribuut op het <html>-element. Dit vertelt schermlezers welke uitspraakregels ze moeten gebruiken. Als de taal binnen de content verandert — bijvoorbeeld een Franse zin binnen een Nederlandse pagina — markeer de verandering dan met een lang-attribuut op het omsluitende element.
Formuliertoegankelijkheid
Formulieren zijn waar gebruikers invoer verstrekken en ze zijn een veelvoorkomende bron van toegankelijkheidsfouten. Elk formulierbesturingselement moet een programmatisch gekoppeld label hebben, doorgaans met het <label>-element met een for-attribuut dat overeenkomt met het id van het besturingselement. Groepeer gerelateerde besturingselementen met <fieldset> en <legend>.
Wanneer invoerfouten worden gedetecteerd, identificeer het veld met de fout en beschrijf de fout in tekst. Geef waar mogelijk suggesties voor correctie. Voor velden die specifieke formaten accepteren, geef duidelijke instructies over het verwachte formaat. Gebruik het autocomplete-attribuut om browser-autofill in te schakelen voor veelvoorkomende velden zoals naam, e-mailadres, adres en telefoonnummer.
Statusberichten die geen focus ontvangen — zoals "item toegevoegd aan winkelwagen" of "3 resultaten gevonden" — moeten worden aangekondigd aan schermlezergebruikers via ARIA live-regio's of statusrollen.
Alternatieve tekst
Elke niet-decoratieve afbeelding moet betekenisvolle alternatieve tekst hebben die de inhoud of functie beschrijft. Voor informatieve afbeeldingen, beschrijf wat de afbeelding overbrengt. Voor functionele afbeeldingen (zoals een logo dat naar de startpagina linkt), beschrijf de functie. Voor decoratieve afbeeldingen die geen informatie toevoegen, gebruik een leeg alt-attribuut (alt="") zodat schermlezers ze volledig overslaan.
Complexe afbeeldingen zoals grafieken, diagrammen of schema's hebben mogelijk langere beschrijvingen nodig die worden verstrekt via een bijschrift, aangrenzende tekst of een gekoppelde gedetailleerde beschrijving.
WAI-ARIA
De specificatie Accessible Rich Internet Applications biedt extra semantiek voor situaties waarin native HTML niet volstaat. ARIA stelt u in staat om rollen, toestanden en eigenschappen te communiceren naar hulptechnologieën voor aangepaste widgets en dynamische content.
ARIA moet echter oordeelkundig worden gebruikt. De eerste regel van ARIA is: als u een native HTML-element kunt gebruiken dat de semantiek en het gedrag heeft dat u nodig heeft, doe dat dan. ARIA voegt geen functionaliteit toe — het voegt alleen semantiek toe. Een <div role="button"> heeft nog steeds JavaScript nodig voor toetsenbordafhandeling, terwijl een native <button> dit automatisch afhandelt.
Gebruik ARIA-oriëntatiepuntrollen (of hun HTML5-equivalenten) om paginaregio's te definiëren. Gebruik aria-label en aria-labelledby om toegankelijke namen te bieden waar zichtbare tekst onvoldoende is. Gebruik aria-expanded, aria-selected, aria-checked en andere toestandsattributen om de huidige toestand van interactieve widgets te communiceren. Gebruik aria-live-regio's om dynamische content-updates aan te kondigen.
Responsief ontwerp en herschikking
Content moet presenteerbaar zijn zonder informatieverlies bij een breedte van 320 CSS pixels zonder dat horizontaal scrollen nodig is. Dit zorgt ervoor dat gebruikers die tot 400% inzoomen op een standaard desktopscherm nog steeds toegang hebben tot alle content. Ontwerp uw lay-outs zodanig dat content opnieuw wordt geschikt in een enkele kolom bij smalle breedtes in plaats van scrollen in twee richtingen te vereisen.
Skip-links
Bied een mechanisme voor toetsenbordgebruikers om herhaalde contentblokken, zoals navigatiemenu's, over te slaan en direct naar de hoofdcontent te springen. De meest gangbare implementatie is een "Ga naar hoofdinhoud"-link die het eerste focusbare element op de pagina is en zichtbaar wordt wanneer het focus krijgt.
Testchecklist voor ontwikkelaars
Voordat u een functie implementeert, verifieer: alle functionaliteit werkt met alleen het toetsenbord; de focusvolgorde is logisch; focus is zichtbaar op alle interactieve elementen; alle afbeeldingen hebben passende alt-tekst; alle formulierbesturingselementen hebben labels; de paginataal is ingesteld; de koppenhiërarchie is correct; ARIA wordt correct en alleen wanneer nodig gebruikt; content herschikt bij 320px breedte; en dynamische content-updates worden aangekondigd aan schermlezers.
In dit gedeelte
Is uw website toegankelijk?
Scan uw website gratis en ontvang uw WCAG-score binnen enkele minuten.
Scan uw site gratis