We were Gents and Wijs, but now you can call us Duke & Grace.

2Ghent

Foreestelaan 1
9000 Ghent

Brussels

Antwerpselaan 40
1000 Brussels

Deze post is gearchiveerd.

Ga naar onze recente blogposts


21 maart 2018 - Story

Maak je website toegankelijk voor iedereen

Bij het uitdenken van een website doen we uitgebreid onderzoek naar de doelgroep van de klant en stellen we profielen op van de potentiële gebruikers die de site zullen bezoeken. We moeten echter ook rekening houden met eventuele beperkingen van de gebruiker. Uit cijfers van de World Health Organisation blijkt dat er 15% van de wereldbevolking kampt met een lichte of zware vorm van beperking.

Alle designers en developers bij Wijs zijn bekend met de minimumvoorwaarden waaraan een website moet voldoen om toegankelijk te zijn. Dit betekent dat iedereen, ook mensen met een beperking, een site of app vlot moet kunnen gebruiken. Het doel van toegankelijke websites en mobiele applicaties is eerst en vooral om iedereen digitaal verder te kunnen helpen.

Wetgeving

Sinds 22 december 2016 is er een Europese richtlijn voor de toegankelijkheid van websites en applicaties van overheidsinstanties in werking getreden. Deze volgt de WCAG, de Web Content Accessibility Guidelines, die zijn opgesteld in 3 levels: A, AA en AAA. Om het label van AnySurfer te verkrijgen moet je website voldoen aan level A. De Europese richtlijn stelt echter een level AA voorop.

De richtlijn steunt op 4 grote pijlers:

  • Waarneembaar: de informatie en user interface moet waarneembaar zijn. Bijvoorbeeld: minimale tekstgrootte, kleurgebruik, en ondertiteling bij video’s.
  • Bestuurbaar: de user interface moet eenvoudig te besturen zijn. Bijvoorbeeld: toetsenbord-toegankelijk maken, de gebruiker genoeg tijd geven om informatie op te nemen, en een duidelijke hoofding en labels plaatsen.
  • Verstaanbaar: gebruik duidelijke en eenvoudige taal om informatie over te brengen.
  • Robuust: de gebruiker moet de website met verschillende browsers kunnen bezoeken, en moet de site vlot kunnen interpreteren door middel van ondersteunende hulpmiddelen.

Na de Europese volgt er ook een Belgische wetgeving voor overheidsinstanties. De deadline om deze wet na te leven is 23 september 2018, waarna binnen 2 jaar alle websites en applicaties moeten voldoen aan het WCAG Level AA.

Hoewel deze richtlijn enkel over overheidssites gaat, willen we samen met Anysurfer ernaar streven om het web in het algemeen te verbeteren en om zelf ook duidelijke en toegankelijke websites te creëren.


Anysurfer Web Accessibility Masterclass

AnySurfer nodigde ons uit om de Web Accessibility Masterclass te volgen. Hoewel we bij de ontwikkeling van Harmony al rekening hielden met de toegankelijkheid ervan, leek het ons toch nuttig om de cursus te volgen. De opleiding neemt je mee in de wereld van hulpmiddelen zoals screenreaders, switches, screen magnification en speech recognition. De workshop bestond uit twee delen: in het eerste deel werd de context algemeen geschetst, en kregen we een overzicht van de obstakels die gebruikers kunnen tegenkomen en hoe we er rekening mee kunnen houden. In het tweede deel getuigde Bart Simons over de moeilijkheden die hij ervaart tijdens het surfer. Hij toonde enkele praktische voorbeelden zodat we nadien zelf beter kunnen inschatten op welke elementen gebruikers kunnen vastlopen.

Een visuele beperking

Onder een visuele beperking verstaan we niet enkel blindheid maar ook verminderd zicht, kleurenblindheid en concentratieproblemen. Wanneer we bij Wijs websites ontwerpen en designen, houden we rekening met enkele basisvoorwaarden om de duidelijkheid en leesbaarheid te bewaken. Voldoende contrast voorzien, minimum tekstgrootte en heldere copy zijn slechts enkele voorbeelden van goed webdesign.

