JavaScript OnClick? Gebruik dan a of button.

Bart De Clercq op 25/06/2014

Meer en meer komen we elementen tegen die aanklikbaar zijn maar die geen toetsenbord focus verwerven. Ziende toetsenbord gebruikers kunnen er niet naartoe tabben, blinde screenreader gebruikers weten niet dat er iets interactief is of nog andere gebruikers kunnen geen commando geven aan hun spraaksoftware.

Deze elementen linken niet naar een pagina maar veroorzaken een paginawijziging aan de hand van JavaScript.

Enkele voorbeelden:

  • Een hamburger menu om de navigatie te tonen in een responsive website:
    <span onclick="...">Toggle navigation</span>
  • Sluitknop, vorige en volgende knoppen in een lightbox:
    <div onclick="...">Sluiten</div>
  • Links in facetnavigatie om zoekresultaten te filteren:
    <li onclick="...">Tussen 1200W en 1500W</li>
  • Sorteren van tabellen aan de hand van de th elementen:
    <th onclick="...">Datum</th>
  • Items uit je winkelwagentje verwijderen:
    <img onclick="..." alt="Verwijder item" />

<div>, <span>, <th>, … elementen die interactief gemaakt zijn, zijn bijna nooit toetsenbord toegankelijk. Als je dat wel wilt, moet je veel moeite doen met tabindex, ARIA en/of extra JavaScript om deze elementen toch focusbaar te maken en bruikbaar te maken voor elk type gebruiker.

De oplossing is relatief eenvoudig. Gebruik altijd een link of button waar je je JavaScript aan koppelt. Een link of button komt altijd in de tab flow en krijgt altijd toetsenbord focus. Werk je met JavaScript en link je niet naar een pagina? Dan zijn er enkele manieren om dit te doen, we werken met heel simpele JavaScript code die een alert toont om onze code voorbeelden beknopt te houden.

a href="#"

In deze eerste manier staat de JavaScript code onClick als attribuut bij de link.

<a href="#" onclick="alert('Code voorbeeld 1');">
  Voorbeeld 1
</a>
Voorbeeld 1

Event Listener

Bij een listener kan je makkelijk je code scheiden van je element. Je JavaScript code kan in je HTML staan of in een apart JavaScript bestand staan.

We gebruiken jQuery om de event listener te koppelen aan de link met id="link2".

<a href="#" id="link2">
  Voorbeeld 2
</a>
<script>
  $("#link2").click(function() {
    alert('Code voorbeeld 2');
  });
</script>
Voorbeeld 2

In href

Hier maak je geen gebruik van een listener of OnClick maar staat de code in het href attribuut.

<a href="javascript:alert('Code voorbeeld 3');">
  Voorbeeld 3
</a>
Voorbeeld 3

Advies

Naar toegankelijkheid toe is elke manier mogelijk, kies er diegene uit die het best bij je workflow past.

Gebruik geen of niet alleen onMouseOver, onMouseOut, onKeyDown, onKeyUp en onDblClick aangezien die niet voor elke gebruiker kunnen werken. OnClick doet dat wel, gebruik onClick zoals in één van onze drie voorbeelden.

Reageer als eerste

5 redenen waarom toegankelijkheid een plaats verdient in uw communicatiestrategie

Gijs Veyfeyken op 30/04/2014

Deze tekst is geschreven als gastblogpost voor Toecomst, Logboek van het project Visie en strategie Vlaamse overheidscommunicatie 2014-2020

1. Omdat Europa het verplicht

Er zit nieuwe Europese wetgeving in de pijplijn die de toegankelijkheid van overheidsinformatie en diensten op het web, e-government, verplicht onder de lidstaten. Europa hanteert de Web Content Accessibitily Guidelines (WCAG) als norm. Deze internationaal erkende ISO-standaard bevat 3 niveau’s van toegankelijkheid.

  • WCAG level A: basisniveau, de norm om het AnySurfer label te behalen.
  • WCAG level AA: gemiddeld niveau, de norm die Europa oplegt
  • WCAG level AAA: strengste niveau, in de praktijk nauwelijks haalbaar

Meer info over wetten en standaarden.

Bekijk de toespraak van Neelie Kroes van de Europese Commissie op Youtube: Making the web accessible for people with a disability.

2. Omdat 15% van de Vlamingen een beperking heeft

  • mensen met een motorische handicap, die het moeilijk hebben met een muis of toetsenbord
  • blinden, die spraaksoftware gebruiken om naar een website te luisteren
  • slechtzienden, die vergroting gebruiken en nood hebben aan hoge contrasten
  • slechthorenden, waarvoor ondertiteling essentieel is.
  • doven, bij wie gebarentaal de moedertaal is en het Nederlands een vreemde taal is.
  • dyslectici, personen met een concentratiestoornis of andere cognitieve stoornissen.

