Tips voor een betere Toegankelijkheid van uw 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 uw WordPress website is niet ingewikkeld als u in een vroeg stadium van de ontwikkeling van een website de Richtlijnen voor Toegankelijkheid van Webcontent (Web Content Accessibility Guidelines, WCAG2.0) meeneemt.

Hieronder een aantal simpele tips om uw (WordPress) site beter toegankelijk te maken:

Semantische, nette HTML

Dit lijkt misschien een inkoppertje, maar een solide HTML structuur maakt websites toegankelijker. Door het gebruik van de juiste header-tags, opsommingen (geordende en ongeordende lijsten), alt-tags, title-tags en ​​meta beschrijvingen, kunt u 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 uw 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 uw 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 u nog geen h2 heeft gebruikt.

#ALT-tag voor Afbeeldingen

ALT-tags zijn nodig om het beeld te beschrijven van de afbeelding die u 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 uw afbeeldingen beter vindbaar worden in Google image search (en dat kan leiden tot meer bezoekers) maar vooral omdat uw 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 uw 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 uw website (vergelijkbaar met een alt tag voor afbeeldingen). Gebruik een title attribute bij uw link tekst 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 u alsnog gebruik willen maken van de title attribute, kunt u deze handmatig invullen in de Tekst Mode (dus in de HTML van de desbetreffende link) of u 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 uw link tekst beschrijvend van aard te laten zijn, “klik hier” met geen verdere informatie betekent niet heel veel voor gebruikers met een schermlezer.

WAI-ARIA-roles

Om semantisch te werk te gaan, kunt u naast ID’s of classes ook WAI-ARIA-roles gebruiken om de ‘taak’ van de verschillende HTML-elementen in uw 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 informatie 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. U dient er ook voor te zorgen dat uw 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 uw 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.

Uw 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 uw monitor of reflecties op uw beeldscherm kunnen ervoor zorgen dat uw 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 uw 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 uw formulieren 100% toegankelijk te maken:

• Voor de Contact Form 7 plugin kunt u deze ‘Accessible Defaults’ plugin gebruiken
• Voor de Gravity Forms plugin kunt u 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 uw website, 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 User Experience (UX), Responsive Web Design (RWD) en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij streeft naar merkconsistentie in het hele ontwerp.