In de Web Accessibility Masterclass werden heel wat foute praktijkvoorbeelden getoond. Tekst op drukke achtergronden, slideshows die heel snel bewegen en lange teksten zonder structuur zijn voorbeelden van hoe het niet moet. Het zijn allemaal situaties die het moeilijker maken om de site of app op een eenvoudige en intuïtieve manier te gebruiken. En dat is niet enkel voor slechtzienden.

Hieronder geven we alvast enkele tips mee:

1. Contrast

Wanneer je iemand vraagt wat een beperkende factor kan zijn voor slechtzienden, krijg je vaak het antwoord “onvoldoende contrast voorzien”. Hoewel velen dit dus wel weten, wordt de fout jammer genoeg nog heel vaak gemaakt. Er zijn heel wat tools voorhanden om tijdens de designfase al te controleren of de contrast ratio hoog genoeg is. Die ratio's verschillen volgens tekstgrootte en zijn vastgelegd in de WCAG richtlijnen.

Minimum contrast voor kleine tekst is 4.5:1 en 3:1 voor grote tekst.

2. Kleurgebruik

Gebruik niet enkel kleur om informatie over te brengen. Mensen die kleurenblind zijn of een verminderd zicht hebben kunnen hierdoor problemen ondervinden om de boodschap te verstaan. Een goed idee is om een combinatie van kleur en vorm te gebruiken. Een klassiek voorbeeld zijn openingsuren van een winkel:

Kleur, iconen en legende zorgen voor een duidelijk overzicht om de drukke winkelmomenten aan te duiden.

3. Schep duidelijkheid

Wanneer gebruikers een screenreader of brailleleesregel nodig hebben dan steunen ze bijna volledig op de copy en de code van de site. Het is dan ook belangrijk om te zorgen dat alle elementen en hun functionaliteit duidelijk zijn omschreven. We spreken hier niet enkel over semantiek en alt en title attributen (tekstuele beschrijving van een afbeelding) maar bijvoorbeeld ook over taalaanduidingen en aria-labels (kleine stukjes code) om functionaliteiten aan te duiden. Dit is niet enkel de taak van de developer, maar het is zeker ook voor een groot deel de verantwoordelijkheid van de website redacteurs om hier voldoende rekening mee te houden. Een goed CMS vangt echter al een deel van deze verantwoordelijkheden op.

Een voorbeeld van slechte copy: wanneer een gebruiker een lijst van alle links op een pagina opvraagt krijgt hij enkel een lijst van 'klik hier' links.

4. Behoud focus

Met ‘focus’ bedoelen we de omlijning rond een link-element of formulierveld om aan te duiden waar de bezoeker zich bevindt in een pagina wanneer ze met de tab-toets navigeren. Dit wordt, in combinatie met inzoomen, door veel slechtzienden gebruikt om door een site te gaan. Het is dan ook belangrijk om deze focusaanduiding zeker niet te verwijderen wanneer je websites designt en bouwt.

Het geselecteerde item is duidelijk aangeduid.

Andere beperkingen

De fysieke beperkingen hebben heel wat impact op het gebruik van een website of app, maar naast de visuele beperkingen zijn er ook nog auditieve en motorische. Deze vragen op hun beurt dan weer een aantal andere aandachtspunten en werkwijzes. Wat het auditieve aspect betreft, is het altijd een goed idee om je video's te ondertitelen of om een uitgeschreven transcript onder de video te plaatsen. Een motorische handicap kan dan weer het gebruik van een muis bemoeilijken waardoor de gebruiker aangewezen is op enkel het toetsenbord.

We schatten de kans groot dat er in de nabije toekomst een AnySurfer label verwacht zal worden voor alle Europese webshops. Wat vandaag dus enkel aan overheidsinstanties opgelegd wordt , vindt binnenkort ongetwijfeld zijn weg naar alle andere platformen. Wie de huidige digitale platformen vernieuwt, doet er dus goed aan om deze richtlijnen alvast mee op te nemen.

Ook klaar om je website vlot toegankelijk te maken maar kan je wat extra hulp gebruiken? 

Wijs helpt je graag verder

Tom Hudders

Tom Hudders

Designer

Share this insight on

It's time to stop scrolling and start making.

Let's get in touch

Call us +32 9 335 22 80