Vergeet de vergrijzing van de bevolking niet. Dit cijfer zal enkel stijgen.

3. Omdat 15% van de Vlamingen de taal van de overheid niet spreekt

“In Vlaanderen is 15% van de volwassenen laaggeletterd. Dit betekent dat meer dan een half miljoen Vlamingen (580.470) kampt met een duidelijk geletterdheidsprobleem.”

Bron Vakgroep Onderwijskunde Universiteit Gent

Het gemiddeld taalniveau ligt op B1 of B2 van het Europees referentiekader. Het merendeel van overheidscommunicatie is geschreven op niveau C1, te moeilijk voor het grootste deel van de bevolking.

Iedereen leest graag klare taal.

4. Omdat vanaf het begin rekening houden met toegankelijkheid, tijd, moeite en middelen bespaart

Vergelijk het met het bouwen van een huis. Als de architect rekening houdt met toegankelijkheid in het ontwerp, blijft de meerkost beperkt en is het huis bij oplevering meteen bruikbaar. Wanneer toegankelijkheid pas achteraf ter sprake komt, zijn verbouwingen noodzakelijk. Dit kost nodeloos tijd, geld en moeite.

  • Kies voor een erkende webbouwer met bewezen ervaring en expertise
  • Neem toegankelijkheid op als vereiste in de aanbesteding van nieuwe websites en controleer bij oplevering

5. Omdat Google en mobiele gebruikers steeds belangrijker worden

  • Search Engine Optimisation (SEO): Google is blind en leest uw website op gelijkaardige wijze als een blinde met een screenreader dat doet. Toegankelijkheidsrichtlijnen helpen u beter scoren in Google.
  • Mobile: mobiele gebruikers zijn ook “gehandicapt”. Ze kunnen geen muisfuncties uitvoeren en lezen op een klein scherm, vaak in een omgeving met zonlicht, waardoor hoge contrasten wenselijk zijn.

Hoe staat de Vlaamse overheid er momenteel voor?

AnySurfer onderzoekt jaarlijks de toegankelijkheid van het Belgische internetlandschap. Daarbij wordt ook een steekproef van Vlaamse overheidssites gescreend op vraag van de dienst Emancipatiezaken.

  • 14% van Belgische websites voldoet aan minimale toegankelijkheidsvereisten
  • 64% van Vlaamse overheidswebsites

Opgelet, dat wil niet zeggen dat 64% van de Vlaamse overheid voldoet aan de norm die Europa oplegt (WCAG level AA). Slechts 11% draagt het AnySurfer label (= WCAG level A). Het aantal websites dat voldoet aan WCAG level AA zal nog lager liggen.

Wat zijn de grootste uitdagingen?

  • Bewustwording: op vlak van fysieke toegankelijkheid, bijvoorbeeld van openbare gebouwen, is er een maatschappelijk draagvlak. Het is een evidentie. Bij digitale toegankelijkheid is dat nauwelijks het geval.
  • Word en PDF: er worden anno 2014 nog steeds massaal ontoegankelijke documenten online gezet om te communiceren met de burger. 90% van die documenten zouden beter als webpagina’s gepubliceerd worden. Dat is voor iedereen toegankelijker en gebruiksvriendelijker. Hetzelfde geldt voor interactie met de burger: formulieren.
1 reactie

Ontwikkelen van toegankelijke apps

Bart Simons op 25/02/2014

Smartphones en tablets die werken met Android en iOS zijn vandaag goed bruikbaar door personen met een handicap. Zie voor meer details ons eerdere artikel Mobiel surfen met een handicap. Meer en meer krijgen we dan ook de vraag om naast websites ook apps te testen op toegankelijkheid. Hier volgen een aantal zaken om rekening mee te houden en links om je als ontwikkelaar op weg te helpen. We beperken ons in dit artikel tot apps voor het Android en iOS platform.

In theorie zijn de Web Content Accessibility Guidelines technologie-onafhankelijk geformuleerd en zouden ze dus ook bruikbaar moeten zijn om apps te testen. Sommige aspecten lijken inderdaad veel op het testen van een website, vb. zijn knoppen gelabeld, links betekenisvol, tabellen lineariseerbaar en formuliervalidatie duidelijk voor wie het scherm niet kan zien.

