Tips voor een betere Toegankelijkheid van je website

Toegankelijkheid (Accessibility) zorgt ervoor dat het web te gebruiken is voor en door iedereen, mits websites goed zijn gebouwd. 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 toegankelijk maken van je website is niet ingewikkeld als je in een vroeg stadium van de ontwikkeling van je site de Richtlijnen voor Toegankelijkheid van Webcontent (Web Content Accessibility Guidelines, WCAG2.0) meeneemt. Hieronder een aantal simpele tips om jouw (WordPress) site beter toegankelijk te maken:

Semantische, nette HTML

Dit lijkt misschien een inkoppertje, maar een solide HTML structuur maakt sites toegankelijker. Door het gebruik van de juiste header-tags, opsommingen (geordende en ongeordende lijsten), title-tags, ​​meta beschrijvingen en alt-tags kun je slechtziende bezoekers alles ‘laten zien’ op een webpagina. 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. Toegankelijkheid heeft niet alleen met techniek of design te maken maar ook met de feitelijke inhoud, gebruik eenvoudige taal.

Scheid content, opmaak en interactie. Dit principe heet gelaagd bouwen (progressive enhancement) en zorgt ervoor dat de website goed functioneert wanneer bijvoorbeeld stylesheets of 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

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 heeft 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=””).

Voordelen zijn dat je afbeeldingen beter vindbaar worden in Google image search (en dat kan leiden tot meer bezoekers) maar vooral omdat je tekst begrijpelijker wordt voor de personen die de afbeeldingen niet kunnen zien en gebruik maken van bijv. 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 eigenlijk naar verwijst, deze title attribute verschijnt zodra je met je muis boven de link gaat hangen.

Mocht je alsnog gebruik willen maken van de title attribute, kun je deze manueel invullen in de Tekst Mode (dus in de HTML van de desbetreffende link) of je kunt gebruik maken van de Restore Link Title Field plugin 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” met geen 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 alleen kleur om links te laten zien, dan kunnen mensen die kleurenblind zijn niet in staat zijn om onderscheid te maken tussen gewone (brood)tekst en de tekst van de koppeling.

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 ervoor zorgen dat de tekst altijd goed leesbaar is (correcte contrastwaarden) kan lastig zijn.

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 ge-actualiseerde content gepauzeerd, verborgen, vertraagd en/of gestopt kan worden.

Toegankelijke Formulieren (WordPress)

Er zijn een aantal populaire WordPress contact formulier plugins die een verschillende mate van toegankelijkheid bieden. Voor de 2 meest populaire contact formulier plugins zijn er 2 aanvullende plugins om jouw formulieren 100% 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.

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.