Hoe ontwerp je digitoegankelijk én esthetisch?

Als verantwoordelijk ontwerper zou je altijd oog moeten hebben voor de impact van je (digitale) product op de mensen die het gebruiken. Ervoor zorgen dat iedereen er volledig gebruik van kan maken, ongeacht hun vaardigheid, situatie of context, is daar een belangrijk onderdeel van. Maar los van de morele overweging is er ook een belangrijk commercieel gewin te behalen, iets dat mijn collega Boaz al aanstipte in zijn blog over WCAG: 4 makkelijke tips om je website digitoegankelijker te maken. Om te beginnen wordt je website niet alleen toegankelijker voor mensen met een beperking, je verbetert hiermee de snelheid en gebruiksvriendelijkheid voor álle gebruikers. Maar het grootste commerciële voordeel is dat je met het optimaliseren voor toegankelijkheid je ook optimaliseert voor het indexeren door zoekmachines, voor SEO! Door je online diensten toegankelijk te maken voor de 20% met functionele beperkingen word je dus beter gevonden en gebruikt door 100% van je doelgroep. (Lees meer over The Business Case for Digital Accessibility.)

Een belangrijk hulpmiddel voor ons werk zijn de Web Content Accessibility Guidelines (WCAG 2.0). Soms kunnen ze echter ontmoedigend werken en lijken de richtlijnen vooral je creativiteit te beperken. Maar wij zien ze liever als een uitdaging omdat we ervan overtuigd zijn dat toegankelijkheid niet te koste hoeft te gaan van goed ontwerp of innovatie. Dus in plaats van onszelf te beperken, proberen we juist een stap verder te gaan door met ons gevoel voor esthetiek onze producten niet alleen toegankelijk maar ook mooi te maken.

In de hoop je hiermee te inspireren, check hieronder wat voorbeelden van hoe we deze uitdaging aangaan.

Bij Unc Inc zien we toegankelijkheid als onderdeel van een veel breder onderwerp dat —  terecht —  veel aandacht krijgt: inclusiviteit. Om die reden beperken we onszelf ook niet tot het toegankelijk en bruikbaar maken van onze producten voor mensen met een functionele beperking. We kijken ook naar ouderen, mensen met een sociaal-economische achterstand, zelfs mensen met een slechte internetverbinding (zie bijvoorbeeld ons werk aan de internationale kenniscentra voor lepra en verwaarloosde tropische ziekten). We ontwikkelden zelfs een mobiele app die je zelf liet ervaren hoe het is om een handicap te hebben. In dit geval van de ParticipatieKliniek voor educatieve doeleinden om verpleegkundigen in hun verzorgingstehuizen te laten ervaren hoe het is om dement te zijn.

Volgens de World Health Organization (WHO) zijn er 200 miljoen mensen met een visuele beperking. Omdat veel van hen moeite hebben met het lezen van online tekst, is het zorgen voor voldoende contrast tussen de kleur van de tekst en de achtergrond een eenvoudige manier om slechtzienden te helpen.

Mijn favoriete tool om het kleurcontrast in mijn ontwerpen te checken, is Stark, een plugin voor Figma, Sketch en Adobe XD. Door twee 'layers' te selecteren kun je eenvoudig checken of het kleurcontrast tussen beide voldoende groot is. Zo niet dan doet de tool gelijk een suggestie om dit te verbeteren. Gemakkelijk en snel!

Mensen die kleurenblind zijn of een lage gezichtsscherpte hebben, zullen moeite hebben om je content te begrijpen als je alleen (of vooral) kleur gebruikt om iets belangrijks te communiceren, een actie te tonen of om een reactie te vragen. De beste manier om deze mensen te betrekken in je ontwerp is door kleur te combineren met een extra indicator als een patroon, label of beweging.

Als je bijvoorbeeld een fout wilt communiceren, vertrouw dan niet alleen op gekleurde tekst. Voeg een icoon toe om het meer context te geven. Als je meer complexe elementen maakt als tabellen en grafieken dan zullen deze moeilijker te begrijpen zijn als je alleen kleur gebruikt om data te onderscheiden. Mijn advies zou zijn om extra visuele aspecten te gebruiken om informatie te communiceren. Denk aan vormen, labels en gevarieerde afmetingen. Je kunt ook proberen om patronen te gebruiken in je vulkleuren om de verschillen meer zichtbaar te maken.

Het gebruik van 'placeholder teksten' als labels is een van de grootste fouten die wordt gemaakt in het ontwerp van formulieren. Desondanks is het behoorlijk populair geworden; een trend die voor mij soms ook aanlokkelijk is om op in te spelen. Placeholder tekst is normaliter echter grijs en heeft een laag contrast, wat het moeilijk leesbaar maakt. Beter laat je deze trend dus aan je voorbij gaan.