Het is echter moeilijker om concreet te adviseren hoe gevonden problemen verholpen kunnen worden. We kunnen immers niet even in de broncode kijken zoals bij een website. Hier volgen enkele voorbeelden:

Bruikbaar met het toetsenbord

Het eerste ijkpunt van de AnySurfer checklist vraagt dat alle functionaliteit bruikbaar is met het toetsenbord. Hoe vertalen we dit naar het aanraakscherm van een smartphone of tablet?

Een blinde gebruiker gaat heel anders om met het aanraakscherm dan iemand die het scherm kan zien. Screenreaders als VoiceOver voor iOS en Talkback voor Android doen meer dan voorlezen wat er op het scherm staat. Ze bieden een heel bedieningsconcept, ook met aangepaste aanraakgebaren (bekijk een video). Met een vinger van links naar rechts vegen, verplaatst de focus naar het volgende element. U moet er als ontwikkelaar dus voor zorgen dat deze focus bij alle elementen van de app kan komen en dat dit in een logische volgorde gebeurt.

Semantiek

Gebruik zoveel mogelijk standaardcomponenten voor interactieve elementen als keuzelijsten en aankruisvakjes. Daarvoor voorzien screenreaders zelf al alternatieve bedieningsconcepten. Als u een eigen component programmeert, moet u die grondig testen met de screenreader en zelf een aantal functionaliteiten voorzien.

Afbeeldingen hebben een alt-tekst

Afbeeldingen op websites moeten een alt-tekst hebben. In apps geldt hetzelfde voor knoppen. Het concept is hetzelfde maar de terminologie zal verschillen van de ene ontwikkelomgeving tot de andere.

Als u vergeet een knop te labelen, dan wordt de bestandsnaam van de knop voorgelezen in plaats van de functie ervan. Het is veel vlotter als je "terug" hoort in plaats van "NavBarIconBackButtonSmall".

Documentatie voor ontwikkelaars

Zowel voor iOS als Android ontwikkelaars is documentatie beschikbaar over het ontwikkelen van toegankelijke apps voor deze platformen.

Daarnaast zijn er de Mobile Accessibility Guidelines van de BBC en van de Zweedse toegankelijkheidsspecialisten van Funka.nu. Het artikel Accessibility for iPhone and iPad apps vertelt een concreter verhaal. Laat je niet ontmoedigen door de lange inleiding.

Andere artikels of tips kunt u vermelden in de reacties op dit artikel.

Reageer als eerste

Screenreaders om je site mee te testen

Bart Simons op 07/02/2014

Een screenreader is software die blinden en slechtzienden gebruiken om de tekst van het computerscherm te laten voorlezen en/of in braille te laten verschijnen op een brailleleesregel. Uw website testen met een screenreader kan erg interessant zijn omdat het bepaalde toegankelijkheidsproblemen aan het licht brengt die anders moeilijk op te sporen zijn. Voor iemand die niet gewend is ermee te werken, is een screenreader tamelijk complexe software dus trek wat tijd uit om de handleiding te lezen en denk niet te snel dat het onmogelijk is om met een screenreader door uw website te surfen. Het artikel How to use NVDA and Firefox to test your web pages for accessibility geeft een goede inleiding die ook nuttig is als u besluit om met een andere screenreader te testen.

Waar moet u rekening mee houden?

Blinde screenreadergebruikers werken nooit met een muis en doen alles met toetscombinaties. Om een correcte test uit te voeren, mag u dus geen muis gebruiken in combinatie met een screenreader. De screenreader leest alles voor wat op het scherm staat maar doet dat in een bepaalde volgorde. Een groot probleem voor blinden is gebrek aan overzicht over het scherm. Een screenreadergebruiker weet niet wat er verderop nog zal komen en wordt niet altijd geïnformeerd over paginawijzigingen. Dit is moeilijk in te beelden voor een tester die een screenreader gebruikt maar het scherm wel kan zien. Om een echt realistische test uit te voeren, zou u eigenlijk niet alleen de muis aan de kant moeten laten maar ook het scherm uit moeten schakelen. Dit is uiteraard niet evident als u dit de eerste keer doet.

Screenreaders voor Windows

NVDA

Non Visual Desktop Access (NVDA) is een gratis en opensource screenreader. Een donatie wordt erg op prijs gesteld. Bij de installatie kunt u kiezen om een draagbare versie aan te maken. U kan de screenreader dan starten vanaf een USB-stick of vanaf een map op uw harde schijf zonder dat u iets moet installeren op uw computer. Sinds onze vorige blogpost over NVDA is het programma enorm verbeterd.

