Tijdschrift voor webwerkers » Artikel #79
Ik zal beginnen met eens even flink generaliseren en vaststellen dat er twee hoofdredenen zijn waarom mensen zich in het produceren van website storten: ze houden van programmeren (ze zijn technisch) of ze houden van grafisch ontwerp op het web (ze zijn artistiek).
Interessant genoeg is het tegenwordig goed mogelijk om tegelijkertijd technisch én artistiek te zijn. Je kunt je oude trauma’s van de middelbare school gedag zeggen, toen de artistiekelingen verlangend keken naar de mensen met de wiskundeknobbels en andersom.
Iedereen die goede ontwerpvaardigheden heeft kan de webstandaarden gebruiken om aantrekkelijke websites te maken die voldoende functioneren voor bijna alle bezoekers en uitstekend functioneren voor de meeste bezoekers, inclusief de bezoekers met een handicap.
Dit artikel zal een aantal details onderzoeken van het samenspel tussen toegankelijkheid en webontwerp. We zullen er achter komen dat er nieuwe methodes zijn om te verzekeren dat zelfs websites die grafisch ontwerp zeer serieus nemen adequaat functioneren voor mensen met een aantal relevante handicaps. En onderweg zullen we ontdekken waarom het noodzakelijk is dat sommige bezoekers het grafisch ontwerp dat je hebt gekozen volledig achter zich kunnen laten – hoewel dat nog niet betekent dat je het grafisch ontwerp voor alle andere bezoekers kwijt bent.
Misschien herinner je je het duistere verleden van het websitebouwen. Lang geleden was het prima om welk
soepzooitje van HTML dan ook te gebruiken, zo lang het in onze favoriete browser maar
getoond werd zoals we het bedoelden. (We hebben trouwens nogsteeds onze favoriete browsers, maar we
hebben daar nu wel betere redenen voor.) Om het er allemaal goed uit te laten zien strooiden we kwistig
met wat we nu presentatie-elementen noemen, waaronder font
en de favoriet:
blink
. Als het maar werkt, nietwaar?
In deze tijd van webstandaarden weten we hoe onwenselijk onze oude manier van coderen was. Pagina’s waren te zwaar, structuur en uiterlijk waren niet gescheiden, HTML die het prima deed in de ene browser zorgde er voor dat een andere browser zo waar crashte. We weten dat nu allemaal en we hebben zelfs een lekker gemene term voor dat soort code: tag soup. Maar een aantal andere feiten zijn nog niet zo doorgedrongen:
En zo gingen we in een periode van slechts twee jaar rond de eeuwwisseling van een situatie geheel zonder regels via de realisatie dat er toch wel wat nuttige regels waren (zoals WCAG) naar de vergissing om uit te maken dat die regels coûte que coûte moesten worden toegepast op visueel rijke websites.
We kunnen naar onszelf rond 1999 terugkijken zoals provinciaaltjes die het helemaal zijn gaan maken in
de stad terugkijken op de tijd dat ze nog boertjes van buut’n waren. We denken niet graag meer
terug aan hoe suf en ordinair we toen waren. Een beetje te veel te strakke lichtblauwe spijkerbroeken op
onze oude feestfoto’s. Wat te veel font
tags die rondspoken in ons verleden. We aten
te veel kliekjes terwijl we naast het aanrecht stonden en gebruikten te veel “Best viewed in
Netscape Navigator” banners op onze sites.
Zullen we daar dan nu maar niet meer over beginnen? Nu zijn we toch volwassen en verstandig. Wij begrijpen het concept van webstandaarden.
We hebben onderweg nog een paar andere dingen geleerd. We zijn er achter gekomen waarom de andere mensen aan tafel eerder eten kregen in het restaurant dan wij (zij waren niet te krenterig om een voorafje te bestellen, lieverd). We zijn er achter gekomen hoe ontzettend belangrijk katoenkwaliteit is wanneer je beddegoed uitkiest. We weten nu ook dat de ingenieur genaamd HTML getrouwd is met een zeer gerespecteerde en hippe interieurontwerpster: CSS.
’Tuurlijk, hij kan die vloerbalken zo aan elkaar timmeren dat oma niet op gruwelijke wijze omkomt in een instortend gebouw, maar als je het wilt hebben over gordijnen, nou, stuur hem dan maar naar de kelder waar hij lekker met zijn modeltreinen kan gaan spelen terwijl zij zich bezighoudt met wat echt belangrijk is.
Het cascading stylesheet – zelfs de naam klinkt al elegant, als één van die neologismen de beroemde moderedactrice Mrs. Diana Vreeland bedacht tijdens vergaderingen over nieuwe ideeën voor reportages – is een apart bestand dat die brute browser echt zijn plek laat weten. Het CSS-bestand draagt de browser op om de HTML-elementen te laten zien (of te “presenteren”) op precies die manier die de ontwerper bedoelde.
Nu hebben we het over echte macht! Je hebt de botten en de lichaamsstructuur van het filmsterretje (de HTML) en nu kun je haar aankleden in welke glamoureuze, glimmende, laag-uitgesneden avondjurk je maar wilt (de CSS). Je kunt de structuur (of de content) van de presentatie scheiden, zoals ze dat noemen.
Maar laten we gehandicapte mensen hiermee in de kou staan? In sommige gevallen wel, ja.
Het World Wide Web Consortium – onze neefjes van het platteland – hebben een fijn document over CSS en toegankelijkheid geproduceerd, maar eigenlijk vertelt het je weinig nuttigs. Het lijkt weinig van doen te hebben met grafisch ontwerp, zoals we ook wel zouden verwachten van onze neefjes, die ons steeds weer laten krimpen van gène met hun getoupeerde haar en hooggehakte laarzen met franjes als ze ook familiegelegenheden bezoeken.
Het lijkt er niet op dat CSS zo veel van doen heeft met toegankelijkheid, aangezien we allemaal steeds te horen krijgen dat valide HTML belangrijker is. Maar als je een grafisch ontwerper bent die webstandaarden toepast is het toch mogelijk om uiteindelijk een pagina te produceren die voor sommige mensen met een handicap moeilijk of zelfs onmogelijk te gebruiken is.
Voor iemand die geheel blind is of zodanig slechtziend dat hij eigenlijk bijna niets ziet is jouw werk als webdesigner bijna irrelevant. Je website wordt bezocht door middel van een screen reader (voorleessoftware), wat wil zeggen dat de bezoeker de tekst voorgelezen krijgt en/of meeleest in Braille. Daar zijn geen zichtbare zaken bij betrokken.
Je hoeft je er niets van aan te trekken dat de blinde bezoeker je prachtige grafisch ontwerp niet kan zien. Ze kunnen namelijk helemaal niets zien. Je denkt misschien dat ze een heleboel missen, en sommige blinde mensen denken dat misschien ook, maar er is niet veel dat jij daar als webdesigner aan kunt doen.
Maar je kunt hier alleen zo blasé over doen als je wél valide semantische HTML gebruikt. Als je ouderwetse tag soup markup gebruikt, zal een blind persoon die gebruik maakt van een screen reader zeer veel moeite moeten doen om zich een weg door je pagina’s te worstelen. Headings, links, lists en dergelijke structuren (ja, zelfs tabellen) kunnen intelligent verwerkt en gelezen worden in hedendaagse screen readers. Als je ze op de juiste manier gebruikt, maakt het nog maar weinig verschil dat de bezoeker je grafisch ontwerp niet kan zien.
Er zijn echter een aantal uitzonderingen, waarvan sommigen nogal onverwacht zijn.
<img alt="">
) is er geen uitgewerkte methode
die garandeert dat de tekst die als alternatief voor het plaatje wordt gebruikt altijd wordt
voorgelezen door de screen reader. (Dat heeft iets te maken met de manier waarop screen readers omgaan
met visibility: hidden
of zelfs display: none
in CSS. Het voorstel voor een
reader
media type kan daar
misschien in de toekomst verandering in brengen.) Voor sommige plaatjes zal het niet uitmaken dat ze
onzichtbaar zijn voor screen readers, en voor sommige anderen zal het juist wel cruciaal zijn; aan jou
de taak om uit te maken waar dat het geval is.
visibility: hidden
of zelfs display: none
gebruikt om
sommige stukken tekst onzichtbaar te maken, zullen sommige screen readers de tekst wel voorlezen of in
Braille weergeven. Onzichtbare tekst wordt vaak gebruikt om pagina’s vol te proppen met
commerciële keywords, maar er zijn ook een aantal respectabele toepassingen van deze techniek, zoals
browser-upgrade verzoeken en
het laten zien van veranderingen in specificatie-documenten van het W3C.
Helaas is het zo dat sommige dingen die heel aantrekkelijk zijn voor grafisch ontwerpers het online leven van mensen met een visuele handicap moeilijk maken.
Er zijn hierbij twee groepen waarover we ons zorgen moeten maken: mensen met aangeboren kleurenblindheid en mensen met bepaalde vormen van slechtziendheid, die op een andere manier moeilijk kleuren kunnen zien dan de groep van kleurenblinden.
Mensen die kleurenblind zijn zien altijd kleur. (De enige belangrijke uitzondering is een aandoening genaamd achromatopsie, die naar schatting 0.03% van de mensen treft. Deze mensen zien – voor zo ver we dat kunnen bepalen – alles in grijstinten.) Het probleem is meer dat er een aantal kleuren is die kleurenblinden door elkaar halen. Rood en groen zijn het standaard paar dat voor onduidelijkheid zorgt, maar er zijn veel rood-achtige en groen-achtige tinten die verwarring opleveren. De aandoeningen die de moeite met het onderscheid rood/groen veroorzaken zijn protanopie en deuteranopie, die beiden ook minder ernstige vormen hebben: protanomalie en deuteranomalie.
Er is een veel kleiner aantal mensen dat een aandoening heeft waardoor ze het onderscheid blauw/groen moeilijk kunnen maken: tritanopie. Sommigen van hen ontwikkelen de aandoening tijdens hun leven, terwijl protanopie en deuteranopie meestal erfelijk zijn. Ongeveer 4 tot 8% van de bevolking in Westerse landen (de meesten van hen mannen) hebben één of andere vorm van afwijkend kleurenzien.
Kleurenblindheid leidt tot symptomen die binnen een beperkt aantal patronen vallen. Het is niet zo moeilijk om regels te bedenken om tegemoet te komen aan deze patronen. (Ik heb zelf een heel hoofdstuk in mijn boek over dit onderwerp geschreven.) Een webdesigner hoeft niet zo veel te doen om deze problemen te ondervangen. Je moet er gewoon voor zorgen dat kleuren die door elkaar gehaald kunnen worden niet op een mogelijk verwarrende manier gebruikt worden. Je kunt prima rood en groen of blauw en groen op dezelfde pagina gebruiken, je moet ze alleen niet naast elkaar zetten als je van de bezoeker verwacht dat hij ze uit elkaar kan houden. (En zelfs dat kun je nog doen als er andere zaken zijn waardoor het onderscheid duidelijk is – rode en groene knoppen of tabs naast elkaar zou best kunnen als de letters die je gebruikt maar voldoende uitsluitsel geven.)
Alles wordt een stuk ingewikkelder wanneer we te maken hebben met slechtzienden – mensen die nog beschikken over een gedeelte van hun gezichtsvermogen. Wat deze mensen nodig hebben verschilt enorm, iedere persoon is weer anders. Sommige aandoeningen, zoals de vergeling van de iris door ouderdom, zorgen voor een verandering in het waarnemen van kleuren.
In zekere zin is dit een nachtmerrie-scenario voor webontwerpers. Ja, je bent zo’n slimmerik die de marketing slogans van HTML en CSS wel kan dromen (inhoud en presentatie scheiden enzo), en je kunt best leven met het idee dat blinden je opmaak helemaal niet zullen zien, maar nu hebben we die slechtzienden die je ontwerp tot zich zullen nemen op een manier die er een vreselijke parodie van wat jij had bedoeld van zal maken.
Slechtzienden moeten de volgende dingen zelf kunnen instellen:
Dit is een heel nieuwe uitdaging voor webdesigners, maar het goede nieuws is dat slechtzienden wel degelijk geholpen kunnen worden – en dat je in een groot aantal gevallen nogsteeds behoorlijk veel invloed kunt uitoefenen op hoe het ontwerp er uitziet.
Bij het bouwen van websites kun je zo veel verschillende CSS-bestanden gebruiken als je maar wilt om alternatieve stylesheets aan te bieden, speciaal voor slechtzienden. Je kunt één of meer alternatieve stylesheets neerzetten die bijvoorbeeld zeer basale navigatie plaatsen bovenaan de pagina (“U bent hier” broodkruimels of dergelijke oplossingen), en ook veel grotere fonts gebruiken in lichte kleuren op zeer donkere achtergronden (gebroken wit of geel op een zwarte achtergrond werkt goed). Iemand die een dergelijke presentatie prefereert of nodig heeft kan eenvoudig de bijbehorende stijl selecteren.
Je hebt een aantal opties om een interface te geven aan je stylesheet-switcher:
Ik heb een lange (maar lang niet complete) lijst van sites die stylesheetswitchers gebruiken opgesteld. Je zou kunnen proberen om sommige van deze oplossingen na te volgen.
Maar nu de echte situatie: als je de toegankelijkheid van je site wilt verbeteren voor slechtzienden terwijl je wel het grafisch ontwerp in tact wilt houden voor mensen met normaal gezichtsvermogen, hoe ziet je site er dan uit voor en na het updaten?
titles
bij de link
:
die worden namelijk getoond in de Use Style menu-optie van Mozilla.
line-height
proportioneel blijft – em
, ex
, of %
zijn bruikbare
eenheden)
Eigenlijk zijn er niet zo veel mensen die zelfs maar proberen om dit goed te doen, maar ik ben er in geslaagd om een bescheiden lijst samen te stellen:
Als we het hebben over bezoekers die er behoefte aan hebben om je website te bekijken en desnoods te veranderen, zouden die bezoekers dan niet zelf de verantwoordelijkheid moeten nemen om de opties van hun eigen browsers beter te leren kennen?
De meeste moderne browers geven je de mogelijkheid om lettertype, grootte en (ten minste voor links) kleur te wijzigen. Sommige browsers laten toe dat je een voorkeur voor een fontgrootte instelt, of zelfs een minimum fontgrootte. Het probleem is hier dat, ondanks wat de Web Content Accessibility Guidelines misschien suggereren, je niet redelijkerwijs kunt verwachten dat een website bruikbaar blijft bij elke willekeurige vergroting. Je kunt een pagina die je aan het lezen bent niet op blijven blazen en denken dat hij een bruikbaar geheel blijft. (Niemand die professioneel betrokken is bij toegankelijkheid lijkt dit toe te willen geven, maar wanneer je luistert naar onderzoekers die zich bezighouden met het gezichtsvermogen hoor je heel wat meer.) Vanaf een bepaald punt zul je de layout van de site aan moeten passen om er voor te zorgen dat hij nog correct werkt bij vergroting.
Dit betekent ook dat hulptechnologieën zoals schermvergroters niet alle problemen kunnen oplossen. Een website met meerdere kolommen en een ingewikkeld grafisch ontwerp bezoeken met vergrotingssoftware is als het scrollen door microfilms of het lezen van een landkaart van de veldtochten van Napoleon door een loep: als je het geheel wilt overzien dan kan dat, maar dan zul je de tekst niet kunnen lezen. Je zit vast aan de enorme vergotingen van kleine stukjes van de pagina.
Desalniettemin is het gebruik van software die de browserinstelling verandert en/of de scherminhoud vergroot de norm geweest voor slechtzienden. Het probleem zou al veel kleiner zijn als sites de mogelijkheid zouden bieden om de content in één enkele kolom te presenteren. En nu hebben ontwerpers die optie.
Het probleem is dat echte voorbeelden met een lantaarntje gezocht moeten worden. Een voorbeeld: de standaard stijl van OpenWeb heeft meerdere kolommen, maar om de kolommen uit te zetten moet je ook andere uiterlijke kenmerken uitzetten, zoals grote lichtgekleurde letters op een donkere achtergrond.
En er zijn ook al geen écht goede voorbeelden voor navigatie ten behoeve van slechtzienden. Dit is het soort gebruiksvriendelijkheid dat echt getest moet worden en waar we niet maar wat naar moeten raden. Misschien moeten we wachten totdat Jakob Nielsen een rapport over dit onderwerp schrijft.
Deze discussie geeft jou, de webdesigner die al standards compliant is, een nieuwe serie problemen om over na te denken. Je wist waarschijnlijk al iets over toegankelijkheid, maar nu heb je een nieuw soort variatie van je site die je kunt produceren met stylesheets – een versie toegesneden op slechtzienden, met en zonder kleurenblindheid.
Dit zijn nieuwe en experimentele technieken. Ze zijn nog niet getest met echte slechtziende mensen en een aantal van de details zal waarschijnlijk veranderen wanneer we meer gegevens uit de praktijk binnenkrijgen. Maar om die gegevens bij elkaar te krijgen hebben we wél echte websites nodig in de praktijk van alledag waarvan de ontwerpers bovenstaande technieken gebruiken. Dit is een geweldige kans voor jouw websites om deel uit te maken van de nieuwe avant-garde!
Veel van de methoden die in dit artikel beschreven worden zijn overgenomen uit een presentatie door Aries Arditi op de conventie van de American Academy of Optometry in Dallas, op 6 december 2003.
is een journalist, auteur en accessibility consultant uit Toronto, Canada.
Joe houdt zich al 20 jaar bezig met toegankelijkheid (en grafisch ontwerp).
Hij schreef het boek Building Accessible Websites (New Riders, 2003), dat waarschijnlijk nooit in het Nederlands vertaald zal worden.
Dit artikel is ook beschikbaar in Engels.
Publicatiedatum: 05 maart 2004
Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.
Copyright © 2002-heden » NAAR VOREN en de auteurs