Toegankelijkheid voor ontwerpers: inclusief visueel en interactieontwerp creëren

Een toegankelijke website begint met toegankelijk ontwerp. Veel van de meest voorkomende toegankelijkheidsfouten — onvoldoende kleurcontrast, onduidelijke navigatie, verwarrende lay-outs, ontbrekende focusindicatoren — ontstaan bij beslissingen die tijdens de ontwerpfase worden genomen. Tegen de tijd dat code wordt geschreven, zitten deze problemen er al in en vereist het oplossen ervan een herontwerp in plaats van een eenvoudige code-aanpassing.

Als ontwerper heeft u meer invloed op toegankelijkheid dan bijna iedereen anders in het team. De keuzes die u maakt over kleur, typografie, witruimte, navigatiepatronen en interactiemodellen bepalen of miljoenen gebruikers effectief met uw product kunnen omgaan.

Kleurcontrast

Onvoldoende kleurcontrast is een van de meest voorkomende toegankelijkheidsproblemen op het web. WCAG vereist een minimale contrastverhouding van 4,5:1 tussen tekst en de achtergrond voor tekst van normaal formaat, en 3:1 voor grote tekst (gedefinieerd als 18pt normaal of 14pt vetgedrukt). Op niveau AAA stijgt de vereiste naar 7:1 voor normale tekst en 4,5:1 voor grote tekst.

Deze verhoudingen bestaan omdat mensen met een visuele beperking, verouderende ogen of kleurenblindheid voldoende contrast nodig hebben om tekst van de achtergrond te onderscheiden. Lichtgrijze tekst op een witte achtergrond ziet er misschien elegant uit in een ontwerp-mockup, maar wordt onleesbaar voor een aanzienlijk percentage gebruikers.

Niet-tekstelementen hebben ook contrastvereisten. Gebruikersinterfacecomponenten — knoppen, formuliervelden, pictogrammen, focusindicatoren — en betekenisvolle grafische objecten moeten ten minste een contrastverhouding van 3:1 ten opzichte van aangrenzende kleuren behouden. Dit zorgt ervoor dat gebruikers interactieve elementen kunnen identificeren en informatieve afbeeldingen kunnen begrijpen.

Gebruik contrastcontroleertools gedurende uw hele ontwerpproces, niet alleen aan het einde. Tools zoals de WebAIM Contrast Checker of de Colour Contrast Analyser laten u verhoudingen verifiëren voordat u zich aan een kleurenpalet committeert.

Kleur als informatie

Kleur mag nooit het enige visuele middel zijn om informatie over te brengen. Als u rood gebruikt om fouten aan te geven en groen om succes aan te geven, kunnen kleurenblinde gebruikers mogelijk niet onderscheiden tussen de twee toestanden. Vul kleur altijd aan met extra indicatoren — pictogrammen, tekstlabels, patronen of onderstrepingen.

Dit geldt ook voor links. Als links binnen een tekstblok alleen door kleur worden onderscheiden, moeten ze een contrastverhouding van 3:1 ten opzichte van de omringende tekst hebben of worden aangevuld met een andere visuele indicator zoals een onderstreping.

Typografie en tekstgrootte

Alle tekst op uw website moet vergroot kunnen worden tot 200% zonder verlies van inhoud of functionaliteit. Dit betekent ontwerpen met flexibele, relatieve eenheden in plaats van vaste pixelgroottes, en ervoor zorgen dat uw lay-outs netjes meeschalen wanneer tekst wordt vergroot.

WCAG 2.2 bevat ook vereisten voor tekstafstand. Gebruikers moeten de regelhoogte kunnen aanpassen naar ten minste 1,5 keer de lettergrootte, alinea-afstand naar ten minste 2 keer de lettergrootte, letterafstand naar 0,12 keer de lettergrootte en woordafstand naar 0,16 keer de lettergrootte — zonder verlies van inhoud of functionaliteit.

Linkontwerp

Links moeten visueel te onderscheiden zijn van omringende tekst. Ze moeten beschrijvend en bondig zijn, zodat gebruikers weten wat ze zullen vinden wanneer ze de link volgen. Gebruik nooit "klik hier" of "lees meer" als linktekst zonder extra context, aangezien deze zinnen betekenisloos zijn voor schermlezergebruikers die via linklijsten navigeren.

