Tabs met ARIA: de regels van de kunst

Bart Simons op 15/09/2015

Cet article en français: Des onglets dans les règles de l'art

Het probleem

Tabs op een website zijn visueel erg duidelijk en tegelijk heel verwarrend voor wie het scherm niet ziet of geen overzicht heeft over het hele scherm:

  • De tabs zijn voor screenreadergebruikers geen afgebakend geheel, maar gewoon een onderdeel van de webpagina. Aan het eind van het paneel moet je je realiseren/herinneren dat je terug moet keren om een andere tab te selecteren.
  • Als je een tab kiest, verdwijnt de tekst van de eerder geselecteerde tab en deze wordt vervangen door nieuwe informatie: paginawijziging.
  • Het paneel heeft meestal geen kop. Visueel is het duidelijk doordat de actieve tab is gemarkeerd. Screenreadergebruikers missen dat verband.

Screenshot tabs van Hans Hillen

Basiscode van een tabswidget

<div id="Tabs">
<ul>
<li><a id="tabsdemo-1-tab" href="#tabsdemo-1">Dogs</a></li>
<li><a id="tabsdemo-2-tab" href="#tabsdemo-2">Cats</a></li>
<li><a id="tabsdemo-3-tab" href="#tabsdemo-3">Sheep</a></li>
</ul>
			
<div style="display: block;" id="tabsdemo-1">
<p>The dog Canis lupus familiaris, is?</p>
</div>

<div style="display: none;" id="tabsdemo-2">
<p>The cat (Felis catus), also known as? </p>
</div>
				
<div style="display: none;" id="tabsdemo-3">
<p>Domestic sheep are quadrupedal?</p>
</div>

ARIA to the rescue

Tabs zijn een van de weinige widgets waar we aanbevelen om ARIA te gebruiken. Je vertrekt van een lijst van links en div's en met ARIA voeg je de semantiek toe die in HTML niet bestaat:

  • verander met role="tab" de semantiek van de links naar tabs,
  • groepeer deze tabs met role="tablist",
  • onderdruk de lijst-items met role="presentation",
  • geef met aria-selected aan welke tab geselecteerd is. Voeg dit attribuut toe aan elke tab en verander de waarde van false naar true als het actief wordt.
  • leg het verband tussen tab en tabpaneel met aria-controls. Dit attribuut krijgt als waarde de inhoud van de id van het paneel dat deze tab zal activeren.
  • geef met role="tabpanel" aan waar elk tabpaneel begint en eindigt,
  • geef elk tabpaneel een naam via aria-labelledby. Dit attribuut krijgt als waarde de id van de tab die bij dit paneel hoort.

Dit filmpje toont stap voor stap hoe je ARIA toevoegt. Het bevat ook een interessante discussie over het activeren van tabs. Ondertussen zijn de meesten het erover eens dat de tweede optie de beste is: in de tablist selecteer je een tab met de pijltoetsen; om naar het paneel te gaan, gebruik je de tabtoets.

ARIA voegt enkel semantiek toe voor screenreaders. ARIA beïnvloedt niet hoe iets er uitziet en ook niet hoe het werkt. Voor toetsenbordgebruikers (waaronder screenreadergebruikers) zijn er nog aandachtspunten:

  • Voeg tabindex="0" toe aan de actieve tab en tabindex="-1" aan alle andere tabs. Zo zorg je ervoor dat de tabfocus enkel op de actieve tab terechtkomt. Wissel via Javascript de waarde van het tabindex-attribuut telkens een andere tab wordt geselecteerd.
  • Een andere tab selecteren, gebeurt met de pijltoetsen. Links/omhoog voor vorige tab en rechts/omlaag voor volgende tab.
  • Na het selecteren van een tab met de pijltoetsen, druk je op de tabtoets om naar het bijhorende paneel te gaan. Het is voor screenreadergebruikers essentieel dat je de focus bovenaan het tabpaneel plaatst: ofwel op het paneel zelf (container) ofwel op het eerste element van het paneel (kop). Als je dit niet forceert dan zal de focus gaan naar het eerste interactieve element binnen of voorbij het paneel.
  • Als je het paneel gelezen hebt, moet je terugkeren naar de lijst van tabs om een andere te kiezen. Dit is vooral lastig als het tabpaneel veel links of een formulier bevat. De WAI-ARIA Authoring Practices 1.1 definiëren sneltoetsen ctrl+pijltjes en ctrl+pageUp en ctrl+pageDown om van actieve tab te wisselen, maar die werken in de meeste browsers niet of zijn niet gekend of overschrijven reeds bestaande toetscombinaties.

