Digital Customer Experience Blog

Digital Customer Experience Blog

Meningen op deze blog weerspiegelen de opvattingen van de schrijver en niet per definitie die van de Capgemini Group

Je website voor iedereen toegankelijk - Webrichtlijn: Aanpasbaarheid

Bij het ontwikkelen van een website komt een boel kijken. Zo dien je niet alleen te zorgen voor een flitsende, goed ingedeelde layout, maar wil je ook toegankelijk en bruikbaar zijn voor fysiek beperkte gebruikers[0]. Voor overheidsinstanties is dit zelfs verplicht[1]. Het voldoen aan de webrichtlijnen wordt door veel ontwikkelaars als nodeloos ingewikkeld gezien, en soms zelfs als beperkend voor de creativiteit. Een goed gebouwde website is echter eenvoudig toegankelijk te houden, zonder dat dit een mooi design of geavanceerde functionaliteit in de weg hoeft te staan.

Voor de meeste criteria van de webrichtlijnen geldt dat het weinig moeite kost als je er van meet af aan rekening mee houdt. Wanneer je ontwikkelt volgens de 'Content First' (of Mobile First[2]) aanpak, valt dit ook mooi samen. Begin met een kale HTML pagina waarin de informatie die je wilt delen duidelijk overkomt. Dus belangrijkste informatie het eerst, in een logische indeling met verschillende koppen, etc. Als het goed is komt de structuur van de informatie ook enigszins overeen met de visuele indeling van het interactie of visueel ontwerp. Wanneer echter inhoud en vormgeving niet op tijd goed afgestemd worden, is het een kostbare zaak om achteraf alles alsnog recht te breien.


Blind user reading a screen with a braille-assistive device

Een blinde computergebruiker voelt aan de brailleregel welke tekst er op het scherm staat. [3]

Behoud van informatie en structuur

Een voorbeeld: Richtlijn 1.3 Aanpasbaar: "Creëer content die op verschillende manieren gepresenteerd kan worden (bijvoorbeeld eenvoudiger lay-out) zonder verlies van informatie of structuur." Om aan deze richtlijn te voldoen, dient de  inhoud van de pagina net zo goed te begrijpen te zijn met als zonder opmaak, of wanneer deze wordt voorgelezen door een tekst-synthese programma (voor visueel beperkten).

Ondersteunende teksten

In de meeste ontwerpen wordt informatie getoond door een slimme en/of mooie combinatie van tekst en visuele opmaak. Voor de pagina zonder opmaak betekent dit dat er extra tekstelementen nodig zijn om zaken te verduidelijken, die in de opgemaakte versie door visuele opmaak worden aangeduid. Dit zijn zogenaamde ondersteunende teksten (engels: 'assistive text'). Omdat je deze teksten wel wilt aanbieden in de tekstversie, maar zo min mogelijk dubbele informatie wilt aanbieden op de opgemaakte variant, zul je de tekstelementen in deze variant willen verbergen. In de volgende paragraaf een beproefde oplossing.

Techniek; wat werkt niet en wat werkt wel

Verbergen van tekstelementen uit je visuele opmaak kan op meerdere manieren worden opgelost. De meest eenvoudige manier is met de volgende CSS regel:

.ondersteunend{
        display: none; /*Let op! dit wordt helaas niet ‘gelezen’ door screenreaders!*/
}
 

Dit is voor ons niet toereikend, omdat de tekst wordt verborgen in de visuele opmaak, maar aanwezig blijft in de html code (wanneer deze is gemarkeerd met deze ‘class). Helaas zullen de meeste browsers voor visueel beperkten deze tekst ook negeren, evenals Google en andere zoekmachines. Dit is dus geen goede oplossing, en te simpel van aanpak. Gelukkig zijn er betere oplossingen, zoals de volgende:

.ondersteunend{
        position:absolute;
        left:-10000px;
        top:auto;
        width:1px;
        height:1px;
        overflow:hidden;
}
 

Hiermee wordt de tekst buiten beeld geplaatst, maar zullen screenreaders en andere tekst-browsers het element wel gewoon tonen, omdat die de positie- en afmetings-informatie negeren. De inhoud gaat dus niet verloren voor visueel beperkten. Doel bereikt!

Deze techniek heb ik gevonden op webaim.org [4] waar heel veel (engelstalige) informatie te vinden is over het toegankelijk maken van websites. Hopelijk heb je gemerkt dat het toegankelijk maken van een website niet zo lastig is als het soms lijkt, zeker als je op tijd begint. Mocht je vragen of opmerkingen hebben over deze of andere webrichtlijnen en hoe je daaraan voldoet, hoor ik dat uiteraard graag.

Verwijzingen
[0] Waarom een toegankelijke website? (Microsoft.com)
[1] Waarom bestaan er webrichtlijnen voor websites van de overheid? (Rijksoverheid.nl)
[2] Find the right Words for your Mobile First (Webdesignerdepot.com)
[3] Afbeelding gevonden op http://www.atarizona.com/showtell/3screenreaders.php
[4] Invisible Content technique (Webaim.org)

Over de auteur

Sjoerd Kranendonk
Sjoerd Kranendonk
+Sjoerd Kranendonk maakt projecten en mensen succesvol bij Capgemini. Door zijn focus op team-prestatie en samenwerking met klanten, onderbouwd door een solide online-technologiekennis, worden Online projecten met goed gevolg opgeleverd. Buiten Capgemini deelt Sjoerd graag als DJ zijn liefde voor muziek.
3 Reacties Plaats een reactie
Beste, Wat vindt Google van je suggestie? Met het oog op SEO... Hartelijk dank, Jansen
skranend's picture
Beste Jansen, voor zover ik kan nagaan heeft dit geen negatieve impact op SEO, mits je het normaal gebruikt, sterker nog, het zal in de meeste gevallen ook voor de google bots betekenen dat je content begrijpelijker is, omdat ook betekenis die anders niet af te leiden is kan worden geindexeerd. In de niet-toegankelijke situatie zou deze mogelijk alleen uit de visuele opmaak af te leiden zijn en dat verwerkt google niet. Uiteraard moet je dit soort dingen niet misbruiken om maar zoveel mogelijk relevante keywords toe te voegen, want dan val je onherroepelijk door de mand.
Dat er zulke hulpmiddelen bestonden voor mensen met een visuele handicap wist ik niet eens, ik zal daar voortaan rekening mee houden, http://visdiaz.com/thumbs-up/

Plaats een reactie

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *.