door Auke Grondsma
Dankzij het internet hebben we toegang tot een schier eindeloze hoeveelheid aan producten, diensten, informatie en kattenfilmpjes. Maar een grote groep mensen kan niet profiteren van de online diensten die anderen als vanzelfsprekend beschouwen. Eén op de vijf internetgebruikers heeft een functiebeperking en kan problemen ervaren bij het navigeren van websites. Voor veel bedrijven is dat echter geen reden om hun site toegankelijker te maken.
Zonde, want met een website die op de juiste manier ontworpen én onderhouden wordt, neem je niet alleen maatschappelijke verantwoordelijkheid voor mensen met een beperking; alle bezoekers zijn erbij gebaat. Denk bijvoorbeeld aan mensen die een andere taal spreken, of mensen die je site bekijken op een klein mobiel schermpje. Daarbij scoort een toegankelijk gestructureerde website hoger in de zoekmachines.
Interessant is dat webshops 10 procent van alle online uitgaven mislopen, doordat ze niet toegankelijk genoeg zijn. Mensen met een beperking willen ook gewoon geld uitgeven, maar dat moet ze dan wel mogelijk worden gemaakt. Werken aan je webtoegankelijkheid is dus een nobrainer voor wie z'n online omzet wil verhogen.
Waar moet je zoal op letten bij het toegankelijk maken van je website? Siteimprove zette een aantal belangrijke aandachtspunten voor je op een rij:
1. Navigeren zonder muis
Mensen met een beperking maken vaak gebruik van hulpapparatuur om de computer te bedienen. Hiermee kunnen ze uitstekend internetten, maar dan moeten websites hier wel op berekend zijn. Er is bijvoorbeeld nog geen screenreader ontwikkeld die zelfstandig de inhoud van een afbeelding kan verwoorden. Ook is het voor veel mensen niet mogelijk om met een muis te werken. Denk aan ouderen die niet meer zo’n vaste hand hebben. Voor deze mensen moet een website ook zonder muis, dus met behulp van sneltoetsen te bedienen zijn. En dat in meerder type browsers.
2. Een overzichtelijke paginastructuur
Besteed voldoende aandacht aan de leesbaarheid en gebruiksvriendelijkheid. Hier zijn alle bezoekers bij gebaat. Organiseer de content op je site in een semantische structuur. Zorg dus dat je meta-informatie toevoegt, zoals header tags. Je markeert de inhoud, door de inhoud te beschrijven. Zo kunnen ondersteunende technologieën, zoekmachines én je bezoekers in een oogopslag begrijpen hoe de pagina in elkaar steekt en wat belangrijk is.
3. Plaats skip-links
Plaats zogenaamde skip-links in de HTML-code. Met deze (voor de bezoeker onzichtbare) hyperlinks kunnen gebruikers van een screenreader delen van de pagina overslaan en direct navigeren naar de onderdelen die zij belangrijk vinden.
4. Relevante paginatitels
Duidelijke paginatitels die een goede indruk geven van wat er op de pagina te vinden is, zorgen niet alleen voor een betere gebruikservaring, ze zijn ook bijzonder gunstig voor je seo-resultaten. Zo zorg je voor een makkelijk navigeerbare website en een hogere notering in de zoekmachines.
5. Duidelijke teksten
Zoals hierboven al vermeld, is het belangrijk om hiërarchie aan te brengen, door een juist gebruik van headers en paragrafen. Zo kunnen ondersteunende technologieën als screen readers de pagina eenvoudiger interpreteren. Pas op met tekstinstructies die alleen verwijzen naar de locatie op de pagina, zoals ‘in het kader rechts’. Combineer de locatie bijvoorbeeld met de header-tekst van dat kader: ‘in het kader rechts, genaamd overige publicaties’. Geef ook aan in welke taal een tekst is geschreven, door het toevoegen van de juiste tags, vooral als de tekst intern van taal verandert.
6. Slim linken
Zorg ervoor dat tekstlinks ook betekenis hebben als je ze los van de context leest. Vermijd bijvoorbeeld links als ‘lees meer’, of ‘klik hier’, maar geef in de linktekst aan waar de link naartoe leidt: ‘klik hier voor het volledige rapport’. Zorg ervoor dat de linktekst niet langer is dan 100 karakters en vermijd het gebruik van de pagina-URL als linktekst.
7. Begrijpelijk beeld
Informatie in afbeeldingen gaat grotendeels voorbij aan blinden en slechtzienden. Wanneer je afbeeldingen toevoegt aan je website, voeg dan alternatieve (alt) tekst toe, die de bedoeling of de inhoud van de afbeelding beschrijft. Bevat de afbeelding een link, beschrijf dan in de alttekst waar deze naartoe leidt.
Wees voorzichtig met tekst in plaatjes, want screenreaders en zoekmachines kunnen deze tekst niet lezen. Zorg er dan ook voor dat de alt-tekst dezelfde informatie bevat als de tekst in het plaatje. Let op: decoratieve afbeeldingen hebben geen alt-tekst nodig, want dat zorgt alleen maar voor ruis.
8. Audio en video
Zorg ervoor dat je voor audiofragmenten op je website een transcript van de tekst biedt, zodat ook doven en slechthorenden de informatie tot zich kunnen nemen. Ook video’s zijn gebaat bij een duidelijke omschrijving. Bied online video daarom altijd aan met gesynchroniseerde captions en eventueel een audiodescriptie. Zorg voor een gelaagde opzet van de webpagina waarop de video staat. Als de ene techniek niet werkt, neemt de volgende het automatisch over. Zorg dat gebruikers ook zelf eventueel een andere laag kunnen kiezen. Lever bijvoorbeeld een SMIL-bestand aan met de losse bestanden ter download (video, captions, audio-descriptie).
9. Lijsten en tabellen
Begrijp het verschil tussen geordende, ongeordende en definitielijsten en gebruik ze op de juiste manier. Vermijd het gebruik van lijsten als visueel effect. Hetzelfde geldt voor tabellen: gebruik ze alleen waarvoor ze bedoeld zijn (het presenteren van relationele informatie). Zet de belangrijkste informatie in de eerste kolom en een eventuele ‘call to action’, zoals een aankoopknop, in de meest rechtse kolom.
Deze blog is geschreven naar aanleiding van de Week van de Toegankelijkheid en het vorige week gehouden event Web Accessibility Live.
Auke Grondsma is General Manager Benelux bij Siteimprove
fotocredits: carloscastilla / 123RF Stockfoto
Plaats als eerste een reactie
Ook een reactie plaatsen? Word lid van Adformatie!