De Nederlandse stem die standaard bij NVDA zit, is van mindere kwaliteit. Voor een bescheiden bedrag kunt u een pakket kwalitatieve stemmen kopen waaronder Vlaams en Nederlands. Een andere mogelijkheid is het Microsoft Speech Platform. Deze stemmen zijn gratis maar er is op dit moment geen Vlaamse stem beschikbaar. U moet eerst Microsoft Speech Platform - Runtime (Version 11), x86 installeren. Merk op dat u de x86 versie moet installeren zelfs als uw systeem 64-bit is. Vervolgens installeert u de gewenste stemmen via de pagina Microsoft Speech Platform - Runtime Languages (Version 11). Kies de bestanden met TTS in de bestandsnaam en niet die met SR. Voor de Nederlandse stem Hanna installeert u het bestand MSSpeech_TTS_nl-NL_Hanna.msi. Vervolgens herstart u de computer.

Dan moet u in NVDA aangeven dat u deze stem wilt gebruiken. Druk insert+n, kies opties en vervolgens Synthesizer. Kies uit de lijst Microsoft Speech platform. Als u meerdere stemmen heeft geïnstalleerd, kunt deze instellen via insert+n, Opties, Stem.

Window Eyes

Window Eyes is een commerciële screenreader die u gratis kunt gebruiken als u over een licentie beschikt voor Office 2010 of hoger. Deze bevat voor het Nederlands ook enkel Hanna als stem.

JAWS

JAWS is een commerciële screenreader die u 40 minuten als demoversie kunt gebruiken. Daarna moet u de computer herstarten om er verder mee te kunnen werken. Download JAWS in het Nederlands. De meest recente versie is 15. Kies een 32- of 64bit-versie overeenkomstig uw besturingssysteem.

Merk op dat veel JAWS-gebruikers niet met de meest recente versie van de software werken omdat updates betalend zijn. Voor een realistische test zou u dus eigenlijk een oudere versie moeten gebruiken.

Kwalitatief hoogstaande stemmen zijn beschikbaar. Extra stemmen zijn gratis te downloaden. Ga naar Help, Webbronnen, Vocaliser Direct downloadpagina. Als u deze stemmen installeert, zullen ze enkel binnen JAWS werken.

Er is een specifieke tutorial om te leren surfen met JAWS.

Screenreader voor Mac

Mac-gebruikers hoeven geen screenreader te installeren, want vanaf het Lion besturingssysteem is deze ingebouwd en heet VoiceOver. Druk op command+f5 en uw computer begint te praten. Standaard praat hij Engels maar via de VoiceOver-instellingen kunt u de Nederlandse stem Ellen activeren. Lees meer over VoiceOver, de screenreader van Apple.

Tech Touch Team maakt een Nederlandstalige podcastreeks over het in gebruik nemen van een Mac als blinde gebruiker.

Reageer als eerste

Toegankelijkheid van de Vimeo HTML5 speler

Bart De Clercq op 04/02/2014

Vimeo kondigde onlangs zijn nieuwe videospeler aan. Deze nieuwe speler gebruikt niet langer Flash maar HTML5 als achterliggende technologie, en is volgens Vimeo toegankelijk. De vorige versie was niet bruikbaar met een screenreader en bevatte geen mogelijkheid om ondertiteling toe te voegen. We raadden hem dan ook altijd af. We hebben een testpagina gemaakt om na te gaan of de nieuwe speler toegankelijk is zoals beweerd wordt.

Flash nog steeds sterk aanwezig

Vimeo beweert zelf dat de HTML5 speler ingeladen wordt wanneer mogelijk. Opmerkelijk is dat de Flash speler nog relatief veel gebruikt wordt, ook in recente browsers zoals elke versie voor Internet Explorer 11, in FireFox voor Mac OS X en Opera.

Sommige bestandsformaten zullen altijd gebruik maken van de Flash speler. Bovendien, als er ondertiteling voorzien is, zal in FireFox altijd de Flash speler geladen worden.

Dit is een probleem aangezien de Flash speler absoluut niet toegankelijk is:

  • In Internet Explorer verdwijnen de bedieningsknoppen als de video enkele seconden speelt en kan je ze niet opnieuw oproepen met het toetsenbord.
  • De bedieningsknoppen in Flash zijn niet benoemd, een screenreader zal ze zelf een naam geven zoals 'knop zonder label 1', 'knop zonder label 2', enz. tot en met 'knop zonder label 14'.

Toetsenbordnavigatie

De HTML5 speler van Vimeo is niet altijd toetsenbordtoegankelijk. Reden hiervoor is dat de bedieningsknoppen verdwijnen na enkele seconden.

