Dialoogvensters

Gijs Veyfeyken op 27/05/2015

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 een value="sluiten" aan de button 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 Nicals Hoffmann (Github)

modal dialog

Reageer als eerste

Een toegankelijke overheid

Gijs Veyfeyken op 21/05/2015

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

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

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 bijhorende 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