Navigatie en consistentie

Navigatie moet consistent zijn op alle pagina's van uw site. Gebruikers die afhankelijk zijn van toetsenbordnavigatie of schermlezers bouwen een mentaal model van de structuur van uw site, en onverwachte veranderingen verstoren dat model. WCAG vereist dat navigatiemechanismen die op meerdere pagina's verschijnen elke keer in dezelfde relatieve volgorde staan, en dat componenten met dezelfde functionaliteit consistent worden geïdentificeerd.

Focusindicatoren

Wanneer een gebruiker met een toetsenbord door uw site navigeert, moet er een zichtbare indicator zijn die aangeeft welk element momenteel de focus heeft. Deze focusindicator moet duidelijk zichtbaar zijn — WCAG 2.2 vereist dat deze niet wordt verborgen door andere content (SC 2.4.11) en, op niveau AAA, dat de volledige focusindicator en het gefocuste component volledig zichtbaar zijn (SC 2.4.12).

Ontwerp focusindicatoren bewust. De standaard browser-outline is vaak onvoldoende of wordt verwijderd door CSS-resets. Ontwerp een aangepaste focusstijl die voldoende contrast heeft en visueel prominent is.

Aanraakdoelgrootte

Interactieve elementen moeten groot genoeg zijn om zonder moeite geactiveerd te kunnen worden. WCAG 2.2 vereist dat interactieve doelen ten minste 24×24 CSS pixels zijn (SC 2.5.8), inclusief eventuele witruimte rond het doel. Op niveau AAA stijgt de vereiste naar 44×44 pixels (SC 2.5.5). Dit is voordelig voor gebruikers met motorische beperkingen, tremoren of beperkte handigheid, evenals voor iedereen die een mobiel apparaat gebruikt in een hobbelige omgeving.

Formulierontwerp

Formulieren zijn een van de meest kritieke gebieden voor toegankelijk ontwerp. Elk formulierbesturingselement heeft een duidelijk zichtbaar label nodig dat de gebruiker vertelt welke informatie moet worden verstrekt. Foutmeldingen moeten specifiek en zichtbaar zijn en gepositioneerd bij het veld waarop ze betrekking hebben. Geef instructies waar nodig en vertrouw niet uitsluitend op plaatsaanduider-tekst als label — plaatsaanduider-tekst verdwijnt wanneer de gebruiker begint te typen en heeft vaak onvoldoende contrast.

Ontwerp voor foutpreventie. Sta gebruikers toe invoer te controleren en te corrigeren vóór verzending, vooral bij acties met aanzienlijke gevolgen zoals financiële transacties of juridische overeenkomsten. Wanneer fouten worden gedetecteerd, geef dan duidelijke suggesties over hoe ze op te lossen.

Beweging en animatie

Sommige gebruikers ervaren aanvallen, migraine of duizeligheid door geanimeerde of knipperende content. Niets op uw website mag meer dan drie keer per seconde knipperen. Bied bedieningselementen om content die beweegt, knippert of scrollt langer dan vijf seconden te pauzeren, stoppen of verbergen. Respecteer de "prefers-reduced-motion"-instelling van het besturingssysteem en bied alternatieven met verminderde beweging voor animaties.

Afbeeldingen van tekst

Vermijd het gebruik van afbeeldingen van tekst op uw website. Echte tekst kan worden vergroot, opnieuw opgemaakt en gelezen door hulptechnologieën. Afbeeldingen van tekst kunnen dat niet. De enige uitzonderingen zijn logo's en situaties waarin een bepaalde visuele weergave van tekst essentieel is voor de informatie die wordt overgebracht.

Toegankelijkheidschecklist voor ontwerpers

Voordat u een ontwerp overdraagt aan de ontwikkeling, verifieer: contrastverhoudingen voldoen aan de vereisten voor alle tekst en interactieve elementen; kleur is nooit de enige indicator van informatie; focustoestanden zijn ontworpen voor alle interactieve elementen; aanraakdoelen voldoen aan de minimale groottevereisten; navigatie is consistent op alle pagina's; fouttoestanden en -berichten zijn duidelijk ontworpen; tekst kan worden vergroot zonder lay-outs te breken; animaties respecteren gebruikersvoorkeuren; en alle niet-tekstuele content heeft geplande tekstalternatieven.