Resultaat

<div id="Tabs">
<ul role="tablist">
<li role="presentation">
<a role="tab" tabindex="0" aria-selected="true" aria-controls="tabsdemo-1" 
id="tabsdemo-1-tab" href="#tabsdemo-1">Dogs</a></li>
<li role="presentation">
<a role="tab" tabindex="-1" aria-selected="false" aria-controls="tabsdemo-2" 
id="tabsdemo-2-tab" href="#tabsdemo-2">Cats</a></li>
<li role="presentation">
<a role="tab" tabindex="-1" aria-selected="false" aria-controls="tabsdemo-3" 
id="tabsdemo-3-tab" href="#tabsdemo-3">Sheep</a></li>
</ul>
			
<div role="tabpanel" style="display: block;" aria-labelledby="tabsdemo-1-tab" 
id="tabsdemo-1">
<p>The dog Canis lupus familiaris, is?</p>
</div>

<div role="tabpanel" style="display: none;" aria-labelledby="tabsdemo-2-tab" 
id="tabsdemo-2">
<p>The cat (Felis catus), also known as? </p>
</div>
				
<div role="tabpanel" style="display: none;" aria-labelledby="tabsdemo-3-tab" 
id="tabsdemo-3">
<p>Domestic sheep are quadrupedal?</p>
</div>

Kant-en-klaar

De fantastische Nicolas Hoffmann heeft ook nu weer al dit werk voor u al gedaan: jQuery Accessible tab panel system, using ARIA - By Nicolas Hoffmann

Tabpaneel van Nicolas Hoffmann

Opmerkingen

  • Niet alle browsers hebben even goede ondersteuning voor ARIA en dat geldt helaas ook voor screenreaders. Hoe recenter de versie, hoe beter, maar veel mensen werken niet met de meest recente versie.
  • Nog niet alle toetsenbordgebruikers weten dat ze de pijltoetsen moeten gebruiken om tussen tabs te schakelen.
  • Veel screenreadergebruikers weten (nog) niet wat "tab" wil zeggen en hoe ze het moeten gebruiken. Bij het activeren van een tab, gaat de screenreader in formuliermodus. Zo kan je de pijltoetsen gebruiken om tussen tabs te schakelen, maar als je dat niet weet, is het heel verwarrend. Tabs zijn geen links en staan dus niet in de linklijst van een screenreader.
  • Het web wordt ingewikkelder en iedereen zal moeten volgen om bij te blijven. Naarmate de ondersteuning door screenreaders en browsers groeit, zullen gebruikers er ook meer vertrouwd mee raken. Dat zal enkel gebeuren als alle tabs volgens dezelfde principes worden gebouwd. Als u niet de versie van Nicolas Hoffmann gebruikt, test dan grondig dat uw variant even goed werkt.
  • Gebruik in een tabswidget geen role="application" want dan kan een screenreadergebruiker de inhoud van het tabpaneel niet lezen met de vertrouwde toetscommando's. Meer hierover in het artikel Gebruik geen role=application
  • Zorg ervoor dat ook de usability van uw tabs-widget goed zit.
Reageer als eerste

Europese wetgeving moet beter

Bart Simons op 09/06/2015

Cet article en français: Directive européeenne : il faut exiger plus

Aan de 28 Europese ministers van telecommunicatie, aan minister De Croo:

De Europese instellingen beloven wetgeving die toegankelijkheid van websites verplicht. Om dat doel te bereiken, moeten de huidige voorstellen drastisch verbeteren. Anders wordt het een maat voor niets.

Minister De Croo zegt in een antwoord op een schriftelijke vraag:

