Toegankelijke webpagina's maken

Een toegankelijke pagina laat mensen informatie verkrijgen en taken uitvoeren met de hulpmiddelen die ze gebruiken. Dat kunnen een toetsenbord, een schermlezer, een schermvergroter of spraakbediening zijn. Een pagina kan er voltooid uitzien terwijl de code deze gebruikers nog steeds tegenhoudt.

Wat hulptechnologie ontvangt

De browser leest HTML in de DOM, het model van het document. Daaruit leidt de browser een toegankelijkheidsboom af die betekenisvolle objecten beschrijft voor hulptechnologieën. Een bedieningselement heeft een rol, een naam en relevante toestanden of eigenschappen nodig. Een selectievakje kan bijvoorbeeld de rol “selectievakje”, de naam “Aanbiedingen per e-mail” en de toestand “aangevinkt” hebben.

Een schermlezer spreekt inhoud uit of stuurt die naar een brailleleesregel. NVDA en JAWS werken op Windows; Narrator is ingebouwd in Windows, VoiceOver in macOS en iOS en TalkBack in Android. Schermlezers kunnen langs koppen, links en bedieningselementen navigeren zonder elke regel te lezen. Sommige kunnen ook lettertype- of kleurinstellingen melden. Schermvergroters tonen de vergrote visuele pagina, dus ook zichtbare duidelijkheid is van belang.

Met spraakbediening kan iemand de naam van een bedieningselement zeggen, zoals “klik op Zoeken”. Schakelapparaten kunnen opdrachten als van een toetsenbord versturen. Toetsenbordondersteuning en nauwkeurige namen helpen daarom verschillende groepen gebruikers, niet alleen mensen die naar spraak luisteren.

Begin met het juiste element

Vergelijk deze twee manieren om een bedieningselement voor opslaan te maken:

<button type="button">Save</button>
<div class="btn" onclick="save()">Save</div>

De knop maakt zijn rol en naam al beschikbaar. De knop krijgt focus via Tab en reageert op Enter en de spatiebalk. CSS kan de tweede regel er hetzelfde uit laten zien, maar een div heeft niets van dat knopgedrag. Een schermlezer kan in leesmodus mogelijk de klikafhandeling activeren, maar kondigt het element niet aan als knop. Iemand die met Tab navigeert, kan het niet bereiken.

Semantische HTML betekent dat je een element kiest op basis van wat de inhoud of het bedieningselement betekent. Gebruik CSS om het uiterlijk te bepalen. Dit geeft de browser een goed uitgangspunt en voorkomt dat je ingebouwd gedrag met een script moet nabouwen.

Ken het doel

Het W3C publiceert de Web Content Accessibility Guidelines, of WCAG. De succescriteria zijn toetsbare eisen, elk aangeduid met een nummer, een naam en een niveau. Zo is 1.4.3 Contrast (minimum) niveau AA. WCAG 2.2 werd in oktober 2023 een aanbeveling en is in december 2024 bijgewerkt.

Om aan niveau AA te voldoen, moet je voldoen aan elk criterium van niveau A en niveau AA. Een paar AA-controles halen is niet genoeg. Niveau AAA voegt verdere eisen toe. WCAG 2.2 voegt negen criteria toe aan 2.1, waarvan zes op A of AA, en verwijdert het verouderde criterium 4.1.1 Parsen.

Toegankelijkheid omvat ook leesbare vergrote tekst, ondertiteling voor dove en slechthorende mensen, duidelijke instructies en nuttige foutmeldingen. Door deze voorzieningen vanaf het begin in de pagina op te nemen, voorkom je dat je ongeschikte HTML moet vervangen nadat de lay-out klaar is.

Een bruikbare paginastructuur geeft mensen verschillende manieren om hun plaats te vinden. Een beschrijvende titel duidt de pagina aan, herkenningspunten duiden de gebieden aan en koppen tonen het overzicht. Deze onderdelen hebben echte HTML-betekenis nodig, ook als het visuele ontwerp er al duidelijk uitziet.

Duid de pagina en de taal aan

Stel de hoofdtaal in op het hoofdelement, bijvoorbeeld <html lang="en-US">. Schermlezers gebruiken die om uitspraakregels te kiezen. Markeer een taalwisseling binnen de pagina op het betreffende element: <span lang="fr">bon appétit</span>. Dit ondersteunt 3.1.1 Taal van de pagina (A) en 3.1.2 Taal van onderdelen (AA).

Geef elke pagina een unieke, beschrijvende <title>. “Verjaardagstaart bestellen – Bakkerij Groen Blad” is bruikbaarder in tabbladen, bladwijzers en aankondigingen van schermlezers dan “Bakkerij Groen Blad – Pagina 4”. Zet het specifieke onderwerp voorop, zodat gebruikers vergelijkbare tabbladen snel kunnen onderscheiden.

Verdeel de pagina in gebieden

Gebruik <main> voor de hoofdinhoud, <nav> voor navigatie en <aside> voor ondersteunende inhoud. Een <header> op paginaniveau levert het herkenningspunt banner en een <footer> op paginaniveau levert inhoudsinformatie. Header- en footer-elementen die binnen sectiegebieden zijn genest, worden niet die herkenningspunten op paginaniveau.

Gebruik één zichtbare <main>. Als er twee navigatiegebieden zijn, onderscheid ze dan met namen zoals <nav aria-label="Main"> en <nav aria-label="Breadcrumb">. De rol zegt al “navigatie”, dus het label kan kort blijven. Een <section> of <form> wordt alleen een herkenningspunt als het element een toegankelijke naam heeft.

Maak een overzicht voordat je lettergroottes kiest

Voor de bestelpagina van de bakkerij kan een duidelijk overzicht er zo uitzien:

<h1>Order a birthday cake</h1>
<h2>Choose a size</h2>
<h2>Choose a flavor</h2>
<h3>Chocolate</h3>
<h3>Lemon</h3>
<h2>Pickup or delivery</h2>

Gebruik één h1 voor het hoofdonderwerp, hoofdsecties op h2-niveau en hun onderdelen op h3-niveau. Sla geen niveaus over wanneer je afdaalt. Kies kopniveaus voor de structuur; pas hun grootte aan met CSS. Een vetgedrukte alinea komt niet in de koppenlijst van de schermlezer. Omgekeerd voegt een gewone inleiding in h2 een sectie toe die de inhoud niet heeft.

Behoud groepering en leesvolgorde

Gebruik <ul> voor ongeordende items, <ol> voor geordende stappen en <dl> voor paren van term en beschrijving. Schermlezers kunnen de grootte van een lijst aankondigen, zodat gebruikers kunnen inschatten hoeveel er volgt. Navigatielinks kunnen in een ul binnen nav staan. Als je in Safari opsommingstekens verwijdert met list-style: none, kondigt VoiceOver de lijst mogelijk niet meer aan; role="list" op die lijst herstelt dit.

Schrijf de HTML in een betekenisvolle leesvolgorde. Flex order, een omgekeerde flexrichting, gridplaatsing en absolute positionering veranderen wat mensen zien zonder de DOM-volgorde te veranderen. Een rij die visueel met “Aanmelden” begint, maar dat pas als laatste bereikt met Tab, is moeilijker te volgen. Verbeter de bronvolgorde voordat je de lay-out maakt.

Werk een paginabasis uit

Een bakkerijwebsite heeft een hoofdmenu en een tweede verzameling kruimelpadlinks. Geef de gebieden verschillende namen en houd beide verzamelingen links beschikbaar:

<nav aria-label="Main">
  <ul><li><a href="/bread">Bread</a></li></ul>
</nav>
<nav aria-label="Breadcrumb">
  <ol><li><a href="/">Home</a></li></ol>
</nav>
<main>
  <h1>Order a loaf</h1>
  <h2>Choose your bread</h2>
</main>

Inspecteer de lijst met herkenningspunten: Main en Breadcrumb duiden verschillende navigatiedoelen aan, gevolgd door de hoofdinhoud. Inspecteer daarna de koppenlijst: die moet het paginaonderwerp en de eerste sectie tonen. Deze twee lijsten bieden verschillende routes door hetzelfde document; geen van beide hangt af van de kleuren van het menu of de lettergrootte van de kop.

Het element van een bedieningselement vertelt gebruikers wat ze kunnen verwachten. Een link belooft een bestemming; een knop belooft een actie. Ingebouwde bedieningselementen en tabelelementen bieden ook relaties die moeilijk na te maken zijn met vormgegeven generieke boxen.

Kies tussen navigatie en actie

