Toegankelijke uitklapmenu's

Bart Simons op 29/04/2015

Links in een uitklapmenu verschijnen als je er met de muis over gaat. Hetzelfde is vaak moelijk of onmogelijk met het toetsenbord en screenreaders. We vatten de essentiële punten samen waarop u moet letten en geven voorbeelden van goede uitklapmenu's die voor alle gebruikers vlot toegankelijk zijn.

voorbeeld van een uitklapmenu met 4 niveaus

Algemene aanbevelingen

  • Structureer de links van het menu met een HTML-lijst met een of meerdere nesting niveau's.
  • Zorg ervoor dat alle niveau's van het uitklapmenu bereikbaar en activeerbaar zijn, ongeacht hoe men ermee interageert: met de muis, het toetsenbord, een screenreader en andere hulpmiddelen.

U kunt bijkomende informatie geven:

  • Markeer de geneste lijst als een navigatiemenu met <nav role="navigation">
  • Kondig aan dat de links van het eerste niveau van het menu dienen om een submenu te openen: aria-haspopup="true"
  • Kondig aan wat de status is van de elementen van het menu: open of gesloten, met aria-expanded="true" en aria-expanded="false"

Goede oplossingen

De goede oplossing hangt af van de context. Het is de bedoeling dat iedereen zich gemakkelijk kan oriënteren in de site en er gemakkelijk in kan navigeren.

We verdelen uitklapmenu's in twee catégorieën, met als belangrijkste verschillen:

  • wat men moet doen om het submenu te laten verschijnen: verschijnt het als de muis erover beweegt (hover) of moet men klikken? Verschijnt het met het toetsenbord met TAB of ENTER?
  • de manier waarop de submenu's zijn verborgen: offscreen (of clipping) of display:none.

Er bestaan heel wat combinaties. We hebben ervoor gekozen twee oplossingen voor te stellen die goed werken.

TAB en offscreen positioneren

Voorbeelden: responsive uitklapmenu gebaseerd op een voorbeeld van Simply Accessible en demo van een toegankelijk uitklapmenu voorgesteld door Accede Web. De eerste is responsive, de tweede niet, maar los daarvan is hun gedrag gelijkaardig.

uitklapmenu AnySurfer

uitklapmenu AnySurfer op mobile: verschijnt als geneste lijst

Het gedrag van het menu is als volgt:

  • Met de muis:
    • Het submenu verschijnt als de muis over het parent element beweegt.
    • Klikken op het parent element opent de bijhorende pagina.
  • Met het toetsenbord:
    • Het submenu verschijnt met TAB, als de focus op het parent element komt.
    • Met ENTER navigeert men naar de bijhornede pagina.
    • De inhoud van de geneste lijst kan van boven naar onder doorlopen worden met TAB, in de volgorde van de broncode.
  • Met een screenreader:
    • Het volledige menu is voortdurend zichtbaar als een eenvoudige geneste lijst want de submenu's zijn verborgen maar blijven zichtbaar voor een screenreader (offscreen of clipping). Het is dus niet nodig om aria-haspopup of aria-expanded te gebruiken.
    • Alle links van het menu zijn altijd zichtbaar in de linkslijst van de screenreader.
    • Het menu kan eenvoudig doorlopen worden met pijl omlaag, in de volgorde van de broncode.

Deze oplossing is aanbevolen als de links van het eerste niveau links zijn naar pagina's van de site.

Deze oplossing is niet praktisch als het uitklapmenu erg lang is want de gebruiker moet naar elke link tabben om het te doorlopen . In dit geval kan een skip link (ga naar inhoud) nuttig zijn.

ENTER en display:none

Voorbeeld: Adobe accessible mega menu.

uitklapmenu van Adobe

Het gedrag van het menu is als volgt:

  • Met het toetsenbord:
    • TAB doorloopt enkel de links van het eerste niveau, die zichtbaar zijn.
    • Het submenu verschijnt met ENTER.
    • TAB doorloopt het submenu als het verschenen is.
  • Met een screenreader:
    • Enkel het eerste niveau van het menu is voortdurend zichtbaar.
    • De submenu's zijn verborgen met display:none.
    • De screenreader kondigt aan dat het parent element dient om een uitklapmenu te laten verschijnen (dankzij aria-haspopup) en geeft aan of het menu momenteel uitgeklapt is of niet (dankzij aria-expanded).