Omdat mensen soms kunnen vergeten wat ze aan het typen waren, helpt het evenmin dat de labels dan verdwenen zijn. Zorg dat mensen te allen tijde begrijpen wat ze moeten doen en schrijven in een formulier. Als ontwerpers beschrijvingen of aanwijzingen verbergen in hun formulieren offeren ze gebruiksvriendelijkheid op aan eenvoud.

Als ik formulieren ontwerp, zorg ik dat elk invoerveld een label erboven heeft, een placeholder als mogelijk, met een onderscheidend gekleurde streep eromheen. En omdat mensen van gewend zijn van boven naar beneden te lezen, 'stapel' ik elementen van een formulier als invoervelden, radio-buttons, vinkjes en keuzeschakelaars altijd verticaal.

'Headers' (kopteksten) stellen de hiërarchie vast van de content op een pagina. Ze geven de lezer een indicatie van waar de content begint en wat zijn functie is. Titels van verschillende lettergrootten helpen om de volgorde van de content te begrijpen.

Het hoogste niveau header (h1 tag) bijvoorbeeld, zou groter moeten zijn dan de header van een lager niveau (h2 tag). En de h2 header zou weer groter moeten zijn dan h3, enzovoorts. Het idee zal duidelijk zijn.

Een heldere hiërarchie met headers helpt de lezer de content te begrijpen en vertelt de browser welke content de pagina bevat en hoe deze gerenderd of behandeld moet worden. Daarnaast stelt het 'screen readers' — die door blinden worden gebruikt om te 'luisteren' naar een pagina — in staat om de content in de juiste volgorde te lezen. (Lees meer over semantische structuur door WebAIM.)

Browser laten standaard een omtrek zien van elementen die zijn geselecteerd, de zogenoemde focus indicators. Als je net als ik ben, vind je de standaard focus indicators waarschijnlijk lelijk en zul je geneigd zijn deze te verbergen. Mocht je de standaard stijl inderdaad verwijderen, zorg er dan wel voor dat je het vervangt door iets anders. Anders sluit je mensen uit die de eerder genoemde screen readers gebruiken, en mensen met beperkte mobiliteit of 'power users' die hun toetsenbord gebruiken als voornaamste middel om het web te navigeren.

De elementen die een focus state nodig hebben zijn tekstlinks, formuliervelden, knoppen en menu-links. Met een focus indicator laat je ze er simpelweg anders uitzien dan de omliggende elementen. Het is oké om een focus indicator te ontwerpen met je merkkleuren. Zorg er alleen wel voor dat 'state' duidelijk zichtbaar is en genoeg contrast heeft om zich te onderscheiden van omliggen elementen. (Verdiep je begrip van toegankelijke focus states via W3C Focus Visible.)

Met de feestdagen in aantocht willen we je nog wat extra tips cadeau doen waarvan we denken dat ze bijna even belangrijk zijn.

Neem toegankelijkheid op in je werkproces
Als je aan het ontwerpen of onderzoeken bent, verifieer dan je aannames over toegankelijkheid en benut elke mogelijkheid om jezelf te verbeteren.

Laat een audit op toegankelijkheid doen
Gebruik een audit dienst om vast te stellen of je product werkt met ondersteunende technologieën en voldoet aan de minimale eisen uit de WCAG 2.0 AA. Gebruik de resultaten van de audit om eventuele problemen te verhelpen en doe een volgende test om te zien of je erin bent geslaagd.

Voeg alternatieve tekst toe aan je beelden
Het is niet per se aan de designer maar als je meer wilt doen om de toegankelijkheid van je product te vergroten, beschrijf in het <alt> attribuut van het beeld dan wat er te zien is en hoe dit van belang is voor de boodschap.

You made it! Je hebt zojuist mijn vijf tips gelezen die je helpen om je designs meer inclusief te maken en even aantrekkelijk.

Bij Unc Inc blijven we onderzoeken hoe we toegankelijkheid nog meer onderdeel kunnen maken van ons ontwerpproces. Maar ook voor mezelf is het iets waarin ik me wil blijven verbeteren. Zoals ik aan het begin van dit blog al had uitgelegd, loont het de moeite om vele redenen. Daarom moedig ik jou en iedereen aan om je te verder te verdiepen in de richtlijnen, ze op te nemen in je werkproces en zo bij te dragen aan een toegankelijk en inclusief web. Laten we er allemaal naar streven om technologie te ontwikkelen die bruikbaar en beschikbaar is voor alle mensen ongeacht hun vermogens, economische situatie, leeftijd, opleiding of locatie door verantwoordelijkheid toe te voegen aan onze design skills.