Een anker zonder href is geen gewone link die met het toetsenbord focus kan krijgen. Een anker met href="#" en een klikafhandeling die een menu opent, kondigt navigatie aan terwijl het een actie uitvoert. Gebruik voor dat menu een knop. Geef knoppen binnen een formulier die het formulier niet verzenden type="button"; anders kunnen ze het formulier door hun standaardgedrag verzenden.

Maak bestemmingen duidelijk

Een schermlezer kan de links op de pagina in een lijst verzamelen. Herhaalde links met “Lees meer” zijn daarin moeilijk te onderscheiden. “Lees over zuurdesemcursussen” noemt de bestemming direct. WCAG 2.4.4 Linkdoel (in context) (A) staat toe dat de nabije context een link verduidelijkt, maar betekenisvolle linktekst werkt ook wanneer die op zichzelf wordt gehoord.

Vertel gebruikers in de linktekst over een download of nieuw tabblad: “Prijslijst (PDF, 2 MB)” of “Boekingsformulier (opent in een nieuw tabblad)”. Een nieuw tabblad verandert hoe de terugknop werkt. Gebruik waar mogelijk een beschrijving in plaats van een lange onbewerkte URL.

Elke link en knop heeft een toegankelijke naam nodig. Een winkelwagenlink met alleen een afbeelding heeft tekst nodig die de bestemming aangeeft; een afbeelding zonder alternatief kan een link zonder naam laten of alleen met een bestandsnaam aanduiden. Een naam geven is even noodzakelijk als de juiste rol kiezen.

Behoud ingebouwd gedrag

Gebruik ingebouwde selectievakjes, keuzerondjes en select-elementen. Die bieden toetsenbordbediening en aangekondigde toestanden. Een eenvoudige uitklapbediening kan met alleen HTML:

<details>
  <summary>Delivery options</summary>
  <p>We deliver within 10 km.</p>
</details>

Het summary-element krijgt toetsenbordfocus en de uitklapbediening maakt bekend of die open of gesloten is. Bij een zelfgebouwde rij met een driehoekspictogram moet je die functies afzonderlijk implementeren.

Koppel tabelgegevens aan hun kopcellen

Gebruik tabellen voor gegevens met relaties tussen rijen en kolommen. Een tabelbijschrift geeft de gegevensverzameling een naam; th duidt kopcellen aan; scope vertelt de browser welke cellen een kopcel beschrijft.

<table>
  <caption>Shop opening hours</caption>
  <tr><th scope="col">Day</th><th scope="col">Opens</th></tr>
  <tr><th scope="row">Saturday</th><td>08:00</td></tr>
</table>

Iemand die naar de cel met de tijd gaat, kan de bijbehorende dag en kolomkop horen. Een CSS-grid van div-elementen verliest die ingebouwde relaties. Gebruik flexbox of grid voor de pagina-indeling; een indelingstabel kan misleidende tabelnavigatie opleveren waar geen echte gegevensrelatie bestaat.

Alternatieve tekst geeft de nuttige informatie of functie van een afbeelding door aan iemand die de afbeelding niet kan zien. Bepaal wat de afbeelding op deze specifieke pagina bijdraagt voordat je het uiterlijk beschrijft. Dezelfde foto kan in verschillende contexten andere tekst nodig hebben.

Kies op basis van het doel

Voor een informatieve productfoto beschrijft alt="Round sourdough loaf with a dark, cracked crust" wat een koper moet weten. Op een pagina over bakfouten kan juist een verbrande korst het belangrijkste kenmerk zijn. Stel je voor dat je de pagina via de telefoon voorleest: neem de informatie op die de luisteraar anders zou missen.

Gebruik alt="" voor een afbeelding die alleen decoratie toevoegt. Een leeg alternatief vertelt schermlezers dat ze de afbeelding moeten overslaan. Het attribuut weglaten is iets anders: een schermlezer kan een bestandsnaam aankondigen, zoals “IMG underscore 4032 punt jpg”. Een zuiver decoratieve achtergrond kan ook in CSS worden geplaatst.

Noem een functie, geen vorm

Wanneer een afbeelding de enige inhoud van een link of knop is, levert het alternatief de naam van het bedieningselement. Een link naar de homepagina kan zo zijn:

<a href="/">
  <img src="logo.svg" alt="Green Leaf Bakery home">
</a>

Gebruik voor een zoekknop “Zoeken”, niet “Vergrootglas”. De gebruiker moet weten wat er gebeurt als die op het bedieningselement drukt. Als een productlink al de zichtbare woorden “Roggebrood” bevat, kan een foto in dezelfde link alt="" gebruiken, zodat de naam van de link niet wordt herhaald.

Behandel tekst en complexe afbeeldingen

Een afbeelding van tekst heeft dezelfde woorden nodig in het alternatief. Een reclamebanner met “Zomeruitverkoop: 20% korting op al het brood” heeft die woorden nodig, niet “Reclamebanner”. Gebruik waar mogelijk echte HTML-tekst die met CSS is vormgegeven. Die kan worden vergroot of verkleind, vertaald en herschikt; WCAG 1.4.5 Afbeeldingen van tekst (AA) vereist echte tekst wanneer de technologie dat toelaat, met uitzonderingen zoals logo's.

Een grafiek, diagram of kaart bevat vaak te veel informatie voor een kort alternatief. Geef een korte aanduiding en zet daarna een uitgebreidere beschrijving in de buurt. Zo duidt alt="Bar chart of monthly website visitors, January to June" de afbeelding aan. Tekst in de buurt kan uitleggen dat het aantal bezoekers steeg van 1.200 naar 3.000, terwijl een gegevenstabel afzonderlijke waarden biedt wanneer die nodig zijn. Een <figure> met <figcaption> kan de afbeelding en de uitleg groeperen.

Kies nuttige details

Houd gewone alternatieve tekst bij een beknopte woordgroep of zin. Schermlezers duiden een afbeelding al aan, dus beginnen met “Afbeelding van” voegt meestal geen nuttige inhoud toe. Verwijder herhaling van aangrenzende tekst en zoekwoorden die niet helpen om de pagina te begrijpen.

WCAG 1.1.1 Niet-tekstuele content (A) vereist een gelijkwaardig doel, geen beschrijving van elk zichtbaar detail. Het title-attribuut is geen betrouwbare vervanging: het wordt niet consequent aangekondigd of beschikbaar gemaakt bij gebruik van toetsenbord en aanraakbediening. Zet het alternatief van een afbeelding in alt en houd een eventuele langere uitleg op de pagina zelf.

Een pictogram, een diagram en een video hebben verschillende soorten alternatieven nodig. Bepaal eerst welke informatie of actie elk bijdraagt. Zet het equivalent daarna op een plek waar zowel de browser als de gebruiker van de pagina het kan vinden.

Geef het bedieningselement met het pictogram een naam

Zichtbare tekst naast een pictogram is meestal het duidelijkst. Als een knop alleen een pictogram moet bevatten, zorg dan voor visueel verborgen tekst of een label op de knop:

<button type="button" aria-label="Close">✕</button>

Staat een pictogram naast zichtbare knoptekst, verberg het decoratieve pictogram dan met aria-hidden="true". Verberg niet de hele knop. Een gewone span of div heeft een generieke rol waarbij naamgeving verboden is; aria-label daarop plaatsen is geen betrouwbare manier om een pictogram een naam te geven.

Visueel verborgen tekst blijft beschikbaar voor schermlezers. Een herbruikbare CSS-klasse kan absolute positionering, een breedte en hoogte van 1 px, verborgen overlopende inhoud, clip-path: inset(50%) en white-space: nowrap gebruiken. Anders dan display: none of visibility: hidden houdt die de tekst in de toegankelijkheidsboom.

Gebruik voor betekenisvolle inline-SVG role="img" en een naam, bijvoorbeeld aria-labelledby="rating-title" dat verwijst naar <title id="rating-title">Rated 4 out of 5 stars</title> binnen de SVG. Decoratieve SVG gebruikt aria-hidden="true". Een SVG die via img wordt geladen, krijgt net als andere afbeeldingen het alternatief uit alt. Houd betekenisvolle waarschuwingen in HTML; CSS-achtergronden en gegenereerde inhoud zijn onbetrouwbare plekken voor essentiële informatie.

Kies het passende media-alternatief

Ondertiteling voor doven en slechthorenden synchroniseert spraak, belangrijke geluiden en aanduiding van sprekers met de video. Dialoogondertiteling geeft de dialoog weer of vertaalt die voor mensen die kunnen horen maar hulp nodig hebben om de taal te begrijpen. Een transcript is een afzonderlijke tekstuele weergave; die volgt de afspeeltijd niet.