Daarnaast stimuleer ik het Europees initiatief om te komen tot een verordening die de overheid verplicht hun websites toegankelijk te maken voor bezoekers met een functionele beperking op basis van internationale open standaarden voor webtoegankelijkheid. Dit is van toepassing op alle overheidswebsites en websites van organisaties die overheidstaken uitvoeren.

@DigitalAgendaBe bevestigt via Twitter:

Hier zijn we heel blij mee. Tegelijk roepen we onze minister op om er mee voor te zorgen dat het een goede wet wordt die echt een verschil maakt voor de 80 miljoen Europeanen met een handicap.

Concreet gaat het over een richtlijnvoorstel van de Europese Commissie op 3 december 2012. Dit was een mager beestje:

  • een beperkt aantal overheidswebsites,
  • enkel voor websites en niet voor andere digitale communicatie,
  • niet voor informatie die verspreid wordt via apps voor mobiele toestellen,
  • geen sancties,
  • geen aanspreekpunt voor klachten.

Het Europees Parlement zag deze tekortkomingen en formuleerde heel wat amendementen bij het richtlijnvoorstel. Deze werden met 92% van de stemmen aangenomen op 26 februari 2014.

Dit was hoopgevend maar de Commissie en de lidstaten lijken deze amendementen te negeren. In het laatste voortgangsrapport van het Letse voorzitterschap van de Raad van de Europese Unie (PDF-document) staan verontrustende voorstellen:

  • geen apps,
  • uitzonderingen voor downloadbare documenten,
  • uitzonderingen voor third-party content.

We roepen minister De Croo op om vrijdag tijdens de vergadering van de Raad van de Europese Unie deze voorstellen van tafel te vegen. Mensen met een handicap hebben een wet nodig die het recht op toegang tot digitale informatie verzekert, zoals beschreven in artikel 9 van het VN-verdrag. Inspiratie vindt u in deze aanbevelingen voor leden van de Raad van de EU (Word-document) van de European Blind Union.

Dat er wetgeving moet komen, is duidelijk. Vrijblijvende actieplannen werken niet. We wachten er bovendien al erg lang op. In de Digitale Agenda voor Europa staat nochtans:

De Commissie zal: (...) tegen 2011 (...), voorstellen doen om te garanderen dat websites van de overheid (en websites die basisdiensten aan de burger leveren) tegen 2015 volledig toegankelijk zijn.

De lidstaten discussiëren nog steeds over de voorstellen. Zorg alstublieft dat de wet er komt en vooral dat deze wet zijn doel bereikt: dat burgers met een handicap gewoon mee profiteren van de digitalisering.

Reageer als eerste

Dialoogvensters

Gijs Veyfeyken op 27/05/2015

Cet article en français: Fenêtres de dialogue modales

Geen tijd om te lezen? Implementeer deze jQuery Simple and Accessible Modal Window by Nicolas Hoffmann (Github).

Er zijn twee soorten dialoogvenster. Modal dialogs en non modal dialogs. Een modal dialog onderbreekt de gebruiker en vraagt om een antwoord. Je kan niet verder werken tot je het venster sluit. We kennen dit soort vensters van het besturingssysteem dat ons waarschuwt en een bevestiging voor een bepaalde actie vraagt. Bijvoorbeeld als ik een e-mailbericht sluit dat nog niet verzonden is.

dialoogvenster mail app save message as draft

Non modal dialogs zijn gelijkaardig maar onderbreken de applicatie niet. Je kan verder werken terwijl het venster open staat. Denk bijvoorbeeld aan het zoekvenster van Microsoft Word.

dialoogvenster zoekfunctie Word

Beide soorten dialoogvensters zien we ook op het web. Om in te loggen op een dienst, in te schrijven op een nieuwsbrief of om iets te tonen. Bijvoorbeeld de vergrote weergave van een foto. Zelfs video wordt embed in dialoogvensters. Synoniemen op het web zijn lightbox of overlay. Daar schreven we eerder over in de blogpost Lightbox: veel gebruikt, zelden voor iedereen bruikbaar.

In een applicatie kan een non modal dialog nuttig zijn. In een webomgeving is er geen nood aan. De enige uitzondering die we kennen is een cookiemelding. Daarom richten we ons op het gedrag en de vereisten voor een toegankelijke "modal" dialog.