Het grote voordeel van deze oplossing is dat een toetsenbbordgebruiker niet verplicht is alle niveau's van het menu met de tabtoets te doorlopen.

Voor ditzelfde gedrag met het toetsenbord zijn er drie varianten, afhankelijk wat de elementen van het eerste niveau van het menu doen:

  1. Enkel het submenu in- en uitklappen
  2. Het submenu uitklappen en een pagina van de site openen
  3. Enkel een pagina van de site openen (er is dan een aparte knop om het submenu in- en uit te klappen)

Eerste variant

De links van het menu dienen enkel om de submenu's in- en uit te klappen. Bij de links van het eerste niveau van het menu hoort geen pagina van de site.

  • Met de muis: het submenu verschijnt als men op het parent element klikt. Een tweede klik klapt het submenu weer in.
  • Met het toetsenbord: de eerste ENTER laat het submenu vrschijnen, de tweede ENTER klapt het weer in.

Het is een goede oplossing als er geen "landingspagina's" zijnop het eerste niveau van het menu.

Tweede variant

Voorbeeld op de pagina van het FWO

De links van het menu hebben een dubbele functie:

  • Met de muis: het submenu verschijnt als de muis over het parent element beweegt. Klikken op het parent element opent de bijhorende pagina
  • Met het toetsenbord: de eerste ENTER doet het submenu verschijnen. De tweede ENTER op dezelfde link opent de bijhorende pagina.

Dit type menu kan verwarring veroorzaken want dezelfde link heeft twee functies. Sommigen zullen niet begrijpen dat de link ook dient om een pagina te openen, en zullen die inhoud misschien niet ontdekken.

Derde variant

Voorbeeld op Screenfeed.

De links van het menu dienen om een pagina te openen en er is een aparte knop om het menu uit te klappen.

uitklapmenu 'poney' met een knop om het menu uit te klappen

Het is een goede oplossing als de elementen van het menu een dubbele functie hebben. Geef de knop een duidelijk opschrift.

Alternatief voor het uitklapmenu: submenu's op de pagina's

Voorbeeld: uitklapmenu op de site van de stad Leuven: het uitklapmenu onder "Ville de la bière" verschijnt niet met het toetsenbord en het is onzichtbaar met een screenreader. Maar als we op de link "Ville de la bière" klikken, vinden we een submenu dat dezelfde links bevat als het uitklapmenu:

uitklapmenu 'Ville de la bière' submenu in de linkerkolom dat dezelfde links bevat

  • Het submenu verschijnt als de muis erover beweegt.
  • Met het toetsenbord is het onmogelijk het submenu te laten verschijnen (niet met TAB en ook niet met ENTER).
  • Enkel het eerste niveau van het menu is voortdurend zichtbaar. De submenu's zijn verborgen met display:none.
  • Op alle pagina's die vanuit het menu bereikbaar zijn, is een submenu beschikbaar dat identiek is aan het uitklapmenu.

Dit kan een oplossing zijn als het uitklapmenu te lang is. Let er wel op dat het submenu op alle onderliggende pagina's gemakkelijk vindbaar is en dat het duidelijk is waarvan dit de subnavigatie is.

Vaak voorkomende fouten

We zien regelmatig uitklapmenu's die niet toegankelijk zijn. Dat kan verschillende oorzaken hebben. Vermijd alvast deze fouten:

  • Het uitklapmenu is enkel te doorlopen met de pijltjes, niet met TAB: dit gedrag verwacht men in een applicatie maar niet in een webpagina.
  • De ARIA-role-attributen menu, menubar of menuitem zijn gebruikt: deze rollen zijn bedoeld voor toepassingsmenu's en niet voor navigatiemenu's, en ze verbergen de semantiek die in de HTML-code aanezig was (zoals lijsten en links). Gebruik deze rollen dus niet voor navigatiemenu's.
  • TAB doorloopt de links van de submenu's maar ze worden niet zichtbaar. U moet ervoor zorgen dat de uitklappende gedeelten zichtbaar worden als ze focus krijgen.
  • De links van het uitklapmenu zijn toegankelijk maar verwijzen niet naar de aangekondigde pagina (voorbeeld: bug op een module van Superfish voor Drupal).
  • De links van het menu zijn geen links. Gebruik niet enkel onClick
  • Het menu is niet gestructureerd als een geneste lijst, de volgorde van de links is niet correct.