<video controls src="bread.mp4">
  <track kind="captions" src="bread-en.vtt"
         srclang="en" label="English">
</video>

Het WebVTT-bestand bevat getimede tekstsegmenten, zoals 00:00:01.000 --> 00:00:04.000, gevolgd door ondertitelingstekst. Controleer automatische ondertiteling vóór publicatie op namen, vaktermen en interpunctie.

Als een demonstratie zonder woorden een oveninstelling toont, brengt ondertiteling van de spraak die informatie niet over. Audiodescriptie beschrijft belangrijke visuele informatie tijdens pauzes of in een beschreven versie. Een volledig tekstalternatief met de visuele informatie is een mogelijkheid op niveau A; vooraf opgenomen video heeft volgens 1.2.5 op AA-niveau audiodescriptie nodig.

Houd het afspelen bruikbaar

Gebruik de ingebouwde controls op audio en video en geef ingesloten frames een beschrijvende title, zoals “Kaart van onze winkellocatie”. Vermijd automatisch afspelend geluid. Audio die automatisch begint en langer dan 3 seconden duurt, heeft een pauze-, stop- of volumeregeling nodig die onafhankelijk is van het systeemvolume.

Koppel de verborgen naam en de getimede tekst

Houd voor een compacte verwijderknop de woorden in het document:

<button type="button">
  <img src="trash.svg" alt="">
  <span class="visually-hidden">Delete item</span>
</button>

De afbeelding wordt overgeslagen omdat de tekst de actie al aangeeft. Pas de verborgen-tekstklasse toe zonder die tekst uit de toegankelijkheidsboom te verwijderen:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

Een ondertitelingsbestand koppelt woorden daarentegen aan de afspeeltijd. Een klein WebVTT-voorbeeld is:

WEBVTT

00:00:01.000 --> 00:00:03.000
[Mixer whirring]

00:00:03.000 --> 00:00:06.000
Today we bake rye bread.

Het eerste tekstsegment brengt een relevant geluid zonder dialoog over. Het tweede brengt spraak over tijdens het eigen tijdsinterval. Bekijk de video met het tekstspoor ingeschakeld en controleer of elk tekstsegment verschijnt wanneer het bijbehorende geluid klinkt.

Toetsenbordgebruikers hebben een route door de hele taak nodig: een bedieningselement bereiken, herkennen, bedienen en verdergaan. Standaard HTML-bedieningselementen ondersteunen deze route al. Problemen ontstaan vaak wanneer vormgeving of zelfgebouwde bedieningselementen het gedrag van de browser verstoren.

Gebruik de verwachte toetsen

Tab gaat vooruit langs interactieve elementen; Shift+Tab gaat terug. Enter volgt links en activeert knoppen. De spatiebalk activeert knoppen en schakelt selectievakjes in of uit. In een groep keuzerondjes ga je met Tab de groep in of uit en ga je met de pijltoetsen tussen opties. Pijltoetsen werken ook in ingebouwde keuzelijsten. Escape sluit dialoogvensters en veel menu's.

Links met href, knoppen, invoervelden, keuzelijsten, tekstgebieden, summary-elementen en media met afspeelbediening kunnen standaard focus krijgen. Alinea's, koppen, afbeeldingen, generieke containers en ankers zonder href zijn geen gewone tabstops. Een schermlezer heeft afzonderlijke leesopdrachten voor tekst, dus elke kop aan de tabvolgorde toevoegen vertraagt de toetsenbordnavigatie.

Schakel bij het testen op macOS toetsenbordnavigatie in. De instelling “Druk op Tab om elk onderdeel op een webpagina te markeren” van Safari bepaalt of gewone tabnavigatie links bereikt; Option+Tab kan ze bereiken wanneer die instelling uit staat.

Houd tabindex-waarden eenvoudig

Positieve waarden zijn moeilijk te onderhouden omdat ze een tweede systeem voor de volgorde maken. Schrijf de HTML in een logische volgorde en vermijd positieve waarden. Een kop die na een update focus moet krijgen, kan -1 gebruiken zonder bij elke ronde door de pagina een stop te worden.

Controleer betekenis en gedrag samen

<div role="button" tabindex="0">Save</div>

Dit maakt een knoprol beschikbaar en krijgt focus, maar heeft nog steeds een script voor Enter en de spatiebalk, een actie en een zichtbare focusstijl nodig. Vervanging door <button type="button">Save</button> biedt ingebouwde toetsenbordactivering zonder die opnieuw te bouwen. ARIA alleen kan de interactie niet maken.

CSS kan de navigatie ook verstoren. Als de bronvolgorde logo, menu, zoeken en aanmeldlink is, kan CSS order: -1 de aanmeldlink als eerste tonen terwijl Tab die nog steeds als laatste bereikt. Verplaats inhoud in de HTML wanneer de leesvolgorde moet veranderen. WCAG 2.4.3 Focusvolgorde (A) vereist een volgorde die betekenis en bediening behoudt.

Verwijder vallen en verborgen stops

Test of de focus elk component met het toetsenbord kan verlaten. Een kaart of speler die focus accepteert maar geen uitgang via het toetsenbord biedt, veroorzaakt een toetsenbordval, verboden door 2.1.2 Geen toetsenbordval (A).

Een gesloten menu dat buiten beeld is geplaatst of opacity: 0 heeft gekregen, kan nog steeds focusbare links bevatten. Gebruik hidden, display: none of inert voor inhoud die niet beschikbaar mag zijn zolang die gesloten is. Houd een skiplink buiten beeld echter focusbaar: die heeft een bewuste regel die de link zichtbaar maakt zodra die focus krijgt.

De focus is de huidige positie van de toetsenbordgebruiker. Een zichtbare ring vertelt welk bedieningselement met Enter of de spatiebalk wordt bediend. De ring moet zichtbaar blijven tegen de pagina en het bedieningselement met focus moet in beeld blijven.

Houd een duidelijke indicator

Browsers bieden standaard een omtreklijn voor focus. Als je die met outline: none verwijdert, gaat een essentiële aanwijzing verloren, tenzij je een geschikte vervanging biedt. Gebruik :focus-visible om een ring te tonen wanneer de browser dat nuttig acht, onder meer bij toetsenbordnavigatie en tekstvelden:

:focus-visible {
  outline: 3px solid #1A73E8;
  outline-offset: 2px;
}

Het blauw heeft een contrast van 4,51:1 ten opzichte van wit. Controleer de werkelijke aangrenzende kleuren in het ontwerp; een ring die op wit werkt, kan wegvallen tegen een blauw vlak. WCAG 2.4.7 Focus zichtbaar (AA) vereist zichtbare toetsenbordfocus, terwijl 1.4.11 Contrast van niet-tekstuele content (AA) bij 3:1 geldt voor de visuele informatie die een aangepaste toestand aanduidt, waaronder een aangepaste focusindicator.

Een omtreklijn is een nuttige keuze voor contrastthema's van Windows. Geforceerde kleuren kunnen achtergronden vervangen en boxschaduwen verwijderen, terwijl omtreklijnen beschikbaar blijven. Een schaduw alleen kan dus verdwijnen in een modus waarop iemand vertrouwt.

Houd het bedieningselement met focus in beeld

Klevende kopgebieden, banners en chatknoppen kunnen de focus bedekken. Volgens 2.4.11 Focus niet bedekt (minimum) (AA) mag door de maker geplaatste inhoud de component met focus niet volledig verbergen. De hele component zichtbaar houden is gemakkelijker in gebruik; de eis dat geen deel verborgen is, hoort bij AAA.

Zorg bij een klevend kopgebied van 5rem hoog voor scrollruimte:

html { scroll-padding-top: 5rem; }

Doorloop daarna de echte pagina met Tab. Controleer beide richtingen en test wanneer er een cookiemelding aanwezig is. De CSS-regel is een uitgangspunt; die moet nog steeds werken met de werkelijke afmetingen van het kopgebied en de viewport van de pagina.

Geef ook aanwijzergebruikers ruimte

Grootte van het doelgebied (minimum), 2.5.8 (AA), vereist aanwijzerdoelen van minstens 24 bij 24 CSS-pixels, met uitzonderingen. Een kleiner doel kan voldoen als een cirkel met een diameter van 24 px en het doel als middelpunt geen ander doel of de cirkel van een ander klein doel snijdt. Links binnen een zin, niet aangepaste bedieningselementen waarvan de browser de grootte bepaalt en doelen met een gelijkwaardig bedieningselement op de pagina dat aan de eis voldoet, zijn ook uitgezonderd. Een essentiële of wettelijk vereiste presentatie kan eveneens uitgezonderd zijn.

