Mobiele Navigatie

Webtoegankelijkheid (Accessibility) zorgt ervoor dat het web te gebruiken is voor en door iedereen, mits websites goed zijn gebouwd. Webtoegankelijkheid 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.

Selecteer altijd de juiste header-tag ten behoeve van de structuur van het document, niet voor de manier waarop het visueel eruit ziet op de pagina.

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.

Bij de laatste versies van WordPress wordt de bestandsnaam van de afbeelding automatisch gebruikt als ALT-tag. Geef de bestandsnaam van de afbeelding, wanneer u deze opslaat, dus ook een goede korte beschrijving!

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.

Sinds WordPress 4.2 is deze Title attribute voor links verdwenen uit de ‘Link invoegen/bewerken’ popup menu, de Title attribute is nu vervangen door Linktekst.
UPDATE: Bekijk ook de reactie van Rian Rietveld over het ‘title attribuut’

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).

WAI-ARIA-roles voegen extra semantiek toe voor ondersteunende technologieën zoals schermlezers en andere toegankelijkheidstools en stellen u in staat ze meer specifiek op te maken via CSS-selectors.

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.

Als een webpagina toegankelijk is d.m.v. het toetsenbord kan de gebruiker dus ook kiezen voor het invoerapparaat (bijv. spraakinvoer) naar keuze.

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.

Tip: Onderstreep altijd uw links middels CSS (text-decoration of border-bottom)

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:

Tip: gebruik GEEN Captcha code om formulieren te valideren en vertrouw niet op kleur alleen om verplichte velden of om foutmeldingen aan te geven.

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.

Tip: Zorg ervoor dat gebruikers dynamische achtergronden, animaties en parallax bewegingen altijd kunnen uitschakelen.

Meer Informatie:

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan - AKA Gonzo the Great - Rajtoral is een ervaren grafische en web designer, gespecialiseerd in (front-end) Responsive Web Design, WordPress Ontwikkeling, Logo en Huisstijl ontwerp.

2 Reacties

Rian Rietveld, 3 jaar geleden | Beantwoorden

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 :-)

    Jan Rajtoral, 3 jaar geleden | Beantwoorden

    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!

Laat een Reactie achter


*) Verplichte velden.

Meest Recent Project

Groundsailer Media

Colofon