Reageer als eerste

Infinite scrolling

Gijs Veyfeyken op 10/04/2015

Infinite scrolling of oneindig scrollen is een techniek waarbij nieuwe inhoud automatisch inlaadt wanneer de gebruiker het einde van de pagina bereikt. Denk bijvoorbeeld aan de tijdslijn van uw Facebook profiel.

Het is een alternatief voor de traditionele 'pagination'. Denk bijvoorbeeld aan de links onderaan Google's zoekresultaten.

scherm met pagination en scherm met infinite scrolling naast elkaar
Bron Smashing Magazine

Infinite scrolling heeft voordelen, vooral op mobiele toestellen. Je bespaart schermoppervlakte en de gebruiker hoeft enkel te vegen. Nieuwe inhoud laadt automatisch.

The advantage of not having to acquire and click “next page” keeps audiences engaged with the content and less focused on the mechanics of navigating to the next page.

Hoa Loranger Norman Nielsen Group

Er zijn helaas ook veel nadelen aan deze techniek verbonden.

Accessibility

  • Je kan het niet combineren met een footer. Die is onbereikbaar omdat die telkens opschuift om plaats te maken voor nieuwe inhoud. De inhoud die scrollt moet daarom het laatste element van de pagina zijn.
  • Het is onverwacht en ongevraagd gedrag. Het is verwarrend voor iemand die geen overzicht van het scherm heeft. De gebruiker moet altijd de controle over de pagina hebben. Nieuwe content mag daarom pas ingeladen worden wanneer de gebruiker daar om vraagt. Dat is makkelijk op te lossen door een knop toe te voegen "laad meer resultaten" of "laad meer berichten".

Usability

Infinite scrolling kan een optie zijn voor websites met "time killing activities" waarbij alle inhoud op het zelfde niveau staat. Bijvoorbeeld Facebook, Pinterest en Twitter. Voor websites met een taakgeörienteerd doel is het minder geschikt. Iets zoeken, bestellen, vergelijken. Er zijn te veel nadelen aan verbonden.

Infinite scrolling:

  • maakt het moeilijk om te zoeken binnen een pagina of iets terug te vinden op een pagina;
  • is desoriënterend, je weet niet waar je bent, de scroll-balk geeft geen correct beeld van de lengte van de pagina;
  • neemt de controle af van de gebruiker, je kan het einde van de pagina niet bereiken;
  • creëert psychologische vermoeidheid, je hebt geen mentaal overzicht;
  • maakt navigeren moeilijk, je kan geen inhoud overslaan, wat met pagination wel gaat.

Bronnen

Conclusie

Gebruik het niet voor taakgeörienteerde websites. Daarvoor is de genummerde pagination beter geschikt. Als de inhoud van uw website er wel toe leent, voeg dan een knop "laad meer berichten" toe. De gebruiker moet de controle over de pagina hebben. Test of het werkt met het toetsenbord en een screenreader.

Reageer als eerste

Be-hackathon: apps voor personen met een handicap

Bart Simons op 03/04/2015

Be.Wan organiseerde vorig weekend een Be-hackathon in de lokalen van Wagon in de coworking space co.station in Brussel. Een 70-tal studenten, verdeeld in groepjes van 4 ontwikkelaars, kregen de opdracht om in 36 uur tijd een smartphone app te ontwikelen die personen met een handicap helpt bij dagelijkse activiteiten.