Bij drie pictogramknoppen van 16 bij 16 px met 4 px tussenruimte zouden de cirkels overlappen. Door aan alle kanten 4 px binnenruimte toe te voegen, wordt elk doel 24 bij 24 px. Meet het aanklikbare gebied, niet alleen het pictogram dat erin is getekend.

Het doel van 44 bij 44 CSS-pixels in 2.5.5 en de grootte-eis voor het focusoppervlak in 2.4.13 zijn AAA-eisen. Het zijn nuttige verbeteringen, maar houd bij het melden van een bevinding hun niveau gescheiden van het AA-minimum.

Herhaalde menu's zouden mensen niet op elke pagina dezelfde route opnieuw moeten laten volgen. Een skiplink biedt een korte route naar de hoofdinhoud. Wanneer een interactie de pagina verandert, helpt bewuste omgang met de focus mensen ook om hun plaats te behouden.

Maak en test een skiplink

Plaats de skiplink vóór de herhaalde bedieningselementen in het kopgebied:

<a class="skip-link" href="#main">Skip to main content</a>
<main id="main" tabindex="-1">
  <h1>Order a birthday cake</h1>
</main>

De link verwijst naar het hoofdinhoudsgebied en tabindex="-1" helpt dat gebied focus te krijgen zonder een gewone tabstop toe te voegen. Navigatie via herkenningspunten van een schermlezer helpt de gebruikers daarvan; de skiplink helpt ook ziende toetsenbordgebruikers om herhaalde blokken te omzeilen volgens 2.4.1 Blokken omzeilen (A).

Houd de link beschikbaar voor het toetsenbord wanneer die visueel is weggestopt:

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; }

Gebruik geen display: none of visibility: hidden, want die verhinderen focus. Laad de pagina opnieuw, druk eenmaal op Tab en controleer of de link verschijnt. Druk op Enter en daarna opnieuw op Tab: de navigatie moet doorgaan bij de eerste link of het eerste bedieningselement van de hoofdinhoud, niet bij het menu in het kopgebied.

Geef na een verandering de focus een logische plek

Als een rij in de winkelwagen en de bijbehorende verwijderknop met focus samen verdwijnen, kan de focus terugvallen naar het begin van de pagina. Verplaats de focus bewust naar de verwijderknop van het volgende item of naar een kop van de winkelwagen met tabindex="-1". Kies een plek waar de taak verdergaat. Alleen naar een gebied scrollen garandeert niet dat de toetsenbordfocus daarheen is verplaatst.

Gebruik een ingebouwd modaal dialoogvenster

Een dialoogvenster dat met showModal() wordt geopend, verplaatst de focus naar binnen en maakt de rest van de pagina inert. Tab blijft binnen het venster zolang het open is; Escape sluit het. Bij het sluiten keert de focus normaal terug naar het element dat het venster opende, als dat nog bestaat.

<button type="button"
  onclick="document.getElementById('hours').showModal()">Opening hours</button>
<dialog id="hours" aria-labelledby="hours-title">
  <h2 id="hours-title">Opening hours</h2>
  <p>Tuesday to Saturday, 08:00–17:00.</p>
  <form method="dialog"><button>Close</button></form>
</dialog>

Het script van één regel vindt het dialoogvenster via de ID en opent het modaal. Het formulier in het dialoogvenster sluit het zonder een ander script. De kop levert de naam. Bij een zelfgebouwde bovenliggende laag moeten al deze interactieregels worden nagebouwd; de achtergrond donker laten lijken, voorkomt niet dat de toetsenbordfocus die bereikt.

Wacht op een bewuste actie

Focus krijgen mag geen nieuwe pagina openen of de context op een andere manier veranderen. Een selectie wijzigen mag dat ook niet onverwacht doen; gebruikers moeten vooraf worden geïnformeerd als dat gedrag optreedt. Een knop “Ga” na een bestemmingskeuze geeft mensen tijd om hun selectie te bekijken en te wijzigen voordat ze navigeren. Dit gedrag ondersteunt 3.2.1 Bij focus (A) en 3.2.2 Bij input (A).

Contrast meet hoe duidelijk informatie op de voorgrond afsteekt tegen de achtergrond. Een kleur die op het ene scherm leesbaar lijkt, kan moeilijk leesbaar zijn voor iemand met een visuele beperking of bij fel licht. Meet het kleurenpaar in plaats van het op het oog te beoordelen.

Pas het juiste minimum toe

Grote tekst betekent minstens 18 punt, gelijk aan 24 CSS-pixels, of minstens 14 punt vet, ongeveer 18,7 CSS-pixels vet. Een kop van 20 px in normaal gewicht heeft nog steeds 4,5:1 nodig. Plaatsaanduidingstekst, voettekst en tekst bij aanwijzen en focus zijn niet uitgezonderd van tekstcontrast. Voor logo's, inactieve bedieningselementen en bijkomstige of zuiver decoratieve tekst gelden uitzonderingen.

Begrijp de verhouding

Relatieve luminantie drukt helderheid uit op een schaal van 0 voor zwart tot 1 voor wit. Met de lichtere luminantie als L1 en de donkerdere als L2 is de verhouding:

De uitersten zijn 1:1 voor identieke kleuren en 21:1 voor zwart tegenover wit. Een contrastcontrole berekent de luminantie uit de kleurkanalen en vergelijkt de verhouding met de relevante drempel.

Voor grijs #767676 is elk kanaal hexadecimaal 76, oftewel 118. Deel door 255 om ongeveer 0,4627 te krijgen. Omdat dit groter is dan 0,04045, reken je het om naar lineair licht:

De drie kanalen zijn gelijk, dus hun gewogen luminantie is ook ongeveer 0,1812. Wit heeft luminantie 1. Als je tijdens de hele berekening de volledige precisie behoudt, krijg je 4,54:1, wat voldoet voor normale tekst. Gebruik een controle voor werkelijke kleurenparen, zodat afgeronde tussenwaarden geen invloed hebben op een uitslag dicht bij de drempel.

Rond een onvoldoende nooit af tot een voldoende

Grijs #777777 op wit geeft 4,48:1. Weergave op één decimaal als 4,5 zorgt er niet voor dat het voldoet. Evenzo geeft #949494 op wit 3,03:1 en voldoet het voor grote tekst; #959595 geeft 2,99:1 en voldoet niet voor grote tekst.

Wit op #0066CC geeft 5,57:1. Op amberkleurig #FFC107 geeft witte tekst slechts 1,63:1, terwijl zwart 12,88:1 geeft. Een heldere knopachtergrond kiezen vertelt je niet of de tekst licht of donker moet zijn.

Controleer grenzen en elke achtergrond

Een invoerveldrand die nodig is om het veld te herkennen, moet voldoen aan het contrast voor niet-tekstuele content. #CCCCCC tegenover wit geeft 1,61:1 en voldoet niet; #949494 geeft 3,03:1 en voldoet wel. Dezelfde regel van 3:1 geldt voor betekenisvolle pictogrammen, grafieklijnen en aangepaste focusindicatoren. Voor inactieve en niet aangepaste standaardbedieningselementen van de browser gelden uitzonderingen.

Tekst over een foto of kleurverloop moet voldoen op de zwakste plek erachter. Voeg een effen of voldoende ondoorzichtig vlak toe, of verplaats de tekst. Controleer de resulterende kleuren met ontwikkelaarstools of een contrastcontrole. WCAG 1.4.3 geldt voor tekst en 1.4.11 voor niet-tekstuele informatie; AAA-drempels voor tekst zijn hoger, namelijk 7:1 voor normale en 4,5:1 voor grote tekst.

Controleer onderdelen van een knop afzonderlijk

Stel dat een knop witte tekst van normale grootte op #0066CC heeft, op een witte pagina staat en een aangepaste focusring #CCCCCC gebruikt. Controleer elke relatie:

1. Het label tegenover de blauwe knop is 5,57:1, boven het tekstminimum van 4,5:1.
2. De blauwe knop tegenover de witte pagina is ook 5,57:1, dus de grens is te onderscheiden.
3. De lichtgrijze focusring tegenover de witte pagina is slechts 1,61:1. Die toestandsindicator voldoet niet, ook al voldoet het label wel.

Vervang de ring door een kleur die 3:1 haalt tegenover de aangrenzende achtergrond en meet opnieuw. Een meting voor het knoplabel meet niet ook elke grens of interactietoestand. Behandel de tekst, component en aangepaste toestand als afzonderlijke controles van kleurenparen.

Kleur kan aandacht trekken, maar mag niet de enige zichtbare aanwijzing voor betekenis zijn. Mensen kunnen een kleurzienstoornis hebben, grijstinten of contrastinstellingen gebruiken, of inhoud via een schermlezer horen zonder kleuraankondigingen. Combineer kleur met tekst, vormen, patronen of een andere duidelijke aanwijzing.

