Een toegankelijke website

27 / 04

Tijdens het schrijven van mijn thesis ging het over de toegankelijkheid van overheidswebsites en -applicaties. Het leek mij interessant om een paar basisprincipes op te lijsten die van belang zijn voor de toegankelijkheid van een website. Deze zijn vooral gericht op mensen die een audiovisuele beperking hebben, maar het is in het belang van élke bezoeker om een toegankelijke website te hebben en toch even je tijd in de verdieping van dit onderwerp te steken.

Tekstalternatieven voor media

Het is belangrijk om niet alleen op foto’s te steunen in je blogpost. Als je iets anders dan tekst gebruikt, zorg ervoor dat je altijd een tekstuele ondersteuning biedt. Wat ik bijvoorbeeld bedoel is zorgen dat foto’s een alt-tekst hebben, zodat als de afbeelding niet getoond wordt, er wel een tekstje is van wat er op de foto stond. Dit is verder gemakkelijk voor mensen met een visuele beperking: zo weten ze dat er een foto staat en wat het voorstelt. Een derde reden om je foto’s een alt-tekst te geven is dat het beter is voor zoekmachine’s: zij kunnen zo beter foto’s vanop websites indexeren.

Een alt-tekst kan je aan je afbeelding op volgende manier meegeven:

<img src="plantenmeisjes.be" alt="illustratie van meisje met planten op de achtergrond">

In de nieuwe Gutenberg bewerker van WordPress kan je als je je afbeelding selecteert, heel gemakkelijk een alt-tag meegeven en dan kan je dit doen in plaats van HTML-code te gebruiken.

Links

Voor links zijn er een paar good practices in het achterhoofd te houden: als eerste, vermijd je best ‘lege’ urls. Soms, voor Javascript redenen, gebruiken mensen een anchor (guiltyyyyy) om zo gemakkelijk functies aan bepaalde items te geven. Je kan dit gemakkelijk vermijden door een klasse aan een bepaald stuk tekst, die je dan als soort button wilt laten functioneren, te geven en op die klasse volgende CSS-code zetten zodat je anchor gaat lijken op een url.

.klasseMetAnchor{
  cursor: pointer;
  text-decoration: underline;
}

Misschien zegt het bovenstaande je niet zo veel, maar volgende situatie ga je vast wel herkennen. Je bent iets aan het uitleggen in je tekst en plots wil je linken, bijvoorbeeld naar extra informatie. Het is voor mij nog steeds een gewoonte om te schrijven “je kan meer lezen hier“. Dit moet je dus proberen vermijden, want als een screenreader je tekst leest dan zegt de anchor tekst heel weinig. Beter is om te schrijven “op de website van ines kan je hier wat meer over lezen”. Het is meteen duidelijk naar welke site ik verwijs en wat ik kan gaan verwachten.

Een laatste dat je bij een link kan doen om het wat gebruiksvriendelijker te maken, is de link te laten openen in een nieuw tabblad of nieuw venster. Je hebt het vast al voorgehad: je bent een tekst aan het lezen, er stond een link in, je klikt en in hetzelfde scherm gaat de webpagina veranderen: je wilt dan terug, maar … waar zat ik nu net te lezen? Hoe moet je dit instellen? Dit kan je doen via volgende code toe te voegen:

<a href="website.html" target="_blank">Dit opent mijn site in een nieuwe tab of nieuw venster,
afhankelijk van de instellingen van je browser</a> 
voorbeeld contrast kleuren

Kleurgebruik

Het is van belang om kleuren te gebruiken die een sterk contrast hebben. Zoals je kan zien op de bovenstaande afbeelding is de grijze tekst amper leesbaar. Om te weten of je kleurgebruik contrastrijk genoeg is, kan je allemaal verschillende tools gebruiken waar je je tekstkleur en achtergrondkleur kan ingeven. Een voorbeeld van een tool is deze van webaim.

Naast genoeg contrast gebruiken, is het belangrijk rekening te houden met mensen die lijden aan kleurenblindheid. Ongeveer één op acht mannen en één op tweehonderd vrouwen lijden aan kleurenblindheid. Je vraagt je zeker af waarom je eigenlijk maar met ‘zo weinig’ mensen moet rekening houden? Wel, de kleurcombinaties waar je rekening mee gaat houden voor kleurenblindheid, zijn eigenlijk kleurcombinaties die beschouwd worden als goede “design principles“.

Volgende kleurcombinaties kan je beter vermijden:

  • Groen en rood
  • Groen en bruin
  • Blauw en paars
  • Groen en blauw
  • Licht groen en geel
  • Blauw en groen
  • Groen en grijs
  • Groen en zwart (dus mijn voorbeeld is eigenlijk niet zo goed 😉 )

Taal

Als laatste is je taalgebruik heel erg belangrijk. Vermijd ingewikkelde zinsconstructies: hoe helderder hoe beter. Ik vond een tijdje geleden een tweet, die lachte met het taalgebruik in de rechten, terug en ik vind dat dit wel een mooi voorbeeld is. Natuurlijk begrijp ik wat hier gezegd wordt, maar veel van mijn niet-rechten-vrienden moeten toch eens slikken. Waarom ingewikkelde zinnen, lastige woorden gebruiken terwijl je het eigenlijk simpel gezegd krijgt? Klaar en duidelijk kan voor iedereen maar een pluspunt zijn!

Door kleine aanpassingen op je website te doen, kan je voor sommige lezers een wereld van verschil maken


Dit zijn alvast enkele kleine puntjes waar je op kan letten als je bezig ben met een blog schrijven of website maken. Het kost een kleine moeite om hiermee bezig te zijn, maar het kan voor sommige lezers een groot verschil maken.

Bronnen

  1. Photo by Jeroen den Otter
  2. Colour Blindness, www.colourblindawareness.org (26 april 2019)
  3. How to Design for Color Blindness, www.usabilla.com, (26 april 2019)
  4. What is alt text, www.moz.com, (26 april 2019)
  5. Europese standaarden, ec.europa.eu, (27 april 2017)

© 2019 — madebyines

0 comments on this post

Wanneer je een reactie achterlaat, ga je akkoord met de opslag en verwerking van jouw gegevens door deze website. Deze gegevens worden niet aan derden verstrekt. Lees de disclaimer voor meer informatie