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.
UPDATE: Bekijk ook de reactie van Rian Rietveld over het ’title attribuut’
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).
Heb je een maatwerk WordPress project in gedachten?
Een goede beveiliging, snelle laadtijd, flexibele bedrijfsintegratie, unieke vormgeving en beter gebruiksgemak zijn de meest voor de hand liggende onderscheidende factoren om te kiezen voor een op maat gemaakt WP thema. gonzodesign bouwt zoekmachine vriendelijke en converterende WordPress websites met aandacht voor detail.
WordPress Development#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
Hoi Jan,
Mooi dat je in de web toegankelijkheid gedoken bent! Veel goede info in dit artikel.
Een ding zou ik graag willen toevoegen:
Het title attribuut op links is er op verzoek van het Accessibility Team uitgehaald.
De manier waarop screen readers dit voorlezen verschilt per type en instellingen. Je kunt er dus niet op vertrouwen dat de info die er instaat goed wordt doorgegeven. Ook bezoekers die een touch screen gebruiken kunnen het title attribuut niet uitlezen. Dus je kunt hier in feite geen essentiële informatie in kwijt. Om verwarring te voorkomen is het beleid nu dat alle title attributen van links worden gehaald. Dus liever niet gebruiken.
Verder een goed stuk :-)
Hoi Rian,
dank je wel voor je uiterst nuttige feedback over het title attribuut, ik zal de tekst updaten met een verwijzing naar je reactie over het title attribuut! Nogmaals dank en ik zie je (hopelijk) weer snel bij de volgende WPMeetup010? Ciao!