Houd twee controles gescheiden

Contrast gaat na of een voorgrond van de achtergrond te onderscheiden is. Gebruik van kleur, WCAG 1.4.1 (A), gaat na of de informatie begrijpelijk blijft zonder de kleur te herkennen. Een donkerrood label op wit kan aan het contrast voldoen en toch niet duidelijk maken welk veld een fout bevat.

Begin met de boodschap. Als de pagina zegt “Kies een groene optie”, geef dan elke optie ook een bruikbare naam. Als een rode stip betekent dat een winkel gesloten is, voeg dan “Nu gesloten” ernaast toe. De tekst geeft de status weer, terwijl de kleur mensen helpt die op te merken.

Houd links herkenbaar

De eenvoudigste manier om een link in een alinea aan te duiden is een onderstreping. Die geeft ook een aanwijzing wanneer de link en de omringende tekst in grijstinten worden gezien.

Een verschil met de omringende tekst dat alleen op kleur berust, heeft minstens 3:1 contrast tussen de twee tekstkleuren nodig en een extra aanwijzing, zoals een onderstreping, bij aanwijzen en focus. De linktekst moet ook voldoen aan tekstcontrast ten opzichte van de achtergrond. Dit zijn afzonderlijke vergelijkingen; blauw dat voldoet tegenover wit kan te veel lijken op de aangrenzende donkere alineatekst.

Leg fouten en verplichte velden uit

Toon bij een e-mailfout “Fout: voer een e-mailadres in volgens het formaat name@example.com” naast het veld. Een rode omtreklijn kan als extra aanwijzing blijven staan. De tekst duidt het probleem aan en vertelt de gebruiker hoe het kan worden opgelost, terwijl de code de tekst aan het veld koppelt.

Gebruik voor verplichte velden een label zoals “E-mailadres (verplicht)”. Een sterretje werkt ook wanneer aan het begin van het formulier wordt uitgelegd dat “* verplicht betekent”. Voeg het ingebouwde required-attribuut toe, zodat de verplichting beschikbaar is voor hulptechnologie en browservalidatie. Rode labeltekst alleen biedt geen voldoende zichtbare uitleg en ook geen programmatisch vastgelegde verplichting.

Geef grafische elementen een tweede manier om te communiceren

Een verkoopgrafiek met twee reeksen heeft meer nodig dan een rode en een groene lijn. Directe labels, verschillende lijnstijlen of patronen laten mensen elke reeks volgen zonder de kleur te herkennen. Gebruik deze aanwijzingen zowel in de grafiek als in de legenda, zodat ze overeenkomen.

Controleer de pagina met emulatie van grijstinten of een kleurzienstoornis in de ontwikkelaarstools. Inspecteer links in lopende tekst, fouten, verplichte velden, grafieken en beschikbaarheidsindicatoren. Vraag je af welke zichtbare aanwijzing voor elk onderscheid overblijft. Verdwijnt een onderscheid, voeg dan een aanwijzing toe die de betekenis vermeldt of uitbeeldt; alleen de verzadiging verhogen levert de ontbrekende informatie niet op.

Een pagina vergroten moet het gebruik gemakkelijker maken zonder bedieningselementen te verbergen of zinnen af te snijden. Mensen kunnen de hele pagina vergroten, alleen tekst vergroten of hun eigen tekstafstand toepassen. Flexibele lay-outs laten deze keuzes samenwerken.

Test tekstgrootte en herschikking

WCAG 1.4.4 Herschalen van tekst (AA) vereist dat tekst tot 200% kan worden vergroot zonder verlies van inhoud of functionaliteit. Browserzoom gebruikt Ctrl en plus op Windows of Cmd en plus op macOS. Test ook een grotere standaardlettergrootte, die tekst verandert zonder al het andere op dezelfde manier te vergroten.

WCAG 1.4.10 Herschikking (AA) vereist dat gewone inhoud werkt bij 320 CSS-pixels breed zonder in twee richtingen te scrollen. Een venster van 1280 CSS-pixels breed biedt bij 400% zoom die effectieve breedte. Alinea's moeten naar een smalle kolom teruglopen, met alle functies nog beschikbaar. Voor gegevenstabellen, kaarten en andere inhoud waarvan de betekenis twee dimensies nodig heeft, gelden uitzonderingen.

Laat de lay-out meegroeien met de tekst

Gebruik relatieve lettereenheden zoals rem en em, zodat tekst de standaardletterinstelling van de gebruiker volgt. Tekst in CSS-pixels reageert nog steeds op browserzoom, maar volgt die standaardinstelling niet op dezelfde manier. Flexibele containers en max-width laten regels teruglopen; breekpunten in em kunnen zich aanpassen als de tekst groeit.

Een vaste hoogte kan ongemerkt inhoud afsnijden:

/* Problem when larger text needs more space */
.card { height: 200px; overflow: hidden; }

/* Content can grow beyond the minimum */
.card { min-height: 200px; }

Laat de inhoud de hoogte bepalen. Stapel navigatie bij smalle breedtes of bied een toegankelijke uitklapbediening in plaats van links te verwijderen. Laat een te groot klevend kopgebied wegscrollen als het te veel van het bruikbare scherm inneemt.

Houd mobiel zoomen beschikbaar

Gebruik een viewportdeclaratie die de apparaatbreedte volgt:

<meta name="viewport" content="width=device-width, initial-scale=1">

Voeg geen maximum-scale=1 of user-scalable=no toe. Die proberen zoomen met een knijpbeweging te blokkeren, wat mensen met een visuele beperking nodig kunnen hebben. Sommige browsers negeren die beperkingen, maar gebruikers zouden niet afhankelijk moeten zijn van dat gedrag.

Pas de tekstafstand van de gebruiker toe

WCAG 1.4.12 Tekstafstand (AA) vereist dat geen inhoud verloren gaat of overlapt wanneer gebruikers de volgende afstanden instellen als veelvoud van de lettergrootte: de regelhoogte op 1,5 keer, de alinea-afstand op 2 keer, de letterafstand op 0,12 keer en de woordafstand op 0,16 keer. Dit zijn testinstellingen, geen verplichte standaardwaarden voor het ontwerp. Gebruik een hulpmiddel voor tekstafstand en controleer naast alinea's ook labels, kaarten, menu's en knoppen.

Een praktische controle combineert een teksttest op 200%, een herschikkingstest op 320 CSS-pixels en de aanpassing van de tekstafstand. Let op afgesneden regels, overlappende labels, horizontaal scrollen bij alinea's en verdwenen functies. Los het probleem op in de container of lay-out die het veroorzaakt; door de vergrote tekst van de gebruiker te verkleinen, neem je het gevraagde voordeel weg.

Een zichtbaar label vertelt iemand wat die moet invoeren en geeft een veld een toegankelijke naam. Groepslabels voegen de vraag toe die verschillende keuzes beantwoorden. De koppelingen moeten in HTML bestaan, ook wanneer labels en velden al dicht bij elkaar lijken te staan.

Koppel een label aan één bedieningselement

Een expliciet label gebruikt for om naar de unieke id van het bedieningselement te verwijzen:

<label for="email">Email address</label>
<input id="email" name="email" type="email">

De browser kan “Email address” aankondigen wanneer het veld focus krijgt. Klikken op de tekst geeft het veld ook focus en biedt gebruikers een groter doel. Het name-attribuut duidt verzonden gegevens aan; het vervangt niet de id die het label gebruikt.

Een impliciet label omsluit zijn invoerveld: <label>Email address <input type="email" name="email"></label>. Dit werkt wanneer beide in hetzelfde label-element passen. Bij gescheiden lay-outcontainers is de expliciete koppeling gemakkelijker te onderhouden.

Een plaatsaanduiding verdwijnt tijdens het typen en heeft vaak weinig contrast. Houd het label zichtbaar en plaats voorbeelden of aanwijzingen over het formaat in de buurt. “Veld 1” is technisch gezien een naam, maar beschrijft het doel niet. WCAG 2.4.6 Koppen en labels (AA) vereist beschrijvende tekst.

Houd de zichtbare woorden in de naam

Iemand die spraakbediening gebruikt, kan “klik op Verzenden” zeggen na het zien van een knop Verzenden. Als aria-label="Submit form" de tekst van die knop overschrijft, bevat de toegankelijke naam de zichtbare woorden niet meer. WCAG 2.5.3 Label in naam (A) vereist dat die woorden worden opgenomen, bij voorkeur aan het begin. Gebruik waar mogelijk de zichtbare tekst zelf: <button type="submit">Send message</button>.