AnySurfer was aanwezig tijdens de startdag van het project op 18 maart. Eerst presenteerde Gilles Boon van Be.Wan het verloop van het hackaton-weekend. Daarna was er een presentatie door Creth, een adviescentrum over hulpmiddelen voor mensen met een handicap. Ze vertelden de studenten hoe mensen met een handicap smartphones gebruiken, welke hulpmiddelen ingebouwd zijn in de verschillende besturingssystemen en welke bijkomende hulpmiddelen er op de markt zijn. Zoals bijvoorbeeld een brailleleesregel of een schakelaar. Vincent Collin benadrukte dat het belangrijk is om apps altijd te laten testen door meerdere gebruikers.

Daarna was het de beurt aan onze collega Bart De Clercq. Hij demonstreerde de verschillende toegankelijkheidsopties die in iOS en Android beschikbaar zijn. Deze maken de smartphones heel bruikbaar en heel populair bij mensen met een handicap. Maar ontwikkelaars hebben ook hier een belangrijke rol om hun toepassingen toegankelijk te maken. Zelfs een app die er eenvoudig uitziet, kan toch onbruikbaar zijn als hij niet volgens de standaarden is ontworpen. Bart gaf het voorbeeld van de Uber app die aanvankelijk goed toegankelijk was en ook vaak door blinden werd gebruikt. Na een update van de app was de belangrijkste knop plots niet meer bruikbaar voor VoiceOver, de screenreader van Apple waardoor blinden geen Uber auto meer konden bestellen. Ontwikkelaars moeten dus steeds toegankelijkheid in gedachten houden want het ontwerp en de manier van coderen, zijn bepalend voor de bruikbaarheid van de app. Bart eindigde zijn presentatie met concrete technieken om toegankelijke apps te bouwen.

Na deze presentaties was er de gelegenheid voor Hackaton-deelnemers om ideeën uit te wisselen en vragen te stellen. We merkten een grote motivatie en leergierigheid bij de studenten. Ook personen met een handicap waren aanwezig om vragen te beantwoorden, te reageren op de voorstellen van de studenten en om hen te vertellen welke problemen ze bij dagelijkse activiteiten ondervinden en waarbij apps misschien kunnen helpen.

Na 36 uur programmeren, maakte de jury op zondagavond 28 maart de vier winnende applicaties bekend. Hoewel ze nog niet helemaal operationeel zijn, zien we toch een groot potentieel in de ontwikkelde apps. We hebben niet de kans gehad om de apps op hun toegankelijkheid te beoordelen. We stellen vast dat alle apps voor het Android-platform werden ontwikkeld, terwijl de grote meerderheid van de blinde gebruikers voor Apple-toestellen kiest.

Eerste plaats: Metro

Deze app is vooral bedoeld voor blinden en slechtzienden. Aan een bushalte of op het perron van de metro komen vaak meerdere lijnen voorbij en het is vaak enkel visueel aangegeven welke bus, tram of metro eraan komt. De app lost dat probleem op door met een synthetische stem het lijnnummer en de richting aan te kondigen van elk naderend voertuig. De gegevens zijn afkomstig van een API die de uitbater van het openbaar vervoer ter beschikking stelt (voor hun demo gebruikten de studenten de gegevens van de Londense metro).

Tweede plaats: EasyVoice

Een lid van het groepje dat deze app maakte heeft een kind met een handicap. Door die handicap heeft het kind onder andere problemen om te spreken. Hij gebruikt al een tablet met een app die hem toelaat om vooraf opgenomen zinnen uit te laten spreken. Het grootste ongemak van deze oplossing is dat het kind altijd en overal zijn tablet moet meenemen en ook dat is door zijn handicap niet evident.

De EasyVoice app die tijdens de hackaton werd ontwikkeld, draait op een smartwatch en heeft geen internetverbinding nodig. Zo heeft het kind dit hulpmiddel altijd aan de pols bij zich, waar het gemakkelijk bruikbaar is.

Derde plaats: Swipe

Voor sommige personen is het gebruik van een telefoon te complex, bijvoorbeeld voor iemand die getroffen is door de ziekte Alzheimer. Deze app vereenvoudigt het gebruik van een telefoon drastisch.

