Een toegankelijke website: 7 tips die je meteen kan toepassen

Webtoegankelijkheid wil zeggen dat je website toegankelijk en bruikbaar zijn voor iedereen. Het gaat daarbij niet over toegang tot het internet, wel om de bruikbaarheid van online informatie en diensten voor mensen met een functiebeperking.

Die beperkingen moet je ruim zien. Denk aan mensen met een visuele beperking, maar ook slechthorenden, mensen met een leesbeperking, iemand die (tijdelijk) geen computermuis kan bedienen en anderstaligen.

Het basisidee is eenvoudig: zorg voor een website waarop iedereen een oplossing of informatie kan vinden. Hieronder hebben we 7 tips verzameld waarmee je je website toegankelijk kan maken, gevolgd door enkele handige extra’s.

Tip #1: Contrastrijke pagina’s

Bezoekers met een visuele beperking (denk ook aan kleurenblindheid) kunnen je teksten moeilijk lezen wanneer er te weinig contrast is tussen de voor- en achtergrond. Zonder voldoende contrast, worden ook knoppen of illustraties moeilijk te zien.

Combinaties zoals een (licht)grijze tekst op een witte achtergrond, of blauwe tekst op een rode achtergrond kies je beter niet. Let goed op een contrastrijk kleurenpalet. Zit je nog in de ontwerpfase van je (nieuwe) website? Neem deze tip dan meteen mee op in je plan bij het kiezen van kleuren.

Op toptal.com kan je testen hoe je website eruitziet voor verschillende varianten van kleurenblindheid. Via Tanaguru kan je het contrast tussen 2 kleuren gratis meten.

Tip #2: Alt-teksten voor afbeeldingen

Mensen die slechtziend of blind zijn, zien je afbeeldingen niet. Voeg daarom bij elke afbeelding ook een beschrijving toe die duidelijk vertelt wat er op de afbeelding te zien is. Screenreaders kunnen die tekst dan voorlezen.

Een duidelijke beschrijving betekent eigenlijk een volledige beschrijving. Wanneer je een foto toevoegt van iemand die een smartphone vastheeft met een voorbeeld van je app, is ‘smartphone’ niet voldoende. In plaats daarvan voeg je een beschrijving toe zoals ‘Smartphonescherm waarop het startscherm van de planning-app van Google te zien is’.

Een handig extraatje: alt-teksten voor afbeeldingen hebben ook waarde voor SEO, omdat ze ook aan zoekmachines vertellen wat op een afbeelding te zien is.

Tip #3: Kies voor links met betekenis

Een link moet altijd vertellen waar hij je naartoe stuurt. Nog te vaak worden links onder tekst zoals ‘klik hier’ gezet, maar bezoekers weten daar eigenlijk niets mee.

Hoe pak je het dan wel goed aan? Een link in een tekst plaats je best onder een goed stuk van die tekst. ‘Bekijk alle hostingpakketten’ is veel duidelijker dan ‘klik hier voor onze hosting’. Hetzelfde geldt ook voor links in een knop. Vermijd ‘klik hier’, ‘ontdek nu’ of ‘lees meer’ en ga in de plaats voor ‘bekijk alle hostingpakketten’ of ‘ontdek alle hostingpakketten’.

Een linktekst moet altijd duidelijk maken wat de handeling is en op welke pagina je bezoeker terechtkomt.

Tip #4: Toon welk onderdeel actief is

Sommige bezoekers kunnen geen computermuis gebruiken. Ze navigeren dan op je website via de tab- en entertoets. De tab-toets dient om naar andere elementen op je website te navigeren, met de entertoets volg je een link.

Let op dat je bezoekers altijd goed zien bij welk onderdeel ze zich bevinden. De beste manier om dat te doen is met een lijntje of kader rond de link die op dat moment actief is. Hieronder zie je een voorbeeld van de website van DNS Belgium. Het actieve onderdeel (‘Veilig internet’) krijgt een zwart kader, zodat het voor toetsenbordgebruikers duidelijk is waar ze zich bevinden.

Op de website van DNS Belgium zie je duidelijk welk element actief is.

Tip #5: Ondertiteling bij video

Op je website moet je er rekening mee houden dat niet iedereen de audio van video’s kan horen. Ondertiteling is daarvoor de oplossing. En die voeg je best ook handmatig toe.