Een afzonderlijk zoekveld kan een visueel verborgen label hebben als een nabijgelegen knop Zoeken het doel visueel duidelijk maakt. Verborgen labels zijn geen algemene vervanging voor zichtbare instructies in een heel formulier.

Groepeer keuzes onder hun vraag

<fieldset>
  <legend>Delivery method</legend>
  <input type="radio" id="pickup" name="delivery" value="pickup">
  <label for="pickup">Pick up in store</label>
  <input type="radio" id="courier" name="delivery" value="courier">
  <label for="courier">Courier delivery</label>
</fieldset>

Het groepsbijschrift bevat de vraag voor de groep; elk keuzerondje heeft nog steeds een eigen label nodig. Schermlezers kunnen de groepscontext samen met een optie aankondigen. Gebruik dezelfde name voor onderling uitsluitende keuzerondjes en korte groepsbijschriften die nuttig blijven wanneer ze worden herhaald. Samenhangende selectievakjes kunnen ook een fieldset en legend gebruiken.

Kies typen en controleer koppelingen

Gebruik email, tel, url en date voor de bijpassende gegevens. De typen email en URL bieden een formaatcontrole; telefoonvelden kunnen een geschikt mobiel toetsenbord aanbieden, maar valideren geen telefoonnummerformaten. Gebruik number voor aantallen zoals het aantal gasten, niet voor telefoon- of kaartnummers.

Klik op elk label om de koppeling te testen. Als het verkeerde veld focus krijgt, controleer dan op dubbele ID's of een for die niet overeenkomt. Inspecteer ook de berekende naam in de ontwikkelaarstools; alleen visuele nabijheid kan een label niet koppelen.

Instructies helpen het meest wanneer ze vóór een fout worden gegeven. Een goed formulier legt uit welke invoer wordt verwacht, laat zien wat verplicht is en ondersteunt de hulpmiddelen van de browser voor het invoeren van persoonlijke gegevens. Het voorkomt ook dat gebruikers onnodig werk moeten herhalen.

Koppel een toelichting zonder het label te vervangen

<label for="pw">Password (required)</label>
<input id="pw" type="password" required
       autocomplete="new-password" aria-describedby="pw-hint">
<p id="pw-hint">At least 12 characters.</p>

Het label geeft het veld een naam. De zichtbare alinea legt de eis uit en aria-describedby voegt die tekst toe als beschrijving. Schermlezers kunnen die na de naam aankondigen. Vermeld bij meerdere beschrijvingen hun ID's, gescheiden door spaties, zoals aria-describedby="pw-hint pw-error".

Markeer verplichte velden zichtbaar en met required. Je kunt “(verplicht)” schrijven of aan het begin van het formulier een sterretje uitleggen. Het ingebouwde required ondersteunt browservalidatie en hulptechnologie; het heeft geen extra aria-required="true" nodig.

Duid het doel van persoonlijke gegevens aan

Volgens 1.3.5 Identificeer het doel van de input (AA) hebben velden die gegevens van de gebruiker verzamelen passende autocomplete-tokens nodig. Voorbeelden zijn name, given-name, family-name, email, tel, street-address, postal-code, country-name en bday. Inlogvelden kunnen username en current-password gebruiken; een nieuw wachtwoord gebruikt new-password en een verificatiecode kan one-time-code gebruiken.

Met deze tokens kunnen browsers, wachtwoordmanagers en hulpmiddelen het doel van een veld herkennen. Gebruik het passende token voor de gebruiker van wie de gegevens worden ingevoerd. Als je het contactadres van een vriend markeert als het eigen e-mailadres van de gebruiker voor automatisch invullen, kunnen de verkeerde gegevens worden ingevuld.

Beperk wat gebruikers moeten onthouden en opnieuw invoeren

Sta plakken in wachtwoord- en verificatiecodevelden toe en ondersteun wachtwoordmanagers. WCAG 3.3.8 Toegankelijke authenticatie (minimum) (AA) staat cognitieve tests bij het inloggen alleen toe met een alternatief of hulp die aan de eisen voldoet, of met de genoemde uitzonderingen voor herkenning van voorwerpen of eigen inhoud. Plakken blokkeren vormt een belemmering wanneer gebruikers daardoor informatie moeten onthouden of overtypen en er geen alternatieve inlogroute is die aan de eisen voldoet.

Neem bij een bestelling met meerdere stappen eerder ingevoerde informatie mee naar volgende stappen. Een keuze “Factuuradres is hetzelfde als afleveradres” voorkomt opnieuw typen. WCAG 3.3.7 Overbodige invoer (A) staat uitzonderingen toe wanneer herhaling essentieel is, nodig is voor de veiligheid of de eerdere informatie niet meer geldig is.

Bied een voorzorgsmaatregel bij inzendingen met gevolgen

Een bestelling kan een financiële verplichting opleveren. Bied vóór de afronding een controlestap waarmee gebruikers gegevens kunnen verbeteren. Volgens 3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (AA) moeten relevante inzendingen ongedaan kunnen worden gemaakt, op fouten worden gecontroleerd met een mogelijkheid tot correctie, of worden nagekeken en bevestigd met een mogelijkheid tot correctie. Dit geldt ook voor het wijzigen of verwijderen van opgeslagen gegevens die gebruikers beheren en het indienen van toetsantwoorden.

Houd de lay-out van het formulier ook bij vergroting gemakkelijk te volgen: labels direct boven velden en één hoofdkolom verkleinen de afstand tussen een instructie en de plek waarop die van toepassing is.

Onderscheid formaat van persoonlijk doel

Het invoertype en het autocomplete-token beantwoorden verschillende vragen. Het type duidt het soort waarde aan en kan een formaatcontrole bieden. Het token duidt de persoonlijke gegevens van de gebruiker aan voor automatisch invullen:

<label for="your-email">Your email address (required)</label>
<input id="your-email" name="email" type="email"
       required autocomplete="email">
<label for="guest-email">Guest's email address</label>
<input id="guest-email" name="guest-email" type="email">

Beide velden accepteren e-mailadressen, maar alleen het eerste vraagt om het e-mailadres van de huidige gebruiker. Het tweede mag voor automatisch invullen niet worden gemarkeerd als het e-mailadres van die gebruiker. De zichtbare labels behouden het onderscheid voor mensen die de waarden zelf invoeren. Een token veranderen verandert niet wat het e-mailtype controleert.

Een foutmelding moet iemand helpen een fout te herstellen zonder al verricht werk te verliezen. Een statusbericht moet een verandering melden zonder iemand van diens plek weg te halen. Beide hebben zichtbare tekst en de juiste programmatische koppeling nodig.

Noem het probleem en een bruikbare oplossing

“Ongeldige invoer” biedt weinig hulp. “Fout: voer een e-mailadres in volgens het formaat name@example.com” geeft aan wat aandacht nodig heeft en stelt een oplossing voor. WCAG 3.3.1 Foutidentificatie (A) vereist dat ontdekte fouten in tekst worden beschreven; 3.3.3 Foutsuggestie (AA) vereist bekende oplossingen wanneer die de veiligheid of het doel van het formulier niet ondermijnen.

<label for="email">Email address</label>
<input id="email" type="email" aria-invalid="true"
       aria-describedby="email-error">
<p id="email-error">Error: Enter an email address in the format name@example.com</p>

Stel aria-invalid="true" pas in nadat je het veld hebt gecontroleerd en een fout hebt gevonden. Het attribuut meldt de ongeldige toestand; de beschrijving legt de reden uit. Een rode rand alleen biedt noch de tekstuele uitleg, noch de koppeling.

Help mensen meerdere fouten te vinden

Na verzending kan een lang formulier bovenaan een foutenoverzicht tonen. Geef het een kop zoals “Er zijn 2 problemen met je bestelling” en daarna links naar de betreffende velden. Maak het overzicht focusbaar met tabindex="-1" en laat het script er focus op zetten. Door “Fout: ” voor de paginatitel te zetten, help je ook de veranderde toestand van de pagina aan te duiden.

Houd veldmeldingen ook naast hun invoervelden en bewaar alles wat al is ingevoerd. Een link in het overzicht brengt iemand naar een veld; de uitleg bij het veld helpt tijdens het verbeteren. Door elk veld leeg te maken, dwing je gebruikers geslaagd werk te herhalen.

Ingebouwde validatieattributen zoals required, type="email" en minlength kunnen browsermeldingen opleveren. Een aangepast systeem kan novalidate gebruiken en eigen meldingen tonen. In beide gevallen hebben fouten tekst nodig die gebruikers kunnen vinden en aan het betreffende veld kunnen koppelen.