focus management

  1. button opent dialog
  2. focus springt naar parent div of eerste formulierelement
  3. focus springt terug naar button bij het sluiten

Het openen van een dialoogvenster is een actie. Daarom gebruik je best een <button> om het te openen. Liever geen link <a href="">, want je navigeert niet naar een andere pagina.

Bij het openen springt de focus voor toetsenbord - en screenreadergebruikers naar de dialog. Zonder die sprong weet een screenreadergebruiker niet dat er iets is gebeurd. Het lijkt alsof de knop niet werkt. Een toetsenbordgebruiker zal doorheen alle elementen moeten tabben vooraleer hij aan de dialog komt omdat die meestal onderaan in de broncode staat.

Laat de focus daarom naar de parent <div> van de dialog springen. Een alternatief is het eerste formulierelement binnen de dialog. De eerste optie heeft de voorkeur voor blinden. Dan slaat men geen informatie over. De tweede optie is handiger voor toetsenbordgebruikers. De focus zit meteen op het eerste element dat om een actie vraagt (invoerveld of knop).

De focus verplaatsen gebeurt via een .focus() JavaScript event. De <div> van de dialog waar de focus heen moet, kan normaal geen focus krijgen. Een <div> komt niet voor in de tabvolgorde. Dat los je op door het attribuut tabindex="-1" toe te voegen. Tabindex -1 zet het element niet in de tabvolgorde maar zorgt ervoor dat je er met Javascript naartoe kunt springen en focus geven.

Bij het sluiten van de dialog springt de focus terug naar het element (button) dat de dialog opende. Als dit niet gebeurt, is een screenreadergebruiker gedisorriënteerd.

Opgelet, de Supernova screenreader van Dolphin ondersteunt helaas geen focus management en is een populaire screenreader onder blinden en slechtzienden in België. We hebben de ontwikkelaars ingelicht maar ze zien dit tot onze verbazing niet als een probleem. Meer hierover in de blogpost over Supernova en focus management.

Keyboard trap

Het is niet alleen belangrijk dat de focus naar de dialog springt. De focus mag er ook niet buiten gaan. Een modal dialog vraagt een actie van de gebruiker vooraleer die verder kan. In de meeste implementaties kan je met de tabtoets of met een screenreader buiten de dialog gaan. Hoe voorkom je dat?

Plaats een aria-hidden attribuut in alle paginablokken (header, main, footer) die op hetzelfde niveau staan als de dialog. Plaats het niet op een parent element, bijvoorbeeld de body. Toggle dat attribuut via JavaScript van aria-hidden="false" naar aria-hidden="true" wanneer de dialog opent. Voor de <div> van de dialog zelf doe je het omgekeerde. Screenreaders negeren elementen met aria-hidden="true". Door alles behalve de dialog te verbergen, creëer je een toetsenbordval voor screenreaders.

ARIA heeft geen invloed op een normale toetsenbordgebruiker. De keyboard trap voor de tabtoets creër je via JavaScript. Voorbeeld keep focus Github.

Zorg er daarnaast liefst ook voor dat de gebruiker de dialog kan sluiten door op de escape-toets te drukken.

Visuele focus indicator

Je verplaatst de focus en houdt die binnen de dialog voor toetsenbordgebruikers. Vergeet geen visuele focus stijl via CSS toe te voegen. Anders is het voorgaande zinloos. Iemand die door de pagina tabt moet kunnen zien waar de focus is. Browsers geven alle elementen die de focus krijgen, een default outline. Een dotted border in Firefox (Gecko) en Internet Explorer (Trident), een solid border in Chrome en Safari (Webkit). Overschrijf die stijl liever met een duidelijkere outline. Wis ze zeker niet. Let op met reset stylesheets.

Betekenisvolle knoppen

Dialogs hebben vaak een (extra) sluitknop in de vorm van een "x" zoals de sluitknop in vensters van het besturingssysteem. Let erop dat die in de tabvolgorde zit en begrijpelijk is voor een screenreadergebruiker. "x" is niet betekenisvol. Geef de button "sluiten" als opschrift en gebruik een CSS background-image van een "x". Of kies voor een font icon met verborgen tekst.

