u bent hier

Update: Vergeet de button of link die het mobiel menu opent niet te testen. Dat is vaak een hamburger icoon zonder betekenisvol tekstalternatief en vaak niet bereikbaar met het toetsenbord. Goed voorbeeld: Accessible and responsive dropdown for navigation

Responsive Webdesign is een techniek om de gebruiker een optimale surfervaring te bieden. Op basis van de viewport van het toestel (de grootte van het scherm waar de inhoud van de website staat) waarmee een gebruiker een website bezoekt, wordt er specifieke HTML en CSS geladen. Dit is mogelijk door CSS3 media queries. Deze techniek kan deze viewport van de browser detecteren.

Voor wie het nog niet duidelijk is, surf even naar Fork CMS (het CMS waar onze website op draait), en verklein even het browserscherm. Je zal merken dat er 4 versies bestaan van deze website: voor desktop, tablet en smartphone. De layout van de pagina zal zich automatisch aanpassen. Hieronder een screenshot van deze 4 versies, je kan de afbeelding vergroten door erop te klikken.

Screenshot Fork met 4 verschillende screenshots, hoe kleiner het browservenster, hoe minder inhoud.

Maar hoe zit het met Responsive Webdesign en toegankelijkheid? In principe zijn er geen problemen. De techniek zal afhankelijk van de viewport, aangepaste HTML en CSS inladen. Screenreaders die een website voorlezen aan blinde bezoekers, zullen op dezelfde manier deze info kunnen raadplegen dan op de reguliere website.

Er zijn echter 2 bedenkingen:

Screenreaders en mobiele toestellen

Een screenreader is geavanceerde software die alles voorleest aan blinde gebruikers. Standaard zit in Mac OS X VoiceOver. Voor andere besturingssystemen zijn echter ook screenreaders beschikbaar (bijvoorbeeld Jaws voor Windows).

VoiceOver is standaard ook terug te vinden in een iPhone en iPad en ook voor andere mobiele besturingssystemen zijn screenreaders beschikbaar (bijvoorbeeld TalkBack voor Android).

Als een blinde persoon een website bezoekt met zijn mobiele telefoon, zal hij echter niet dezelfde informatie krijgen dan van de screenreader op een desktop computer. De browsers en screenreaders op mobiele telefoons zijn niet zo krachtig dan deze van de desktop computer. Zo biedt Safari op iOS 6 minder ondersteuning voor ARIA in vergelijking met Safari in Mac OS X.

Ook al zijn de mogelijkheden op een mobiel toestel minder, we kunnen besluiten dat een gebruiker met een mobiele screenreader de website kan bezoeken.

There's a snag in it

Er is echter 1 situatie waar Responsive Webdesign niet gewenst is. Stel, je bent slechtziend en wil een onderdeel van een website vergroten met de zoomfunctie die aanwezig is in de browser. Dan zal er ongewenst een wijziging optreden van de inhoud waar de bezoeker niet om gevraagd heeft.

Deze wijziging treedt op bij de browsers Internet Explorer 9, FireFox 16 en Opera 12. In Safari 6 en de laatste versie van Chrome gebeurt dit niet. Bij het vergroten van een pagina, zal WebKit de viewport niet aanpassen. Onderstaande screenshot toont FireFox 16 en Safari 6 naast elkaar. FireFox (links) toont de versie voor een mobiele telefoon, Safari (rechts) toont de originele versie maar uitvergroot. Je kan op de afbeelding klikken om deze te vergroten.

Screenshot van FireFox en Safari met Fork-CMS uitvergroot.

Op de website van Fork CMS is dit geen ramp, alle inhoud blijft op de 4 versies beschikbaar. De bezoeker zal wat moeten scrollen om het onderdeel dat hij wou vergroten, opnieuw terug te vinden.

Er zijn echter websites die in de mobiele versie heel wat inhoud weglaten. Dit hebben we te danken aan het tijdperk waar er nog een aparte mobiele website werd aangeboden, de alombekende m.website.be link. Hier was het de bedoeling om een afgeslankte versie aan te bieden voor mobiele bezoekers.

Iemand die in de browser zoomt om iets te bekijken, zal het deel dat hij wou uitvergroten niet meer terugvinden. Deze situatie kan een ramp zijn. Niet alleen voor de bezoeker die zijn winkelwagentje wil uitvergroten maar ook voor de website eigenaar die een klant heeft die niet kan bestellen.

Er zijn ook situaties waar een niet slechtziende persoon 'last heeft' van Responsive Webdesign. Stel, je wil iets tonen op een beamer maar die heeft maar een resolutie van 600x800 pixels (ja die bestaan nog), dan krijg je ook ongewenst een mobiele website geprojecteerd.

De oplossing

De problemen die kunnen optreden bij Responsive Webdesign en toegankelijkheid zijn eerder miniem maar kunnen toch storend zijn. De enige goede oplossing is dat er bij Responsive Webdesign goed nagedacht moet worden en dat de inhoud in alle versies moet terug te vinden zijn. Zo zal je niet alleen de slechtziende bezoeker helpen die zoomt in zijn browser, maar ook de mobiele surfer die ook graag alle inhoud kan raadplegen op zijn mobiel toestel.

Reacties


Frank Peeters

In Safari 6 en de laatste versie van Chrome gebeurT dit niet. Bedankt voor je artikel.


Bart De Clercq

Bedankt voor de opmerking ;-)


Koen / Responsive Webdesign

Onze klanten ervaren het inderdaad ook als een ideale / simpele oplossing die teveel beheer kan voorkomen. Zelf ben ik van mening dat dit ook prefect werkt in combinatie met promoties die gestart worden met QR-codes. Hoe denken jullie daarover?


Thomas Vanhoutte

Ook al zijn er inderdaad heel wat mogelijke problemen als je kiest voor responsive design, toch denk ik dat deze techniek nog steeds de beste is. Beter dan pakweg een aparte mobiele website.


Bart De Clercq

@Koen QR codes en toegankelijkheid is een heel apart verhaal. Hier komt binnenkort een blogpost over.


Bart De Clercq

@Thomas Vanhoutte We zijn ook van mening dat responsive de oplossing is. In de laatste paragraaf verwoord ik dit misschien niet goed, ik heb de tekst iets gewijzigd. Bedankt voor je opmerking.


Zowika

Responsive webdesign is sinds 2 projecten nieuw voor mij. Ik moet zeggen dat het een erg interessant onderwerp is maar nog erg lastig om te implementeren. Het ontwerp moet volledig afgestemd worden in alle layouts en dit kost toch wel flink wat tijd. Wel is er veel animo voor Responsive webdesign ik verwacht dan ook dat het een standaard wordt in de toekomst. Bedankt voor het nuttige artikel :)


Astrid Nieland van R2H Webdesign

Responsive webdesign is inderdaad een mooie oplossing van de nieuwe internet revolutie. Een ander nadeel die ik wel eens hoor is dat de informatie mogelijkheid beperkt wordt. Nu ben ik van mening dat met deze internet revolutie, dit geen slechte ontwikkeling is, als iemand op zijn mobiel een website bezoekt wil hij vaak snel de juiste info vinden. Hoe kijken jullie daar tegen aan?


Bart De Clercq

@Astrid Nieland Personen die surfen met een mobiel toestel, zullen ook in een soort handicap situatie vertoeven aangezien ze een klein scherm hebben, slechte contrasten, trage verbinding... We spreken ons niet uit over de snelheid waarmee die informatie gevonden wordt, als deze maar op een toegankelijke manier wordt aangeboden en bij RWD geen informatie wordt weggelaten.

Reageer