Kondig een verandering aan zonder de focus te verplaatsen

Een winkelwagen wordt vaak bijgewerkt terwijl de focus op de toevoegknop moet blijven. Gebruik een livegebied dat al in het document aanwezig is:

<p role="status" id="cart-status"></p>

Wanneer een item wordt toegevoegd, verandert een script de tekst ervan in “1 zuurdesembrood toegevoegd aan je winkelwagen”. role="status" is beleefd: de schermlezer kan eerst uitspreken voordat die de wijziging aankondigt. Dit ondersteunt 4.1.3 Statusberichten (AA).

Bewaar role="alert", een dwingende aankondiging, voor dringende berichten. Voortdurende onderbrekingen maken gewoon winkelen moeilijker. Voeg het lege gebied in voordat je de inhoud bijwerkt; het gebied en de melding tegelijk maken wordt in veel combinaties niet betrouwbaar aangekondigd. Houd de focus bij de taak voor gewone wijzigingen en verplaats die bewust in situaties zoals een foutenoverzicht dat de gebruiker moet bekijken.

ARIA voegt informatie toe aan de toegankelijkheidsboom wanneer HTML hulp nodig heeft om een naam, relatie of toestand uit te drukken. Het bouwt de interactie zelf niet. Controleer voordat je een attribuut toevoegt wat het ingebouwde element al biedt en wat daadwerkelijk ontbreekt.

Zie een rol als een belofte

WAI-ARIA staat voor Accessible Rich Internet Applications. Versie 1.2 werd in juni 2023 een W3C-aanbeveling. De rollen, toestanden en eigenschappen beïnvloeden wat hulptechnologieën te horen krijgen. Een rol zoals button belooft knopgedrag, maar maakt het element niet focusbaar en voegt geen toetsenbordactivering of vormgeving toe.

Een div met role="button" heeft nog steeds toetsenbordafhandeling en ondersteuning voor focus nodig. Een echte button biedt die al. Het principe “geen ARIA is beter dan slechte ARIA” uit de ARIA Authoring Practices Guide waarschuwt dat onjuiste informatie gebruikers kan misleiden over wat een bedieningselement doet.

Behoud de ingebouwde betekenis

Gebruik eerst ingebouwde elementen en attributen: nav, button, een selectievakje en het ingebouwde required. Herhaal geen impliciete rollen zoals role="main" op main of role="button" op button. Een nuttige uitzondering is role="list" op een lijst waarvan de verwijderde opsommingstekens de aankondigingen van VoiceOver beïnvloeden.

Vervang de betekenis van een kop niet door een knoprol. Nest er een knop in:

<h2>
  <button type="button" aria-expanded="false">Shipping</button>
</h2>

De kop verschijnt nog steeds in kopnavigatie en de knop maakt de actie beschikbaar. Het script moet de getoonde inhoud en de uitgeklapte toestand met elkaar laten overeenkomen.

Plaats aria-hidden="true" nooit op een focusbaar bedieningselement of een bovenliggend element dat er een bevat. De focus zou terecht kunnen komen op iets wat uit de toegankelijkheidsboom is verwijderd. role="presentation" en role="none" werken anders: ze verwijderen de semantiek, niet de inhoud. Browsers negeren die rollen op focusbare elementen, dus ze kunnen niet worden gebruikt om een werkende link in gewone tekst te veranderen.

Zoek de bron van een naam

Controleer voor de gewone bedieningselementen hier de naambronnen in deze volgorde van prioriteit:

1. aria-labelledby, dat via een ID naar tekst verwijst.
2. aria-label, dat een tekstreeks biedt.
3. De ingebouwde bron, zoals een label, knoptekst of alternatieve tekst van een afbeelding.
4. title, als laatste redmiddel waar van toepassing.

aria-describedby voegt een beschrijving toe na de naam; het stelt de naam niet in. Een overschrijving kan per ongeluk nuttige zichtbare tekst verbergen. <button aria-label="Close dialog">Cancel</button> wordt aangekondigd als “Close dialog”, hoewel de gebruiker “Cancel” ziet. Geef de voorkeur aan zichtbare tekst, of neem die aan het begin op van een uitgebreide naam als die nodig is.

Eenvoudige websites hebben vaak ARIA nodig voor namen van herhaalde herkenningspunten, pictogramknoppen, veldtoelichtingen en fouten, uitklapbedieningen, links naar de huidige pagina en live-updates. Een grote verzameling ARIA-attributen is geen maat voor kwaliteit. Inspecteer de berekende rol en naam en controleer met het toetsenbord het gedrag dat de rol belooft.

Volg concurrerende naambronnen

Bekijk een knop met meerdere naamgevende attributen:

<h2 id="options-title">Delivery options</h2>
<button type="button" aria-labelledby="options-title"
        aria-label="Choose delivery">Show pickup options</button>

Volg eerst aria-labelledby: de tekst waarnaar wordt verwezen levert “Delivery options”. Het aria-label en de zichtbare knoptekst hebben lagere prioriteit en krijgen geen voorrang. Alleen aria-label verwijderen laat daarom dezelfde berekende naam staan.

Om deze knop de naam “Show pickup options” te laten krijgen, verwijder je beide onnodige overschrijvingen. De knoprol blijft steeds hetzelfde; alleen de bron van de naam verandert. Inspecteer de berekende naam na elke wijziging, zodat je kunt zien welk attribuut het verschil veroorzaakte. Een beschrijving toevoegen zou de verkeerde naam niet herstellen, omdat een beschrijving een afzonderlijk stuk informatie is.

Een veranderende interface moet visueel en programmatisch hetzelfde vertellen. Als een paneel open is maar de knop nog steeds “ingeklapt” meldt, krijgt een schermlezergebruiker onjuiste informatie. Werk de toestand bij wanneer de interface verandert.

Houd een uitklapbediening synchroon

<button type="button" aria-expanded="false"
        aria-controls="main-menu">Menu</button>
<ul id="main-menu" hidden>
  <li><a href="/bread">Bread</a></li>
</ul>

Wanneer het menu opent, verwijdert het script hidden en stelt het aria-expanded van de knop in op true. Wanneer het menu sluit, zet het script hidden terug en stelt het de toestand in op false. De toestand hoort bij de knop die schakelt. aria-controls duidt het betreffende element aan; de ondersteuning verschilt, dus het kan de uitgeklapte toestand of het werkelijke verbergen niet vervangen.

Kies de toestand die bij het bedieningselement past

Geef bij de link naar de huidige pagina hetzelfde attribuut vorm in CSS, bijvoorbeeld met een vet lettertype en een onderrand op a[aria-current="page"]. Zo blijft de zichtbare markering gekoppeld aan de aangekondigde toestand. aria-selected hoort bij widgets zoals tabbladen en keuzelijstopties, niet bij gewone paginanavigatielinks.

Een schakelknop kan het label “Dempen” behouden en aria-pressed wisselen tussen false en true. Een ander geldig ontwerp verandert het label van een gewone actieknop tussen “Dempen” en “Dempen opheffen” zonder ingedrukte toestand. Combineer een veranderend actielabel niet met het patroon voor een schakeltoestand, want dat kan verwarrende aankondigingen opleveren zoals “Dempen opheffen, ingedrukt”.

Onderscheid verbergen van uitschakelen

aria-hidden="true" verwijdert een element en zijn afstammelingen uit de toegankelijkheidsboom, maar laat ze zichtbaar. Gebruik het voor decoratieve pictogrammen of overbodige visuele inhoud. Het stopt toegang met het toetsenbord niet. Gebruik hidden of display: none wanneer een gebied voor iedereen onbeschikbaar moet zijn.

Het ingebouwde disabled voorkomt gewone interactie met een ingebouwd bedieningselement. aria-disabled="true" meldt een niet-beschikbare toestand, maar blokkeert klikken of toetsenbordactivering niet. Als dat attribuut wordt gebruikt om een uitgeschakeld bedieningselement focusbaar te houden voor uitleg, moet het script de actie voorkomen. Geef bij ingebouwde invoervelden ook de voorkeur aan het ingebouwde checked en required.

Test beide richtingen

Open en sluit de uitklapbediening met het toetsenbord terwijl je de attributen in de ontwikkelaarstools bekijkt. Inspecteer de berekende toestand en luister naar de aankondiging. Een geslaagde visuele verandering alleen laat niet zien dat de toestand is bijgewerkt, en een veranderd attribuut alleen laat niet zien dat het paneel zichtbaar of bruikbaar is geworden.