ARIA

Nog nooit van ARIA gehoord? Lees dan eerst even deze samenvatting.

HTML5 heeft het <dialog> element geïntroduceerd. Er is nog geen ondersteuning door browsers en screenreaders. Met ARIA geven we informatie aan screenreaders waar HTML te kort schiet. In dit geval <div role="dialog"> zodat het wordt aangekondigd als een dialoogvenster.

De dialog wordt nu correct aangekondigd maar heeft nog geen naam. Met het aria-labelledby attribuut koppel je de kop <h1> van je dialog aan de parent <div>.

Sommige screenreaders lezen enkel formulierelementen voor binnen een dialog. Theoretisch is dat correct omdat een modal dialog eigenlijk niet dient om uitgebreide informatie in te steken. Je lost dit op door een child <div role="document"> toe te voegen. Role document zorgt ervoor dat een screenreader in "browse mode" gaat in plaats van "forms mode". Zo wordt alles toch mooi voorgelezen.

Samenvatting

  • Focus verspringt naar modal dialog (omsluitende div) als die opent
  • Focus is visueel duidelijk
  • Focus kan het dialoogvenster niet verlaten
  • Focus gaat terug naar button als dialog sluit
  • Knoppen zijn goed benoemd
  • Laat de dialog ook sluiten met de escape-toets
  • Gebruik role="dialog" voor omsluitende div
  • Gebruik role="document" voor inhoud
  • Gebruik aria-hidden="true" om de rest van de pagina te verbergen voor screenreaders

Voorbeeld

Nicoals Hoffmann heeft een jQuery plugin geschreven die aan alle bovenstaande zaken voldoet.

jQuery Simple and Accessible Modal Window by Nicolas Hoffmann (Github)

modal dialog

Reageer als eerste

Een toegankelijke overheid

Gijs Veyfeyken op 21/05/2015

Cet article en français: Accessibilité du Service Public

Vandaag is het Global Accessibility Awareness Day. #GAAD voor Twitteraars onder jullie.

The purpose of the day is to get people talking, thinking and learning about digital (web, software, mobile, etc.) accessibility and users with different disabilities.

We richten onze aandacht vandaag op de overheid. Die gaat met volle gas voor digitale dienstverlening. Super! De digitale wereld kan toegankelijker zijn dan de fysieke wereld. Maar dat is die vandaag zeker niet.

logo Federale overheid logo Brussels hoofdstedelijk gewest

De verschillende overheden in België delen onze wens voor een toegankelijkere overheid. Daar is geen twijfel over. Ze tekenden het verdrag inzake de rechten van personen met een handicap en er is de federale wet ter bestrijding van discriminatie. Maar ze pakken het niet effectief aan.

logo Waalse overheid logo Vlaamse overheid

Een niet zo vruchtbaar verleden

Provincies maakten budget vrij voor website-audits van hun steden en gemeenten. De Vlaamse en Waalse overheid voor hun afdelingen. Net als het Brussels gewest en de Kanselarij van de Eerste Minister voor federale websites. Tientallen audits en rapporten met problemen en mogelijke oplossingen om die websites te verbeteren. Toch leidde dat niet altijd tot toegankelijkere websites. Omdat de verantwoordelijken niet om een audit vroegen. Het kwam van bovenaf. En het kwam na de bouw van hun website.

De Vlaamse regering besliste in 2004 dat al haar websites toegankelijk moeten zijn. Zowel bij aanbestedingen van de Vlaamse als de Federale overheid is het een verplichte vereiste in de technische specificaties. Maar er is geen controle, verplichting of beloning. Het project ToeWeb van de Vlaamse overheid richtte een stuurgroep op met een contactpersoon uit elk beleidsdomein. Ze boden opleiding aan en hielden de vinger aan de pols. Het project werd enkele jaren geleden op een waakvlammetje gezet.

Een onzekere toekomst

In het federale regeerakkoord staan twee zinnetjes die ons interesseren:

