Beste praktijken voor toegankelijkheid (a11y)

Toegankelijkheid, vaak afgekort tot a11y, betekent dat je producten zo ontwerpt en bouwt dat iedereen ze kan gebruiken, ongeacht diens mogelijkheden.

• Zo kunnen mensen met een beperking je componenten voor gebruikersinterfaces waarnemen, begrijpen, gebruiken en ermee navigeren.
• Dit geldt onder andere voor gebruikers met visuele, auditieve, motorische en cognitieve beperkingen.
• Toegankelijke componenten zijn gunstig voor alle gebruikers en verbeteren de algemene gebruiksvriendelijkheid.

Als je toegankelijkheid negeert, sluit je mogelijk een aanzienlijk deel van je potentiële gebruikers uit. Naast ethische overwegingen zijn er ook sterke praktische en wettelijke redenen:

• Groter bereik: bereik wereldwijd meer gebruikers.
• Betere SEO: veel a11y-praktijken sluiten aan bij goede SEO.
• Wettelijke naleving: voorkom mogelijke rechtszaken en houd je aan wetten zoals de ADA.
• Betere gebruikerservaring voor iedereen: functies zoals navigatie met het toetsenbord en duidelijk contrast helpen iedereen.

De Web Content Accessibility Guidelines (WCAG) zijn de internationale standaard voor toegankelijkheid op het web, ontwikkeld door het W3C.

WCAG is opgebouwd rond vier hoofdprincipes, die vaak worden onthouden met het acroniem POUR:

• Waarneembaar: informatie moet worden aangeboden op manieren die gebruikers kunnen waarnemen.
• Bedienbaar: componenten van de interface en navigatie moeten bedienbaar zijn.
• Begrijpelijk: informatie en de werking van de gebruikersinterface moeten begrijpelijk zijn.
• Robuust: inhoud moet robuust genoeg zijn om betrouwbaar te worden geïnterpreteerd door allerlei gebruikersprogramma's, waaronder ondersteunende technologieën.

Het gebruik van de juiste HTML-elementen is de belangrijkste basisstap voor toegankelijkheid. Semantische HTML geeft betekenis aan inhoud, zodat ondersteunende technologieën deze kunnen begrijpen.

Gebruik bijvoorbeeld een <button> voor een knop, en niet een <div> die zo is opgemaakt dat deze eruitziet als een knop. Zo krijgt de knop ingebouwde toetsenbordinteractie en rollen.

Probeer dit voorbeeld uit te voeren:

Soms is standaard-HTML niet voldoende om de volledige betekenis of status van een complex component van een gebruikersinterface over te brengen. Daarvoor is er WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications).

ARIA-attributen geven ondersteunende technologieën aanvullende semantische informatie, maar veranderen niet hoe een element eruitziet of zich gedraagt voor ziende gebruikers.

• Rollen: bepalen het type element van de gebruikersinterface (bijvoorbeeld role="alert", role="navigation").
• Statussen: beschrijven de huidige toestand van een element (bijvoorbeeld aria-expanded="true", aria-checked="false").
• Eigenschappen: geven een element attributen (bijvoorbeeld aria-labelledby="heading").

Het attribuut aria-label is essentieel om een toegankelijke naam te geven aan elementen die anders geen naam zouden hebben, of waarvan het visuele label niet voldoende is.

Het wordt vaak gebruikt voor knoppen met alleen een pictogram, of wanneer het doel van een knop niet duidelijk wordt uit alleen de zichtbare tekst.

Probeer dit voorbeeld uit te voeren:

Veel gebruikers, onder wie mensen met motorische beperkingen en blinde mensen, navigeren alleen met een toetsenbord door websites. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord.

• Tabvolgorde: elementen moeten in een logische volgorde kunnen worden doorlopen met de toets Tab.
• Focusindicatoren: zorg ervoor dat het element met focus duidelijk zichtbaar is, bijvoorbeeld met een omlijning.
• Interactieve elementen: knoppen, links en formulierelementen moeten bedienbaar zijn met Enter of Space.
• tabindex: gebruik tabindex="0" voor elementen die van nature geen focus kunnen krijgen, maar dat wel moeten kunnen, en tabindex="-1" om elementen programmatisch focusbaar te maken, maar niet via de tabtoets. Vermijd tabindex-waarden groter dan 0.

Voldoende kleurcontrast tussen tekst en de achtergrond is essentieel voor gebruikers met een beperkt gezichtsvermogen of kleurenblindheid. WCAG beveelt specifieke contrastverhoudingen aan:

• Normale tekst: een contrastverhouding van minimaal 4.5:1.
• Grote tekst (18pt/24px of 14pt/18.66px vet): een contrastverhouding van minimaal 3:1.
• Componenten van de gebruikersinterface/grafische objecten: een contrastverhouding van minimaal 3:1 ten opzichte van aangrenzende kleuren.

Gebruik online contrastcheckers of ontwikkelaarstools van je browser om je kleurkeuzes te controleren.

Afbeeldingen bevatten visuele informatie, maar schermlezers kunnen ze niet 'zien'. Het attribuut alt geeft een tekstuele beschrijving van een afbeelding.

• Beschrijvende alt: beschrijf bij informatieve afbeeldingen de inhoud en functie.
• Lege alt (alt=""): gebruik dit voor puur decoratieve afbeeldingen die geen essentiële informatie overbrengen.
• Vermijd herhaling: begin niet met "Afbeelding van..." als dat al duidelijk is.

Probeer dit voorbeeld uit te voeren:

In deze les hebben we de belangrijkste aspecten van het bouwen van toegankelijke componenten voor gebruikersinterfaces verkend. We hebben geleerd dat a11y ervoor zorgt dat iedereen je producten kan gebruiken, volgens de principes van WCAG.

• Semantische HTML vormt de basis.
• ARIA-attributen verbeteren de semantiek van complexe componenten.
• Navigatie met het toetsenbord is essentieel voor bedienbaarheid.
• Kleurcontrast zorgt voor leesbaarheid.
• Alternatieve tekst beschrijft afbeeldingen voor schermlezers.

Door deze best practices toe te passen, creëer je een inclusievere en robuustere gebruikerservaring voor iedereen.