Swipe biedt twee mogelijkheden om snelkoppelingen toe te wijzen aan bepaalde telefoonfuncties:

  • Een patroon tekenen op het scherm
  • De telefoon in de buurt brengen van een "Near Fied Communication" of NFC-tag : het eenvoudig in de buurt brengen van telefoon en NFC-tag start bijvoorbeeld een telefoongesprek naar een familielid of naar de hulpdiensten.

Vierde plaats: Pin It

Ook deze app werkt met NFC-tags en is hoofdzakelijk bedoeld voor blinden en slechtzienden. De app werkt volgens het principe van de labelpen, een apparaatje dat sinds enkele jaren op de markt is voor deze doelgroep. Het idee is dat je NFC-tags kleeft op allerlei voorwerpen zoals drankverpakkingen, medicijnen, kleding ... en tegelijk in de app inspreekt om welk voorwerp het gaat. Als je later opnieuw de NFC-tag scant, herhaalt de app de informatie die je voor dit voorwerp hebt ingesproken.

Reageer als eerste

Screenreaders om je site mee te testen

Bart Simons op 23/03/2015

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. Testen met een screenreader is noodzakelijk als u ARIA gebruikt.

Er zijn geen statistieken voor België over welke screenreaders het meest worden gebruikt. Het is dus moeilijk om te beslissen met welke screenreader(s) je moet testen om zo dicht mogelijk aan te sluiten bij de situatie van de gebruikers.

Software die de tekst van het scherm voorleest, dat klinkt simpel maar is het niet. Op het scherm staat tekst meestal in meerdere kolommen en wordt hij afgewisseld met afbeeldingen, links, formulieren en eventueel bewegende informatie. Dit artikel beschrijft hoe screenreaders erin slagen zoveel mogelijk informatie van het scherm voor te lezen.

Waar moet u rekening mee houden?

Een screenreader is complexe software, dus trek wat tijd uit om ermee te leren werken. Denk niet te snel dat surfen op internet voor blinden onmogelijk is.

  • 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 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.
  • De screenreader doet meer dan voorlezen wat er op het scherm staat. Bij het surfen, zit de screenreader tussen de gebruiker en de browser. Sommige toetsaanslagen hebben een ander effect als de screenreader actief is. Er zijn bovendien meerdere interactiemodi, bijvoorbeeld bij het invullen van een formulier. Dit artikel beschrijft drie verschillende interactiemodi. U moet zich hiervan bewust zijn als u een formulier of een widget test.

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 en WebAIM heeft een artikel Using VoiceOver to Evaluate Web Accessibility.

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.

Zie verder het WebAIM-artikel Using NVDA to Evaluate Web Accessibility

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 16. 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 best ook 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 en WebAIM heeft een artikel Using JAWS to Evaluate Web Accessibility.

Supernova

In artikels over toegankelijkheid lees je er nooit over en in de Screen Reader User Survey #5 van WebAIM komt hij zelfs niet voor maar deze commerciële screenreader wordt in België nog veel gebruikt. Deze screenreader gaat helaas niet goed om met paginawijzigingen. Als je met Supernova test, moet je je dus bewust zijn van deze tekortkoming.

Smartphones en tablets

Op apparaten met een aanraakscherm doet een screenreader nog veel meer dan voorlezen wat er op het scherm staat. Hij moet ook hulp bieden bij het navigeren en er is dan ook een heel ander bedienginsconcept uitgedacht voor tablets en smartphones. Zie het artikel mobiel surfen met een handicap.

Reageer als eerste

Supernova screenreader ongeschikt om te surfen

Gijs Veyfeyken op 08/12/2014

Sommige toegankelijke websites zijn onbruikbaar met de Supernova screenreader, zelfs wanneer de webbouwer toegankelijkheidsregels volgt. Gebruik je een screenreader en surf je veel? Dan ben je beter af met een programma als NVDA op Windows of VoiceOver op Mac. Beide zijn gratis! Een uitstekende betalende screenreader is Jaws. Ik leg uit waarom.

Paginawijzigingen

