Wat ze je op school niet leren over een toegankelijk webontwerp
Stagiaire Amelie volgde samen met alle Statik'ers een technische opleiding van Anysurfer om toegankelijkere websites te ontwerpen en implementeren. Ze was zo enthousiast dat ze deze tips & tricks graag met jullie deelt. En wie zijn wij om haar tegen te houden?
Ik ben Amelie, studente Interactive Multimedia Design aan Thomas More, en op dit moment ook al een tweetal maanden gelukkige stagiaire bij Statik. Samen met mijn collega’s van het analyseteam help ik websites mee ontwerpen en vormgeven, met veel aandacht voor gebruiksvriendelijkheid, een duidelijke informatiearchitectuur en toegankelijkheid.
Omdat webtoegankelijkheid niet uitgebreid aan bod kwam tijdens onze opleiding, had ik er tot nu toe nog niet heel veel over gehoord. Maar gelukkig is daar sinds kort verandering in gekomen: een paar weken geleden volgden we met alle Statik’ers twee trainings bij AnySurfer. Die maakten toch wel wat indruk op me. Dus besloot ik mijn steentje bij te dragen om de boodschap van een toegankelijk internet mee te helpen verspreiden.
Any-wat?
AnySurfer is een organisatie die de digitale wereld toegankelijker wil maken. Toegankelijk voor iedereen, maar vooral voor mensen met een beperking—volgens de WHO zo’n 15% procent van de wereldbevolking. Om zoveel mogelijk mensen te overtuigen van het belang van een toegankelijk web, organiseert AnySurfer geregeld opleidingen voor bedrijven en organisaties die benieuwd zijn naar hoe je als designer, developer of zelfs content manager met het onderwerp aan de slag kan gaan.
In een vandaag al redelijk ver verleden startte AnySurfer ooit als BlindSurfer, een project van Blindenzorg Licht en Liefde vzw, waarbij alle aandacht uitging naar manieren en richtlijnen om websites beter te ontwerpen voor blinden en slechtzienden. Intussen werd de focus uitgebreid naar andere soorten beperkingen, en is het doel in feite een vlotte gebruikerservaring voor iedereen.
Meer weten over Anysurfer?
Collega Annelies schreef al eens over deze organisatie en Statik als erkend bouwer. Interessante lectuur!
Basisprincipes voor een toegankelijk webontwerp
Als je je website zo gebruiksvriendelijk mogelijk wil maken, houd je best rekening met een aantal basisprincipes. Tijdens de twee trainingen werden deze basisprincipes verdeeld onder vier grote types van beperkingen, die elk op een andere manier onze aandacht verdienen. Ik zet ze voor jullie even op een rijtje.
Visuele beperkingen
Voor wie een visuele beperking heeft en dus op een bepaalde manier minder goed ziet, is het vooral belangrijk om het gebruik van kleuren en afbeeldingen onder de loep te nemen. Let er dus op dat je in je ontwerp kleur nooit als enige factor gebruikt om informatie mee te geven aan een lezer of gebruiker. Je weet immers niet of die laatste wel ziet wat jij ziet. Wat je best doet als je kleur wil inzetten om een bepaalde boodschap over te brengen, is daarnaast ook een alternatieve informatiebron toevoegen.
Het klassieke spelletje Uno lost dit bijvoorbeeld creatief op in de ColorADD-versie van het spel, door een specifiek icoontje per kleur te gebruiken. Mensen die het blauw, rood, groen of geel niet kunnen onderscheiden, kunnen de betekenis van elke kaart dus altijd op een andere manier afleiden.
Als ontwerper houd je best in het achterhoofd dat sommige personen je website bezoeken met behulp van een screenreader: elk element van een pagina wordt dan voorgelezen—niet alleen teksten, maar ook navigaties, lijsten en afbeeldingen. Daarom is het belangrijk dat je, wanneer je als ontwerper of content manager afbeeldingen gebruikt, naast het beeld altijd een tekstueel alternatief voorziet, een beknopte beschrijving dus. Dat geldt vooral als de beelden of afbeeldingen een informatieve waarde hebben, en is dus niet bij elke foto of afbeelding nodig. Voor decoratieve afbeeldingen doe je dit best niet, omdat het niet altijd een meerwaarde is dat deze worden voorgelezen.
Maar stel je eens voor dat je helemaal niets kan zien. Blinden moeten natuurlijk ook je website kunnen gebruiken. Hiervoor geldt natuurlijk het bovenstaande over foto’s en afbeeldingen. Maar voor video gebruik je best volledige audiodescriptie of voorzie je telkens de volledige tekst als beschrijving onder een video.
Cognitieve beperkingen
Mensen met een cognitieve beperking hebben het vooral moeilijk bij het inhoudelijke deel van een website: het begrijpen van complexe informatie en ingewikkelde teksten. Voor deze groep is het vooral belangrijk dat je zo weinig mogelijk lange, doorlopende teksten schrijft. Tussentitels, korte paragrafen en vetgedrukte kernwoorden gebruiken is dus de boodschap. Er zijn 3 parameters om een tekst zo lees- en scanbaar mogelijk te maken: regellengte, regelhoogte en lettergrootte. Aan de hand van dit spelletje kan je oefenen wat de perfecte verhoudingen tussen die 3 zijn. 86/100 is mijn hoogste score tot nu toe. Who can beat me?
Ook op taalgebruik dien je goed te letten. Wanneer teksten te moeilijk geschreven zijn en niet gericht zijn op een bredere doelgroep, haken veel mensen af. Of dat een probleem is, hangt natuurlijk af van wat je met je website wil bereiken. Doorgaans wil je toch dat je boodschap voor zoveel mogelijk mensen verstaanbaar en duidelijk is. Gebruik dus klare taal en vermijd vakjargon en moeilijke woorden. Mensen moeten zonder al te veel nadenken een tekst kunnen begrijpen. Maak alles zo eenvoudig en intuïtief mogelijk voor de gebruiker. Ik schrijf hier toch ook niet in Limburgs dialect 😉.
Motorische beperkingen
Omdat veel mensen met een motorische beperking, zoals de ziekte van Parkinson, niet dezelfde precisie hebben als ons, voeg je best een aantal “rustplaatsen” in. Hiermee bedoel ik geen zetel of bed, maar wel voldoende spatie laten tussen verschillende elementen van je website. Ook een ‘card’ (denk aan een overzichtsblokje van een artikel op een nieuwssite) moet volledig aanklikbaar zijn, dus niet enkel de link die in dat blokje staat. Dit hebben we uiteraard allemaal toegepast op de website van de Vlaamse Parkinson Liga.
Een grote groep van personen met een motorische beperking maakt ook gebruik van spraakcommando’s, wanneer het gebruiken van muis of toetsenbord fysiek onmogelijk is. Hier worden elementen op een website aangesproken door voorgeprogrammeerde commando’s te gebruiken, zoals click, scroll… Je gebruikt dus best labels bij alle iconen en andere elementen die aanklikbaar zijn zodat deze makkelijk aanspreekbaar zijn.
Geef ook de gebruiker telkens voldoende tijd om taken op je website uit te voeren. Een gebruiker die met switch control navigeert door de website heeft meer tijd nodig dan een andere gebruiker. Met switch control of schakelbediening kan je 'schakelaars' gebruiken voor het selecteren van, tikken op of slepen van onderdelen, om te typen en zelfs om te tekenen uit de vrije hand. Je gebruikt een schakelaar om een onderdeel op het scherm te selecteren en om daarna een actie te kiezen.
De positionering van elementen en de website besturen zonder muis staan hier dus centraal. Een goede manier om dit te testen is proberen navigeren met de tab-toets doorheen de website. De link of het element dat geselecteerd is, zou aan de hand van een visueel gegeven duidelijk moeten zijn.
Auditieve beperkingen
Als laatste in het rijtje kwamen de personen met een auditieve beperking aan bod, doven en slechthorenden dus. Hier werd aangehaald hoe je een video of audio zo toegankelijk mogelijk maakt. Bij video voorzie je voor slechthorenden best ondertiteling zodat ze toch alle informatie meekrijgen. Er kan ook gebruik gemaakt worden van closed captioning om nog vollediger te zijn. Het verschil is dat ondertitels enkel tonen wat er gezegd wordt, terwijl bij captioning ook getoond wordt wie er aan het woord is, bijvoorbeeld als er een belangrijk geluid of muziek te horen is.
Tools en technieken
Doorheen de opleiding kwamen ook een paar leuke tools en technieken aan bod die websites kunnen testen op vlak van toegankelijkheid. Deze heb ik eens losgelaten op de website van Statik. Mijn conclusie? Statik heeft een zeer toegankelijke website. Alle contrasten zitten goed, enkel die van de buttons kan net ietsje beter (score 3,9). Ik heb alvast gevraagd aan onze front end developer om hier eens naar te kijken.
Ik ben nog wat verder gaan kijken binnen de Statikwebsite. Via de tab-toets is ook alles bereikbaar. Goed bezig Statik! Alle afbeeldingen zijn ook voorzien van een alt-attribuut. Voor decoratieve afbeeldingen is dat zelfs niet per se nodig. De iconen zijn voorzien van een 'visuallyhidden' tekst. Deze worden voorgelezen als het nodig is, dus ook dat is dik in orde. Grote pluim voor het team van Statik!
Zeker onthouden hé
Mijn boodschap dus aan die iedereen bezig is met interface design en ontwerpen in de brede zin: hou rekening met een aantal basisprincipes op vlak van toegankelijkheid, en je maakt van het wereldwijde web een betere plek!
Wil je de webtoegankelijkheid van je website ook eens onder de loep nemen?
Onze experts laten graag hun toolkit los op je website om de pijnpunten op vlak van toegankelijkheid bloot te leggen en op te lossen.
Wie is Amelie?
Volgende blogpost
Plant een boom voor jouw coronaheld in het Heldenbos
Wat als je je coronaheld kon eren met een blijvend en levend monument? In het Heldenbos kan je een boom planten voor jouw zorgdrager. Zo zeg je niet alleen 'bedankt, merci!', maar zorg je ook voor meer groen in Vlaanderen.