YouTube biedt vandaag de mogelijkheid automatisch ondertiteling toe te voegen. Dat gebeurt via spraakherkenning. Meestal is het resultaat een ondermaatse ondertiteling. Daarnaast ontbreekt ook ondertiteling voor doven en slechthorenden waarmee geluidseffecten, lachen en andere zaken omschreven worden. Kortom: voeg zelf goede ondertiteling toe aan de video’s op je website.

Tip #6: Schrijf tekst die iedereen begrijpt

Ga je aan de slag met tekst voor je website, sta dan ook goed stil bij de leesbaarheid van je content. Die wordt bepaald door het lettertype, de lettergrootte en de regelafstand, maar ook door het gebruik van paragrafen, woordgebruik en tussentitels (zie daarvoor tip #7).

De taal die je hanteert in blogposts of op productpagina’s moet eenvoudig zijn. Vermijd daarom overbodige adjectieven, moeilijke synoniemen of vakjargon. Liever heb je duidelijke, korte zinnen die meteen to the point zijn.

Ook irrelevante elementen in en rond je teksten maken het alleen moeilijker. Op de website deathtobullshit.com krijg je een goed voorbeeld van hoe het (niet) moet. Bij je eerste bezoek krijg je een duidelijke tekst waar je vlot doorheen leest. Klik je op de knop ‘turn on the bullshit’, merk je meteen wat het effect is van een overdosis extra elementen of aandachtstrekkers.

Tip #7: Structuur in koppen en pagina’s

In onze vorige tip hebben we het al even genoemd: koptitels en subtitels bevorderen de leesbaarheid van je content. Die titelniveaus worden in html gemarkeerd met h1, h2, h3 en verder.

Zet je die koppen goed in, dan krijg je een duidelijke structuur in je teksten. Vergelijk het even met een boek: de titel vooraan is de h1-titel, de verschillende hoofdstukken zijn h2-titels, de rubrieken per hoofdstuk h3- en misschien nog h4-titels. Op je website helpen titels mensen snel te begrijpen welke informatie de belangrijkste is.

Bezoekers die een screenreader gebruiken, hebben veel baat bij duidelijke (tussen)titels. De software helpt bezoekers met een beperking sneller naar de tussenkoppen te springen waar ze informatie willen vinden. Plaats je tussenkoppen op een goede manier, dan help je die bezoekers eenvoudig de informatie te vinden die ze écht nodig hebben.

Zoekmachines houden trouwens ook rekening met koppen en tussentitels. Google en co gebruiken de h1-, h2- en h3-tags van je (tussen)titels om je teksten te begrijpen en indexeren.

Extra tips voor de lay-out van je website

Een contrastrijke kleurkeuze en focus op welk onderdeel op een webpagina actief is voor toetsenbordgebruikers, zijn maar enkele voorbeelden van hoe je lay-out en functionaliteit kan verbeteren om je website toegankelijker te maken. Hieronder vind je extra tips om de webtoegankelijkheid te verbeteren.

• Maak de knoppen op je website groot genoeg. Zo zijn ze gemakkelijk te bedienen voor mensen met een motorische beperking en toetsenbordgebruikers.

• Ook belangrijk voor mensen die navigeren met een toetsenbord: zet alle elementen in een logische volgorde. Daarmee garandeer je de beste ervaring op je website.

• Een goed lettertype dat voldoende groot is en leesbaar tegen de achtergrondkleur staan voorop. Hoewel je met de meeste browsers vandaag ook inzoomen op tekst, kan je overwegen een tool aan je website toe te voegen waarmee bezoekers zelf de lettergrootte of het lettertype kunnen wijzigen.

• Staat er een kaartje op je website om te vertellen wat de locatie van je onderneming of winkel is? Geef altijd ook het adres mee in tekst. Niet iedereen kan de kaart op je website zien. Eventueel kan je ook extra aanwijzingen toevoegen.

• Meldingen bij een formulier, bestelling of een pagina die niet gevonden kan worden, moet je duidelijk formuleren. Voor formulieren en bestellingen geldt dat zowel voor een gelukte handeling als een mislukte. Vertel je bezoekers ook wat ze kunnen of moeten doen als vervolgstap.