Tips voor een betere digitale Toegankelijkheid

Digitale toegankelijkheid (Accessibility) zorgt ervoor dat websites te gebruiken zijn voor en door iedereen, mits websites goed zijn gebouwd. Digitale toegankelijkheid betekent het verwijderen van barrières voor mensen met een beperkte mobiliteit, leerproblemen, gehoorproblemen, kleurenblindheid, slechtziendheid, beperkte leesvaardigheid, epileptische stoornissen, etc.

Internet speelt een centrale rol in onze samenleving. Online bankieren, shoppen – er wordt jaarlijks voor meer dan 9 miljard online gewinkeld – en ook de overheid bedient haar burgers steeds meer via het internet. Mensen met een beperking maken vaak gebruik van hulp apparatuur, bijv. een screenreader, om de computer te bedienen.

Het digitaal toegankelijk maken van een website hoeft niet ingewikkeld te zijn. Zeker als je in een vroeg stadium van de ontwikkeling van je website de Richtlijnen voor Toegankelijkheid van Webcontent (Web Content Accessibility Guidelines, WCAG) meeneemt. Hieronder staan een aantal simpele tips om (WordPress) websites beter digitaal toegankelijk te maken:

#Semantische, nette HTML

Dit lijkt misschien een inkoppertje, maar een solide HTML structuur maakt elke website toegankelijker. Door het gebruik van de juiste header-tags, opsommingen, title-tags, ​​meta beschrijvingen en alt-tags kun je slechtziende bezoekers alles ‘laten zien’. Ook voor schermlezers wordt het makkelijker om de inhoud op te halen en voor te laten lezen.

#Inhoud

Zorg ervoor dat je inhoud makkelijk te scannen is. Maak gebruik van korte zinnen en paragrafen, maak slim gebruik van subkoppen, gebruik geordende en ongeordende lijsten, etc. Digitale toegankelijkheid heeft niet alleen met techniek of design te maken maar ook met de feitelijke inhoud. Gebruik daarom het liefst eenvoudige taal.

Scheid content, opmaak en interactie. Dit principe heet gelaagd bouwen (progressive enhancement) en zorgt ervoor dat de website goed functioneert wanneer bijvoorbeeld JavaScript niet wordt ondersteund.

Nog een paar HTML/CSS tips:

• Misbruik HTML-elementen niet voor opmaakdoeleinden. <blockquote> is bijv. niet bedoeld voor het inspringen van tekst, maar voor de opmaak van citaten.
• Vermijd het gebruik van verouderde HTML-elementen, zoals <center>, <font>, <b>, <i> en <u>.
• Gebruik cursieve tekst (<em>) zodat kernpunten opvallen in een paragraaf met tekst.
• Regel alle opmaak in een goed georganiseerde stylesheet, gebruik dus liever geen inline style-attributen.

#Zorg voor een correcte Heading structuur

Kopteksten zijn cruciaal om gebruikers van schermlezers makkelijker door de inhoud te leiden. Het belangrijkste is om je kopteksten opeenvolgend te maken, zonder niveaus over te slaan, te beginnen bij kopstijl 1 (H1) en door te gaan naar kopstijl 6 (H6) als kleinste. Deze aanpak zorgt voor duidelijkheid en gebruikersvriendelijke navigatie.

Door kopstijlen (H1 t/m H6) te gebruiken, geef je ook hun niveau/belangrijkheid aan. Kopstijl 1 heeft de hoogste prioriteit en neemt geleidelijk af tot kopstijl 6. Gebruik header-tags correct om je pagina structuur ‘logisch’ te organiseren.

De H1 header-tag wordt altijd gebruikt voor de pagina of post titel. Maak verder gebruik van H2, H3 en H4’s in de juiste volgorde. Gebruik dus geen H3 als je nog geen H2 hebt gebruikt.

#ALT-tag voor Afbeeldingen

ALT-tags zijn nodig om het beeld te beschrijven van de afbeelding die je gebruikt. Creëer dus een ALT-tag die de functie of het doel van de afbeelding beschrijft. Is de afbeelding puur decoratief of illustratief, laat de ALT-tag dan leeg (alt=””).

Voordeel is dat je afbeeldingen beter vindbaar worden in Google image search (en dat kan leiden tot meer bezoekers). Maar het grootste voordeel is dat je tekst begrijpelijker wordt voor de personen die de afbeeldingen niet kunnen zien en gebruik maken van schermlezers.

De ALT-tag wordt niet gebruikt door de zoekmachine om de relevantie van je webpagina te bepalen. Maak dus geen misbruik van de ALT-tag door ze vol te stoppen met zoekwoorden!

#Title attribute voor links

Een title attribute is een titel voor een link op je website (vergelijkbaar met een alt tag voor afbeeldingen). Gebruik een title attribute bij je link als deze niet volledig beschrijft waar de link naar verwijst, deze title attribute verschijnt zodra je met je muis boven de link gaat hangen.