Websites zijn interactiever als vroeger. Je leest niet alleen, je 'doet' ook steeds meer: inloggen en een profiel aanmaken, reageren op een artikel, iets 'liken' of delen. Deze acties gebeuren allemaal binnen een webpagina, vaak zonder dat de pagina vernieuwt. Dat noemt 'asynchroon' inladen, een moeilijke manier om te zeggen dat een onderdeel van de pagina wijzigt in plaats van heel de pagina opnieuw te laden met dat stukje nieuwe inhoud. Wie die wijzigingen niet ziet, komt in de problemen. Enkele voorbeelden op de nieuwe site van De Lijn.

De Lijn

Verstoorde dienstverlening

Wanneer de bussen niet rijden, zoals bij een staking, toont De Lijn een dialoogvenster. De screenreader focus springt er automatisch naartoe, behalve met Supernova.

dialoogvenster verstoorde dienstverlening

Dialoogvensters zijn ingeburgerd op het web. Dialog, lightbox, overlay of pop-up zijn enkele synoniemen. Het principe is altijd hetzelfde. Je klikt op een link of knop en er opent een dialoogvenster bovenop de website. Inlogformulieren openen ook vaak in een dialoogvenster. En meldingen zoals bij online bankieren. Om te voorkomen dat het systeem je uitlogt kan je via een dialoogvenster de sessie verlengen.

Wanneer zo'n venster opent zonder de pagina te herladen, weet je als screenreadergebruiker niet dat er iets is gebeurd. Je screenreader meldt dit niet automatisch. Zelfs als je uit ervaring weet dat er een dialoogvenster opent, weet je nog niet waar het staat in de webpagina. Je screenreader kan de inhoud van het venster wel lezen, maar die inhoud kan om het even waar staan. Meestal is dat helemaal onderaan. Gelukkig is er een oplossing. De webbouwer verplaatst de 'focus' van je screenreader naar het dialoogvenster. Wanneer je bijvoorbeeld klikt op link 'inloggen', opent er een dialoogvenster en je screenreader start automatisch aan het begin van het formulier. Dit is mogelijk door een stukje JavaScript code, een functie die 'focus' heet. Het verplaatsen van de focus is cruciaal om paginawijzigingen toegankelijk te maken voor screenreaders.

Supernova ondersteunt geen focus management. NVDA, Jaws, VoiceOver en andere screenreaders doen dat wel.

Mogelijke routes

Wanneer je in de routeplanner een plaats van vertrek en aankomst ingeeft, krijg je een lijst met mogelijke routes terug, gevolgd door de details van de actieve route. Klik op een andere route in de lijst en de details van de actieve route wijzigen zonder de pagina te vernieuwen. De lijst met mogelijke routes zijn geen links naar nieuwe pagina's. Ze wijzigen de huidige route op de pagina. Met een goede screenreader verspringt de focus naar de kop "Route met vertrek om..." boven de details van de route. Met Supernova gebeurt er niets. De focus blijft op de link in de lijst staan.

routeplanner met lijst van mogelijke routes

Haltes

Een derde voorbeeld zijn tabs. De detailpagina van een halte heeft 2 tabs: 'doorkomsten dit moment' en 'alle doorkomende lijnen'. Het klikken van een tab opent geen nieuwe pagina. Enkel de inhoud onder de 2 tabs wijzigt. Wanneer je de tab 'alle doorkomende lijnen' klikt, verschijnen de doorkomende lijnen op de plaats waar eerst de doorkomsttijden stonden. De focus springt naar de kop die er boven staat. Behalve als je met Supernova surft.

Halte Gent Sint-Jacobs

Conclusie

AnySurfer vraagt webbouwers om paginawijzigingen begrijpelijk te maken voor screenreadergebruikers. Ze verplaatsen daarvoor de focus naar de plek van de wijziging. Supernova ondersteunt dit niet. Je kan de website van De Lijn en andere moderne websites met Supernova bezoeken maar bij een paginawijziging weet je niet waar de verandering is gebeurd. Screenreaders als JAWS, NVDA en VoiceOver surfen een stuk gemakkelijker. Op een toegankelijke website brengen ze je automatisch naar de vernieuwde inhoud.

Wil je meer weten over screenreaders? Onze collega's van de Blind D Mobiel wijzen je de weg. Ze bieden professioneel advies zonder commerciële belangen om voor jou de beste oplossing te vinden.

5 reacties