AnySurfer voor De Lijn

18 september 2014 Inzichten /

Een website zoals die van De Lijn moet uiteraard voor iedereen volledig toegankelijk zijn. Standaard houden wij al rekening met een heel aantal regels maar voor een website als die van De Lijn gingen wij net nog een stapje verder. Omdat de website heel uitgebreid is en er veel op maat gemaakte onderdelen in de site zitten, riepen wij als een van de weinige AnySurfer certified partners de hulp in van AnySurfer.

AnySurfer streeft ernaar om websites en digitale documenten toegankelijk te maken. Toegankelijk betekent dat ze bruikbaar zijn voor iedereen, ook voor personen met een handicap. Meer informatie over wie deze personen zijn en hoe zij hun computer bedienen, kan je vinden op de website van AnySurfer.

Maar er is meer. Toegankelijkheidsrichtlijnen overlappen vaak met andere principes van modern webdesign en documentopmaak. Daarom zijn toegankelijke websites over het algemeen beter geschikt voor kleine beeldschermen zoals die van smartphones en tablets en zijn deze websites bruikbaar in iedere webbrowser. Daarnaast scoren ze ook beter in de resultaten van zoekmachines. Toegankelijke websites en documenten helpen dus alle bezoekers/lezers.

Hieronder vind je een overzicht van alle aanpassingen die wij hebben doorgevoerd om het AnySurfer label te kunnen halen met de nieuwe De Lijn website. 

Ajax implementatie

Op de nieuwe website van De Lijn worden heel wat dingen via AJAX ingeladen. Neem bijvoorbeeld eens een kijkje op een detail pagina van De Lijn. De verschillende tabs die je daar ziet worden asynchroon ingeladen. Dit heeft als gevolg dat de pagina niet herlaadt en een blinde gebruiker dus niet doorheeft dat er iets veranderd is. De oplossing hiervoor is gelukkig relatief simpel. Bij het klikken op zo een tab wordt de content ingeladen en eens deze is ingeladen laten we de focus van de gebruiker verspringen naar die content. In dit specifieke geval verspringt de focus van de tab naar de titel van de de ingeladen content.

Dit trucje van focus verspringen wordt op nog een aantal plekken op de website gebruikt. Als er bijvoorbeeld een modal wordt geopend, is dit ook geen pagina-refresh en merkt een niet ziende gebruiker dit niet op. Ook hier hebben we dus na het openen van het modal de focus laten verspringen naar de titel van het modal.

Modals

Modals, je kent ze wel, de popups die je ziet verschijnen op de pagina zelf om bijvoorbeeld een klein formulier in te vullen, meer info te verkrijgen of aan te melden. Zoals daarnet vermeld moest er bij het openen van een modal al rekening gehouden worden met de focus. 

Een ander heel belangrijk ding bij modals is dat het eigenlijk een soort mini-paginaatje zijn, als je er met de tab door navigeert mag je dus zeker niet plots in de achterliggende site terecht komen. De oplossing die wij hiervoor hebben voorzien, is door middel van Javascript de tab te hacken. Telkens als de gebruiker op tab drukt, wordt er gekeken of het volgende tabbaar element nog binnen het modal valt. Zoniet, wordt het eerste tabbaar element van het modal opnieuw gefocust. De werking hiervan wordt hier heel mooi uitgelegd.

Grote klikbare blokken

Als je een route berekent op de nieuwe website kom je uit op een pagina die er ongeveer zo uit ziet:

Om de route op een ander tijdstip te bekijken kan je als gebruiker op het blok aan de linkerkant klikken. Origineel was dit ook in de html zo, elk zo een blokje zat in één grote link. Voor blinde gebruikers was dit opnieuw niet echt gebruiksvriendelijk, zij kunnen namelijk scannen door alle links op een pagina. De tekst die zich binnen deze link bevond was dus iets in de aard van: „15:34 tot 17:21 overstappen: 2 te voet: 1676m 1u47min”. Je kan je vast wel inbeelden dat dit niet optimaal was. We kozen er dus voor om in de link enkel het deel op te nemen dat ook in het blauw staat op de website (van → tot). De rest van het blok hebben we voor de gebruiksvriendelijkheid van gewone gebruikers aanklikbaar gemaakt via Javascript.

Volgorde der elementen

De topnavigatie op de website staat rechts uitgelijnd. Dit gebeurt uiteraard door deze rechts te floaten, een groot nadeel hiervan is dat de volgorde van de elementen in de html niet klopt met de visuele volgorde. Om een AnySurfer label te kunnen behalen, moet deze volgorde ten aller tijde gelijk lopen. De oplossing die we hier dan ook voor hebben doorgevoerd is om alle rechts gefloatete elementen in één grote container te steken en deze rechts te floaten. Zo konden we de aparte elementjes gewoon links floaten en bleef de volgorde mooi gelijk.

Voor meer info hierover kan je terecht op de AnySurfer website

Iconen

Iconen zijn een veelgebruikte manier om dingen zoals mobiele menu's aan te duiden. Voor blinde gebruikers zijn deze echter niet zichtbaar en hebben deze een tekstuele fallback nodig. Als we even de knop inspecteren die je kan gebruiken om vertrek en aankomst te wisselen in de routeplanner zal dit snel duidelijk worden.

Zoals je kan zien is er naast het icoon ook nog een span toegevoegd met de class is-accessible-hidden en daarbinnen een omschrijving. De .is-accessible-hidden class die we hier gebruiken is gebaseerd op de .sr-only class die je ook in Bootstrap vind. De css die hierachter zit cropt de tekst eigenlijk tot een 1px op 1px vierkant en plaatst deze 1px links, uit het beeld. Dit zorgt ervoor dat ziende gebruikers deze boodschap niet zien, maar gebruikers van een screenreader deze wel te horen krijgen.

Het icoon zelf moet natuurlijk niet voorgelezen worden door de screen reader. Hiervoor zijn er 2 mogelijke oplossingen, de eerste is door letters te gebruiken in je iconfont die niet voorgelezen worden, zogenaamde letters uit het PUA. De tweede manier om ervoor te zorgen dat deze niet worden voorgelezen, is door aria-hidden=„true” toe te voegen aan het icoon. Wij hebben bij de implementatie van onze iconen beide technieken toegepast, je kan nooit zeker genoeg zijn.

Wij gebruiken Icomoon om onze iconfonts te genereren. Deze neemt standaard enkel Private Use Areas code points.

Voor meer info hierover kan je terecht op de AnySurfer website. 

Helpteksten

Voor sommige inputvelden in formulieren voorzien we help-teksten onder de input (zie voorbeeld hieronder). Voor ziende gebruikers is dit vrij duidelijk, voor blinde gebruikers of gebruikers van een screenreader is dit veel minder duidelijk. Zij komen namelijk eerst het inputveld tegen en pas daarna de extra info, veel te laat dus. Ook hier opnieuw twee mogelijke oplossingen, een moeilijke en een makkelijke.

De moeilijkste oplossing hiervoor is om in de html de info voor het inputveld te zetten en dan via allerlei dirty css tricks de info er visueel toch achter te zetten. Wij kozen echter voor een veel simpelere oplossing namelijk het aria-describedby attribuut. Dit attribuut kan je plaatsen op een input veld om aan te duiden waar een gebruiker meer info kan vinden.

Voorbeeld en meer uitleg: website van developer mozilla.


Te veel

Lees meer

Nieuwsbrief

Doe zoals meer dan 1700 marketing en design experts en ontvang maandelijks onze nieuwsbrief vol inzichten, tips en verrassende nieuwigheden.