Mocht je alsnog de title attribute willen gebruiken, kun je deze manueel invullen in de Tekst Mode (in de HTML). Maar je kunt ook de Restore Link Title Field plugin gebruiken, ontwikkeld door Samuel ‘Otto’ Wood en Sergey Biryukov.

#Link Anchor tekst (link ankertekst)

De manier om een link toegankelijk te maken is door de link anchor tekst relevant en beschrijvend te maken. Met anchor tekst bedoelen we de tekst van de (hyper)link. Maak er een gewoonte van om je link tekst beschrijvend van aard te laten zijn. “Klik hier” zonder verdere informatie betekent niet veel voor gebruikers met een schermlezer.

#WAI-ARIA-roles

Om semantisch te werk te gaan, kun je naast ID’s of classes ook WAI-ARIA-roles gebruiken om de ’taak’ van de verschillende HTML-elementen in je dynamische webpagina te specificeren. Met dynamische webpagina worden hier combinaties van Ajax, HTML, JavaScript en andere gerelateerde technieken bedoeld.

#Toetsenbord toegankelijkheid

Toetsenbord toegankelijkheid heeft te maken met apparaat onafhankelijke toegang tot de info en functionaliteit van een webpagina. Dit houdt in dat een website niet alleen met de trackpad of muis te “bedienen” moet zijn, maar ook met alternatieve vormen van invoer- of aanwijsapparaten. Je dient er ook voor te zorgen dat jouw site volledig toegankelijk is via het toetsenbord.

#Goed gebruik van contrast en kleurgebruik

In Nederland is ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen kleurenblind, dus kleur mag nooit de enige manier zijn voor het overbrengen van informatie of instructies. Als je website bijv. gebruik maakt van kleur alleen om links te laten zien, dan kunnen mensen die kleurenblind zijn misschien niet in staat zijn om onderscheid te maken tussen gewone (brood)tekst en je link.

Jouw website moet ook voldoende kleurcontrast tussen tekst en de achtergrond bieden, zodat de content kan worden gelezen door mensen met een verminderd gezichtsvermogen. Maar ook een slechte kalibratie van de monitor of reflecties op het beeldscherm kunnen ervoor zorgen dat jouw content minder goed te lezen is.

Tekst op afbeeldingen is een geval apart. De trend van grote afbeeldingen met (parallax scrollende) tekst erover zal niet snel voorbij gaan in de nabije toekomst. Maar dan moet je ervoor zorgen dat de tekst altijd goed leesbaar is (correcte contrastwaarden).

#Multimedia en dynamische content

Zet een toegankelijke mediaspeler in voor het afspelen van video’s, deze mediaspeler moet gebruikers in staat stellen om bijv. ondertiteling in/uit te schakelen. Zorg dat je multimedia bestanden of automatisch geactualiseerde content gepauzeerd, verborgen, vertraagd en/of gestopt kan worden.

#Digitale Toegankelijkheid en Formulieren (WordPress)

Er zijn een aantal populaire WordPress contact formulier plugins die een verschillende mate van digitale toegankelijkheid bieden. Voor de 2 meest populaire contact formulier plugins zijn er 2 aanvullende plugins om jouw formulieren 100% digitaal toegankelijk te maken:

• Voor de Contact Form 7 plugin kun je deze ‘Accessible Defaults’ plugin gebruiken
• Voor de Gravity Forms plugin kun je de WCAG 2.0 Form Fields plugin gebruiken

#Reduceer flitsende en snelle Bewegingen/Animaties

Het is tegenwoordig trendy/hip om gebruik te maken van flitsende effecten en animaties op websites, maar ze zijn niet voor iedereen geschikt. Sommige gebruikers worden misselijk of duizelig van bewegingseffecten zoals bijv. het parallax scroll effect, dynamische achtergronden, flitsende animaties of (snel) bewegende afbeeldingen of teksten.

Bottomline

Het belangrijkste voordeel van digitale toegankelijkheid is dat iedereen, ongeacht zijn of haar beperking, elke website kan gebruiken. Dat is niet alleen vanuit maatschappelijk oogpunt een goede zaak. Ook in economisch opzicht is het slim om informatie en diensten toegankelijk aan te bieden. Het is eigenlijk een simpele win/win situatie: De digitale toegankelijkheid van je content is voor iedereen bruikbaar én maakt websites beter vindbaar.

Meer Informatie:

• The A11Y Project – A community-driven effort to make web accessibility easier.
• Free web accessibility tools round-up op Medium.com (geschreven door: Carlin Scuderi)
• Accessibility.nl – Expertisecentrum voor toegankelijke ICT
• W3C Accessibility – Web Design and Applications

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan Rajtoral is een ervaren grafische vormgever en webdesigner. Hij heeft een ruime ervaring met Front-end web design (HTML, CSS en JS/jQuery), User Experience (UX), Toegankelijkheid (WCAG), Performance en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij altijd streeft naar merkconsistentie in het hele ontwerp.