De overheid onderzoekt hoe ze samen met de Gemeenschappen en het middenveld de bevordering van e-inclusie kan intensifiëren, zowel op vlak van toegankelijkheid en toegang als op vlak van het gebruik van ICT in het dagelijkse leven.
Websites en digitale documenten zijn maximaal toegankelijk voor alle gebruikers, inclusief ouderen, kleurenblinden, slechtzienden en personen met een handicap.

We dachten dat dit concreet zou worden bij de lancering van Digital Belgium van minister De Croo, het actieplan dat de digitale langetermijnvisie voor ons land schetst en vertaalt in duidelijke ambities. Helaas geen woord over toegankelijkheid.

We duimen dat het wetsvoorstel webtoegankelijkheid het haalt. Bijna alle Europese lidstaten hebben nu al wetgeving op dit vlak. Wacht niet tot Europa het verplicht met regelgeving. Keur dit wetvoorstel nu goed.

Vlaanderen gaat radicaal digitaal. In de volgende 3 jaren gaat er 10 miljoen euro naar digitale dienstverlening, bovenop de nodige ICT-investeringen. Er is een nieuw agentschap Informatie Vlaanderen opgericht dat alles in goede banen moet leiden. Wij hopen dat minister Homans leert uit de ervaringen van het verleden en deze kans benut om een integraal toegankelijke dienstverlening op te zetten.

To-do lijst

Met regelgeving alleen creëer je geen toegankelijke dienstverlening. Wat moet er dan gebeuren om een grote organisatie zoals een overheid toegankelijk te maken?

  1. Bewustmaken. Toegankelijkheidsvereisten botsen vaak op weerstand. Zonder sensibilisering op alle niveau's van de organisatie is die weerstand moeilijk te doorbreken.
  2. Verantwoordelijkheid in de juiste handen Iedereen moet zijn steentje bijdragen maar leg de eindverantwoordelijkheid liever bij de techneuten dan bij een handicapgerelateerde dienst.
  3. Kennis en vaardigheden. Maak toegankelijkheidsexperts van huidige werknemers of neem nieuwe mensen aan met bewezen ervaring. Eis en controleer de nodige vaardigheden van externe partijen die voor u werken.
  4. Processen. Er is geen begin en eindpunt. Integreer toegankelijkheid in elke stap van elk proces. Enkel testen op het einde van de rit is onvoldoende.
  5. Framework. Kies een toegankelijk framework of verbeter het huidige. Hergebruik zoveel mogelijk dezelfde componenten. Verbeter ze continu. Zet enkel stappen vooruit en nooit een stap terug.

Een goed voorbeeld is de Canadese overheid. Een blinde dame legde klacht neer omdat ze niet online voor de overheid kon solliciteren. Canada verloor de rechtszaak en werd verplicht om haar websites toegankelijk te maken. De Canadese overheid trainde 4000 developers en maakte 10 miljoen webpagina's toegankelijk op 15 maanden tijd. Interview lead accessibility consultant David Macdonald. Zijn advies:

canadese vlag
  • Get senior management buy-in either by carrot or stick.
  • Choose the IT frameworks carefully
  • Design for accessibility when the cement is wet
  • Get the templates right
  • Train your staff

Aan Federaal minister van Digitale Agenda Alexander De Croo,
aan Vlaams minister van Binnenlands Bestuur en Gelijke Kansen Liesbeth Homans,
aan Brussels staatssecretaris voor Informatica, Digitalisering en Gelijke Kansen Bianca Debaets,
aan Waals minister voor Digitale Zaken Jean-Claude Marcourt,

Maken we er samen werk van?

Reageer als eerste

21 mei: Global Accessibility Awareness Day

Bart Simons op 18/05/2015

Cet article en français: Le 21 mai : Global Accessibility Awareness Day

Op donderdag 21 mei is het Global Accessibility Awareness Day. Die dag vragen mensen in de hele wereld aandacht voor digitale toegankelijkheid. Ook u kunt uw steentje bijdragen. Als de term "digitale toegankelijkheid" u de wenkbrauwen doet fronsen, is deze dag de ideale gelegenheid om er meer over te leren. Als u al weet waar het over gaat, is dit de gelegenheid om ook andere mensen erover te vertellen, om iets bij te leren, of om de tijd te nemen om iets concreets te verbeteren aan de toegankelijkheid van een onderdeel van uw website.