Met de tabtoets kom je volgende zaken tegen als je het video element overloopt: 'Play', 'Volume', 'CC', 'Full screen' en 'Vimeo'. Op het einde staan er nog enkele andere buttons: 'Like', 'Add to watchlist' en 'Share'.

De bedieningsknoppen van Vimeo HTML5 speler

Zolang de video niet gestart wordt, kan je navigeren in het video element met het toetsenbord. Zodra de video gestart wordt, verdwijnen de bedieningsknoppen. Wanneer je verder tabt, verspringt de focus naar het eerstvolgende element buiten de videospeler, bijvoorbeeld een link of button. Als je van dit volgend element terug tabt (shift+tab), hangt het gedrag af van de browser.

In Chrome, FireFox en Internet Explorer verschijnen de knoppen opnieuw als je met tab een button van de speler tegenkomt. Je moet dus op de omgekeerde manier tabben om terecht te komen waar je wilt. De bedieningsknoppen in de speler blijven zichtbaar met deze werkwijze. In Safari is dit echter niet mogelijk.

Daarenboven is de focus niet zichtbaar op de button 'Play' in FireFox. Het zou handig zijn als dit wel zo is, je kan de stijl voor :hover ook toepassen op :focus.

Toetsenbordnavigatie met een screenreader

De bedieningsknoppen in de HTML5 speler zijn gelukkig goed benoemd. Een screenreader geeft volgende output: 'Like', 'Add to watch later', 'Share', 'Play', 'Volume', 'HD' en 'Full screen'.

Het is jammer dat de 'Play' button op de vierde plaats komt, bij het tabben staat hij namelijk op de eerste plaats. Dit verschil in gedrag is te wijten aan het gebruik van tabindex. De buttons staan in de broncode in een onlogische volgorde, er wordt gebruik gemaakt van tabindex om dit recht te zetten en de tabvolgorde wel correct te laten verlopen. Een screenreader gebruiker die de pagina lineair afloopt door pijltje omhoog en pijltje omlaag, heeft geen voordeel van deze aanpassing. Het is beter om de buttons in een logische volgorde in de broncode te plaatsen, dan achteraf de volgorde te wijzigen met tabindex.

Opnieuw is het verdwijnen van de bedieningsknoppen een groot probleem. Na enkele seconden verdwijnen deze en is het onmogelijk om ze opnieuw op te roepen. Ze worden verborgen op een specifieke manier dat ook screenreader gebruikers de bedieningsknoppen niet meer kunnen terug vinden. Een oplossing zou zijn om ze offscreen te plaatsen zodat ze zichtbaar blijven voor screenreader gebruikers.

Ondertiteling

Het is mogelijk om ondertiteling toe te voegen aan een video filmpje. De volgende ondertitelingsformaten zijn ondersteund: SRT, WebVTT, DFXP/TTML, SCC en SAMI.

Als je ondertiteling toevoegt bij een video fragment, kan je aanduiden of het ondertiteling is voor doven en slechthorenden (CC) of normale ondertiteling (Subtitles).

Instellingen voor ondertiteling bij een video fragment

Wanneer de video is voorzien van ondertiteling, zal er automatisch een button CC bijkomen in de bedieningsknoppen van de HTML5 speler. Door er op te klikken, komt er een menu tevoorschijn met de beschikbare versies. Ondertiteling voor doven en slechthorenden wordt extra gemarkeerd met CC.

Menu om ondertiteling te kiezen.

Vimeo voorziet geen automatische ondertiteling, je moet het bestand zelf aanmaken en uploaden bij het filmpje.

Besluit

De nieuwe HTML5 speler van Vimeo is in meerdere opzichten een verbetering tegenover de oude Flash speler:

  • Je kan ondertiteling toevoegen.
  • Je kan met het toetsenbord navigeren.
  • De bedieningsknoppen zijn benoemd.

Ondanks deze vele aanpassingen, is de speler niet voor iedereen bruikbaar. We raden aan om momenteel de HTML5 video speler niet te gebruiken, en wel om deze redenen:

  • In veel situaties wordt nog een ontoegankelijke Flash speler geladen.
  • Het verdwijnen van de bedieningsknoppen is een groot probleem voor screenreader gebruikers.

Als je Vimeo toegankelijk wil maken, moet je zelf bedieningsknoppen voorzien door gebruik te maken van de JavaScript API, of de Vimeo speler in een andere toegankelijke speler opnemen, zoals bijvoorbeeld de Nomensa speler.

Reageer als eerste