Ongeveer 25% van de Nederlandse bevolking heeft een zodanige functiebeperking dat websites niet altijd even toegankelijk voor ze zijn. Daarnaast staan wetten voor digitale toegankelijkheid hoog op de agenda van regeringen in Nederland en Europa. Belangrijke redenen waarom ontwikkelaars, ontwerpers en hun werkgevers/klanten ervoor moeten zorgen dat toegankelijkheid een vroeg en belangrijk onderdeel is van het ontwikkelproces. Ook bij Experius is dit een onderwerp waar we aan werken en steeds meer over leren, daarom delen we graag deze tips.
Regelgeving
Op dit moment zijn alleen overheidsinstanties verplicht om hun websites toegankelijk te maken voor iedereen. Deze websites moeten voldoen aan de WCAG 2.1 niveau A en AA, dit zijn richtlijnen voor het toegankelijk maken van webinhoud. Maar vanaf juni 2022 geldt de Europese toegankelijkheidswet verplichting niet alleen voor overheidsinstanties, maar ook voor Magento webshops. Vanaf 2025 wordt deze wet ook daadwerkelijk gehandhaafd.“De WCAG richtlijnen zijn opgezet in samenwerking met individuen en organisaties wereldwijd, met het doel om een gemeenschappelijke standaard voor toegankelijkheid van webcontent te leveren, die internationaal tegemoetkomt aan de behoeften van individuen, organisaties en overheden.”
Een toegankelijke website: wat zijn de voordelen?
Vanuit het bovenstaande begrijp je dat het belangrijk is dat de toegankelijkheid van de website verbeterd moet worden vanwege de regelgeving. Maar een toegankelijke website biedt nog meer:
Een betere gebruikerservaring voor alle bezoekers
Websites die zijn gemaakt met het oog op webtoegankelijkheid, zijn doorgaans toegankelijker voor iedereen, niet alleen voor personen met een beperking.
Betere vindbaarheid (SEO)
Door een toegankelijke website te bouwen met bijvoorbeeld duidelijk gelabelde links en afbeeldingen, wordt een website beter vindbaar in zoekmachines als Google. Door een goed gemarkeerde site te maken, kan Google een site indexeren en gemakkelijker vinden in de zoekresultaten.
Groter bereik
Ontoegankelijke websites sluiten een gedeelte van potentiële bezoekers of klanten uit, dit is slecht voor business en kost dus geld.
Maatschappelijke verantwoordelijkheid
Het web is een steeds belangrijker hulpmiddel voor onderwijs, werkgelegenheid, overheid, gezondheidszorg en natuurlijk online winkelen. Om mensen met een beperking hier dezelfde kansen te bieden is het belangrijk het web toegankelijk te maken en houden.
7 tips voor webtoegankelijkheid
De reden voor het aanpassen van je website is duidelijk, check. Nu moet je nog weten hoe. Omdat het nog niet standaard meegenomen wordt bij veel e-commerce platformen, zal jouw e-commerce bureau een aantal zaken moeten oppakken. Om je hiermee op weg te helpen, vind je hieronder een aantal tips die je kunt gebruiken voor een goede start in het toegankelijk maken van jouw website en Magento webshop:
1. Voeg een duidelijke alt-tekst toe aan afbeeldingen
De alternatieve (alt) tekst wordt gebruikt om afbeeldingen toegankelijk te maken voor blinde en slechtziende personen. Zij gebruiken vaak een schermlezer of brailletoetsenbord om de inhoud van een webpagina te vertalen. Beschrijf in de alt-tekst zo duidelijk mogelijk wat er op de afbeelding te zien is. Lees hier hoe je dat doet.
De uitzondering op deze regel is wanneer een afbeelding puur ter decoratie wordt gebruikt. In dit geval kan de alt-tekst leeg blijven, zodat de gebruiker van de schermlezer niet wordt afgeleid van de belangrijkere inhoud op de webpagina.
Gebruik je een PIM systeem? Dan wordt de juiste alt-tekst direct vanuit PIM doorgezet naar de Magento webshop. Gebruik je Magento om afbeeldingen te beheren, dan is die alt-tekst leidend. Zorg er in ieder geval voor dat je op één plek de alt-teksten goed beheerd.
2. Toetsenbordtoegankelijk
Personen die slechtziend zijn gebruiken meestal geen muis maar het toetsenbord om te navigeren op een website. Zorg er daarom voor dat de web-inhoud van een pagina niet alleen benaderbaar is met muis maar ook met een toetsenbord.Om een website benaderbaar te maken met het toetsenbord, is het belangrijk om ervoor te zorgen dat alle interactieve elementen op de website focus krijgen wanneer er op de "Tab" -toets wordt gedrukt. Developers gebruiken het attribuut tabindex="0" om ervoor te zorgen dat een element toetsenbordfocus kan krijgen.
3. Duidelijke, beschrijvende links
Met behulp van ondersteunende technologie, zoals een schermlezer, kunnen gebruikers een overzicht van links op een pagina opvragen. Als bij elke link duidelijk is wat het doel is, weet een persoon die een schermlezer gebruikt of hij hierop wil klikken of niet. Veelgemaakte fouten hierin zijn de te algemene ‘lees meer’ en ‘klik hier’ links op een webpagina.Als bijvoorbeeld een link verwijst naar de webpagina "Over ons":
- Gebruik niet een link zoals de onderstreepte tekst: "Klik hier om over ons bedrijf te lezen."
- Gebruik in plaats daarvan: "Voor meer informatie over het bedrijf, lees hier meer over ons."
Voor meer informatie, lees 'Doel van de link'.
4. Skip links
Een skip link biedt gebruikers van ondersteunende technologie, zoals een schermlezer, een manier om vaak voorkomende navigatielinks te kunnen overslaan. Zij gebruiken bijvoorbeeld de "Tab" -toets om door de pagina te scrollen en gebruiken onnodig vaak de "Tab". Een skip link is een link naar de meest relevante content op de pagina. Door hierop te klikken, kom je direct bij die content terecht.
5. Kleurcontrast
Bij het gebruik van kleur is het belangrijk om voldoende contrast te hebben tussen de achtergrondkleur en de voorgrondkleur. Kleuren met voldoende contrast maken het voor visuele gebruikers makkelijker om de inhoud (tekst of afbeeldingen van tekst) op de pagina te lezen of te begrijpen. Onze designers helpen je graag om de juiste kleuren te kiezen, waardoor zaken als Call-to-Actions, buttons en teksten goed vindbaar en leesbaar zijn. Lees hier wat de precieze regels zijn voor het kleurcontrast.
6. Formulieren toegankelijk maken
Als formuliervelden niet op de juiste manier zijn gelabeld, krijgt een persoon die een schermlezer gebruikt niet dezelfde aanwijzingen als een ziende persoon. Het kan dan lastig zijn om te bepalen welk type inhoud in een formulierveld moet worden ingevoerd voor een schermlezer gebruiker.Elk veld in een formulier moet dus een goed beschrijvend label hebben. Als een formulierveld bijvoorbeeld voor de naam van een persoon is, moet het label "Volledige naam" of twee afzonderlijke velden met het label "Voornaam" en "Achternaam" worden gebruikt. Gebruik de <label> tag in de formuliergenerator of een ARIA-attribuut “aria-label” om de label tekst passend te maken bij het formulierveld.
Soms zijn bepaalde invoervelden vereist voordat op de knop “Verzenden” geklikt kan worden. In deze situatie kan gebruik gemaakt worden van het attribuut “required”. Dit attribuut geeft een schermlezer gebruiker aan dat het invoerveld vereist is voordat hij verder kan gaan.
7. Overzicht webpagina met koppen en tussenkoppen
Gebruik koppen en tussenkoppen om een overzicht van de pagina te vormen. Ze helpen visueel beperkte gebruikers (inclusief zoekmachines) om te begrijpen hoe de pagina is georganiseerd en maken het voor gebruikers van schermlezers gemakkelijker om te navigeren op een website.Voorbeelden van correct gebruik van koppen:
- Gebruik <h1> voor de titel van de webpagina. Gebruik geen <h1> voor iets anders dan de titel van de website en de titel van webpagina's.
- Gebruik koppen om de inhoudsstructuur aan te geven en te ordenen.
-
Sla geen kopniveaus over, ga van een <h1> niet naar een <h3>, aangezien gebruikers van schermlezers zich zullen afvragen of er inhoud ontbreekt.
Conclusie
Het toegankelijk maken van de website en webshop voor iedereen en met name mensen met een beperking hoort anno 2022 geen keuze meer te zijn. Maar ook wij weten dat veel bedrijven hier nog niet mee bezig zijn en ook de grote (software)partijen het nog niet hoog genoeg op de agenda hebben staan. Maar kleine stappen kunnen we dus al wel maken, die zorgen voor een betere ervaring!
Momenteel hoeven alleen websites van overheidsinstanties te voldoen aan de WCAG 2.1 (richtlijnen voor toegankelijkheid van webinhoud) niveau A en AA. Deze wet die nu nog alleen geldt voor overheidswebsites, wordt in de toekomst uitgebreid en op naleving wordt gecontroleerd. Er gebeurt veel, wij houden je op de hoogte en geven je hiermee alvast een goed begin!