Geautomatiseerde controles vinden snel veel codeproblemen op een weergegeven pagina. Gebruik hun resultaten om belemmeringen te vinden en oplossingen te controleren. Hun regels kunnen sommige relaties en waarden inspecteren, maar om te bepalen of inhoud begrijpelijk is, blijft een mens nodig.

Kies een controlehulpmiddel en inspecteer de bevindingen

Axe DevTools gebruikt de axe-core-engine. WAVE plaatst markeringen op de pagina, zodat bevindingen in hun context te zien zijn. Lighthouse in de ontwikkelaarstools van Chrome geeft een toegankelijkheidsscore op basis van een selectie van axe-core-controles. Accessibility Insights biedt een andere werkwijze voor testen. De W3C Markup Validation Service controleert HTML-problemen zoals dubbele ID's en niet-afgesloten elementen.

Afhankelijk van hun regels en de context kunnen hulpmiddelen ontbrekende alt-attributen, bedieningselementen zonder naam, ontbrekende veldlabels, laag tekstcontrast op effen achtergronden, ontbrekende paginataal en ongeldige ARIA ontdekken. Sommige problemen met kopniveaus verschijnen als waarschuwingen. Lees de uitleg bij de bevinding en inspecteer het aangeduide element.

Een waarschuwing of resultaat met “needs review” vraagt om een oordeel. Vetgedrukte tekst die als mogelijke kop is gemarkeerd, kan een echte sectietitel zijn die als alinea is geschreven, maar kan ook alleen een zin benadrukken. Onderzoek het doel voordat je de opmaakcode verandert.

Begrijp wat de scan niet kan beslissen

Een controlehulpmiddel kan alt="photo" zien zonder te weten dat het alternatief nutteloos is. Het kan niet betrouwbaar beoordelen of linktekst duidelijk is, ondertiteling correct is, de focusvolgorde logisch is of een foutmelding iemand helpt een fout te herstellen. Een visuele bovenliggende laag kan het toetsenbord op een manier vasthouden die de huidige scan niet ontdekt. Tekst over een foto vereist ook handmatige contrastcontrole.

Een score van 100 betekent dat de geteste regels geen fouten hebben gevonden. Het is geen oordeel dat de pagina aan WCAG voldoet. Blijf taken en betekenissen testen die deze regels niet kunnen beoordelen.

Test de toestanden die mensen gebruiken

Een scan onderzoekt de op dat moment weergegeven toestand. Voer controles uit op elke paginasjabloon en opnieuw met menu's en dialoogvensters open, na formulierfouten en bij smalle breedtes. Een gesloten component kan problemen verbergen die alleen tijdens gebruik verschijnen.

Stel dat een rapport voor een bakkerij een prominente hoofdafbeelding zonder alt, een nieuwsbriefveld zonder label en voettekst #999999 op wit vindt. Bepaal eerst of de afbeelding informeert of decoreert. Voeg een bruikbaar alternatief of alt="" toe, afhankelijk van het doel. Koppel het e-mailveld aan een zichtbaar label. Het kleurenpaar van de voettekst heeft 2,85:1 contrast; de tekstkleur vervangen door #595959 geeft 7,00:1 op wit.

Los oorzaken op en controleer resultaten

Geef belemmeringen prioriteit op basis van hun effect op de taak. Een toetsenbordval of verplicht bedieningselement zonder naam kan een bestelling volledig tegenhouden. Herstel een gedeeld veld of een gedeelde voettekstcomponent bij de bron, zodat elke pagina die deze gebruikt verbetert. Voer daarna de scan opnieuw uit in dezelfde toestand en herhaal de relevante handmatige test. Een lager aantal fouten is nuttig bewijs, maar de oplossing moet de gebruiker ook in staat stellen de taak af te maken.

Handmatige tests laten zien hoe een pagina zich gedraagt tijdens een echte taak. Combineer toetsenbordgebruik, vergrote weergaven, schermlezercontroles en rechtstreekse inspectie van de boom. Leg genoeg details vast zodat iemand anders een probleem kan reproduceren en de oplossing kan bevestigen.

Volg een toetsenbordtaak van begin tot eind

Leg de muis opzij. Begin in de adresbalk en doorloop de pagina met Tab. Bereik elke link en elk bedieningselement, gebruik waar passend Enter en de spatiebalk en keer de richting om met Shift+Tab. Controleer of de focus zichtbaar blijft en niet door een klevend gebied wordt bedekt.

Gebruik de skiplink, open en sluit menu's, sluit een dialoogvenster met Escape en controleer waar de focus terugkeert. Zoek naar onzichtbare stops in gesloten componenten en naar vallen in ingesloten spelers of kaarten. Schakel op een Mac toetsenbordnavigatie en volledige tabnavigatie in Safari in voordat je overgeslagen bedieningselementen als een paginafout beschouwt.

Vergroot en herschik de pagina

Test bij 200% vergroting zonder tekst of functionaliteit te verliezen. Gebruik daarna een venster van 1280 CSS-pixels breed bij 400% zoom, gelijk aan 320 CSS-pixels beschikbare breedte. Controleer alinea's op horizontaal scrollen, overlapping en afsnijding. Houd elke functie beschikbaar in de smalle lay-out. Pas de waarden voor tekstafstand toe met een hulpmiddel en inspecteer zowel bedieningselementen als hoofdtekst.

Luister naar de structuur en namen

NVDA op Windows gebruikt standaard Insert als NVDA-toets; Caps Lock is een optioneel alternatief. In leesmodus ga je met H langs koppen, met D langs herkenningspunten, met K langs links, met F langs velden, met T langs tabellen en met B langs knoppen. NVDA+F7 opent de elementenlijst. Tab gaat nog steeds langs interactieve bedieningselementen.

Op macOS schakelt Cmd+F5 VoiceOver in en uit. De VO-combinatietoetsen zijn Control+Option; VO+Pijl-rechts leest het volgende item voor en VO+U opent de rotor. Op de iPhone ga je met een veeg naar rechts naar het volgende VoiceOver-item. TalkBack biedt vergelijkbaar lezen met aanraakbediening op Android.

Luister naar een bruikbare paginatitel en een bruikbaar overzicht, duidelijke namen van bedieningselementen, juiste rollen, nuttige afbeeldingsalternatieven en begrijpelijke veldlabels. Bij de betreffende velden moeten de aanduiding dat ze verplicht zijn, toelichtingen en fouten beschikbaar zijn. Open een uitklapbediening en luister of de toestand verandert. Voeg een item toe en luister naar een statuswijziging zonder dat de focus verspringt.

Inspecteer, leg vast en test opnieuw

Het toegankelijkheidspaneel in Chrome en de toegankelijkheidsinspecteur in Firefox tonen berekende rollen, namen en toestanden. Ze helpen achterhalen waarom een label verkeerd is, nog voordat je een schermlezer gebruikt.

Een bruikbaar rapport noemt de locatie, stappen, het waargenomen gedrag, de getroffen gebruikers, het bijbehorende criterium en een voorgestelde oplossing. Bijvoorbeeld: “Nieuwsbriefveld in de voettekst: ga met Tab naar het invoerveld; het wordt zonder label aangekondigd. Schermlezergebruikers en gebruikers van spraakbediening kunnen het doel niet herkennen. Voeg een gekoppeld label E-mailadres toe; controleer 1.3.1, 3.3.2 en 4.1.2.”

Test opnieuw met de methode waarmee je het probleem vond. Veelgebruikte combinaties zijn NVDA met Firefox of Chrome, JAWS met Chrome en VoiceOver met Safari. Testen met mensen die dagelijks hulptechnologie gebruiken, kan belemmeringen aan het licht brengen die een ontwikkelaar bij incidenteel gebruik mist.

Maak een toestandsfout reproduceerbaar

Een rapport voor een uitklapbediening kan een volledige korte test vastleggen:

1. Gebruik op de broodpagina NVDA met Firefox en ga met Tab naar “Bezorgopties”.
2. Druk eenmaal op Enter. Het paneel wordt zichtbaar, maar de knop wordt nog steeds als ingeklapt aangekondigd.
3. Inspecteer de knop: aria-expanded is nog steeds false.

De getroffen gebruiker krijgt te horen dat het zichtbare paneel gesloten blijft. Leg 4.1.2 Naam, rol, waarde (A) vast en stel voor de toestand van de knop bij te werken wanneer het paneel verandert. Herhaal na de oplossing het openen en sluiten met dezelfde toetsen en combinatie. Controleer in beide richtingen of de zichtbaarheid van het paneel overeenkomt met de aangekondigde uitgeklapte toestand; alleen de aanvankelijke ingeklapte toestand inspecteren zou deze fout missen.