Wat is webtoegankelijkheid en hoe gaan wij daarmee om?
Het internet is voor velen niet meer weg te denken uit hun leefwereld. Het is de toegangspoort geworden voor een stroom van informatie. Bij het ontwikkelen van een website of een mobiele app mag je het luik webtoegankelijkheid niet uit het oog verliezen. Een toegankelijke website betekent dat de website geschikt is voor elke surfer, ook voor personen met een beperking. Ontdek hoe wij hier mee omgaan.
Wat is een toegankelijke website?
Webtoegankelijkheid betekent dat websites of mobiele apps toegankelijk en bruikbaar zijn voor iedereen. Mensen met een beperking komen dagelijks heel wat obstakels tegen bij het gebruiken van websites. Zo kan het voor iemand met een motorische beperking moeilijker zijn om op een knop te drukken. Een toegankelijke website zorgt ervoor dat ook personen met een beperking zonder problemen je website kunnen bezoeken. Denk hierbij niet alleen aan blinden of doven, er zijn een hele hoop mensen die tijdelijk of contextueel beperkt zijn.
Bij accessibility denken we vaak onterecht alleen maar aan een website bruikbaar maken voor mensen met een beperking, maar toegankelijkheid reikt veel verder dan dat. Een toegankelijke website betekent ook je website beschikbaar maken voor een zo groot mogelijk publiek.
Bij het ontwikkelen van een website moet je volgende basisprincipes in acht houden:
Waarneembaar: informatie en componenten moeten op een waarneembare wijze toonbaar zijn.
Bedienbaar: de navigatie en componenten moeten bedienbaar zijn via een muis, toetsenbord of hulpsoftware.
Begrijpelijk: de bediening van de gebruikersinterface moet begrijpelijk en logisch zijn.
Robuust: de code van je website is zodanig opgebouwd dat speciale hulptechnologieën, zoals een screenreader, dit kunnen lezen.
Zowel onze front- en backenders als marketeers houden bovenstaande principes steeds in hun achterhoofd bij een technische ontwikkeling.
Eenvoudig te besturen
Een website moet eenvoudig te navigeren zijn via een muis, toetsenbord of screenreader. Onze developers testen dit regelmatig tijdens het ontwikkelingsproces. Nadat elke component ontwikkeld is controleren ze of deze navigeerbaar is met het toetsenbord, rekening houdend met een logische tabvolgorde. Zo staat de cookiemelding steeds bovenaan, zodra je begint met tabben kan je als eerst de cookiemelding aanvaarden vooraleer je op de website kan verder navigeren.
Kleur en contrastgebruik
Voor een slechtziende is contrast een belangrijke factor. Helaas merken we dat dit vaak vergeten wordt en er tal van websites worden opgeleverd met onvoldoende contrast. Het is dus belangrijk om tijdens de designfase te controleren of de contrast ratio hoog genoeg is. Dit kan via verschillende tools, zelf gebruiken we graag Webaim.
Het gebruik van kleur om informatie over te brengen is af te raden voor mensen met een visuele beperking. Dit kan je simpel oplossen door kleur en vorm in combinatie te gebruiken. Zo zal je merken dat een hyperlink meestal onderlijnd staat om meer contrast te creëren. Dit contrastgebruik zal je ook terugvinden bij een focus-aanduiding of een hoover state. Hiermee bedoelen we de omlijning rond een link-element om aan te duiden waar de bezoeker zich bevindt op de pagina. Een element dat vaak gebruikt wordt door slechtzienden wanneer ze door de site gaan.
Semantiek
Een screenreader steunt bijna volledig op de code van een webpagina. Het is daarom zeer belangrijk om alle elementen en hun functionaliteiten duidelijk te omschrijven. Denk hierbij aan de semantiek van je website en creëer via de juiste heading en title tags een logische structuur. De marketeers zullen je, met SEO in hun achterhoofd, ook meteen dankbaar zijn bij een juist gebruik van H1 tot H6 tags. Groepeer de content van je website zoveel mogelijk en laat alles vloeiend overlopen van de header, tot de main content om te eindigen met de footer. Een tip van onze frontender is om de pagina eerst volledig in HTML op te maken. Zodra alles logisch in een goede volgorde staat kan je de styling gaan toevoegen.
Maar de semantiek van een toepassing verbeteren gaat verder. Maak waar nodig gebruik van aria-attributen om een functionaliteit te duiden. Dit soort attribuut heeft geen effect op de layout van je toepassing maar het voegt informatie toe voor een screenreader.
Content driven
Ook als marketeer of copywriter kan je je steentje bijdragen aan een toegankelijke website. Zo kunnen enkele kleine aandachtspunten al een groot verschil maken. Van alt-tags toevoegen aan afbeeldingen tot een correct gebruik van de wysiwyg.
Maar geef ook voldoende aandacht aan de copy zelf. Leesbaarheid is een belangrijk onderdeel van webtoegankelijkheid. Gebruik simpele zinnen of werk met bulletpoints in plaats van ellenlange teksten. Gebruik je een video ter ondersteuning? Voeg dan indien mogelijk ondertiteling toe of een uitgeschreven transcript.
Opleidingen
Hoewel we tijdens de ontwikkeling van een website al rekening houden met de toegankelijkheid ervan, blijven onze collega’s zich bijscholen in dit topic. Zo kregen we onlangs een Web Accessibility Masterclass van AnySurfer.
AnySurfer is een organisatie die zich al enkele jaren inzet voor een toegankelijker internet. Hun doel is om de digitale wereld toegankelijk te maken voor mensen met een beperking, zonder daarbij gebruiksvriendelijkheid voor iedereen uit het oog te verliezen. Dit doen ze onder andere via checklists en door het organiseren van opleidingen.
De opleiding neemt je mee in de wereld van hulpmiddelen zoals speech recognition en screenreaders. Via enkele praktische voorbeelden worden obstakels aan bod gebracht en hoe je hiermee kan omgaan als designer of developer.