Uw uitdaging voor 21 mei, help digitale toegankelijkheid vooruit en praat erover in uw omgeving.

Nog veel te doen

In België heeft 15% van de bevolking een handicap. Als de digitale wereld niet toegankelijk is, kunnen al deze mensen steeds moeilijker meedoen in onze samenleving. Maar digitale toegankelijkheid helpt veel meer mensen. Niemand is perfect en de omstandigheden waarin we het internet gebruiken, zijn ook veel diverser geworden.

Nochtans zijn vandaag slechts 14% van de Belgische websites toegankelijk voor iedereen. Online bankieren, boodschappen doen en een vlucht boeken zijn voor veel mensen nodeloos moeilijk of onmogelijk. Niet omdat de technologie ontbreekt maar omdat de interfaces slecht gebouwd zijn.

De uitdaging

1. Ervaar het zelf

Ervaar zelf welke toegankelijkheidsproblemen je als persoon met een handicap ondervindt door bijvoorbeeld:

  • De muis van uw computer los te koppelen en een kwartiertje enkel met het toetsenbord te surfen. Gebruik de tabtoets om van link naar link te navigeren en Enter om een link te activeren.
  • Het geluid van uw computer uit te schakelen en enkele video's te bekijken.
  • Met de Chrome-extensie NoCoffee Vision Simulator kleurenblindheid en verminderd kleurcontrast te simuleren.

    Instellingen van de Nocoffee extensie: color deficiency=deuteranopia, contrast loss=30

  • Alle afbeeldingen te vervangen door hun alt-tekst op de webpagina's die u bezoekt. In Firefox kunt u daarvoor de optie 'Replace images with alt attribute' gebruiken in de web developer toolbar.

Als u problemen ondervindt om de inhoud te begrijpen, dan is de website onvoldoende toegankelijk.

2. Toegankelijkheid verbeteren van een onderdeel van uw website

Verbeter iets aan de toegankelijkheid van uw (toekomstige) website. Hier volgen enkele suggesties afhankelijk van uw profiel:

Als u inhoud aanlevert:

  • Zoek in uw CMS hoe u een tekstalternatief toevoegt aan afbeeldingen. Vul ontbrekende tekstalternatieven in of verbeter eventueel fouten. Deze beslissingstabel helpt u een goed tekstalternatief te bepalen voor verschillende soorten afbeeldingen.
  • Ondertitel een video op YouTube: dit is nuttig voor doven en slechthorenden en ook voor mensen voor wie Nederlands niet hun moedertaal is.
  • Als u documenten maakt in Microsoft Word die u later als PDF opslaat, controleer of u ze op een toegankelijke manier omzet naar PDF.

Als u grafisch ontwerper bent:

  • Meet het contrast van de tekst ten opzichte van de achtergrond, bijvoorbeeld met de Color Contrast Analyser. Als het contrast lager is dan 4,5, probeer dan een combinatie te vinden van kleuren die en beter contrast opleveren, bijvoorbeeld met de Tanaguru Contrast Finder.
  • Als de focus niet zichtbaar is tijdens het tabben van link naar link, zoek dan in de CSS naar outline:none statements en verwijder ze zonder nadenken.

Als u ontwikkelaar bent:

U kan uiteraard andere acties ondernemen die hier niet zijn vermeld. U kan ook een willekeurig ijkpunt van de AnySurfer checklist nemen en nagaan of uw website eraan voldoet. Er is telkens een testmethode uitgeschreven.

3. Praat erover

Tijdens de Global Accessibility Awareness Day nodigen we iedereen uit om over digitale toegankelijkheid te praten. Deel wat u heeft geleerd, vertel de wereld welke verbeteringen u heeft aangebracht en aarzel niet om ons te informeren of uw vragen te stellen. De Twitter hashtag van de awareness day is #gaad.

Bedankt voor uw bijdrage. Hopelijk niet alleen op 21 mei maar ook daarna!

Reageer als eerste