Een toegankelijke website staat garant voor:

* Een eenduidige structuur
* Leesbare informatie (ook met screenreaders en TTS (tekst naar spraak programma’s)
* Goed te onderhouden eindresultaat
* Hoge score bij zoekmachines
* Benaderbaar vanuit alle soorten platformen

Peter op ’t Hof geeft in dit artikel een stoomcursus ‘scannen of je ontwerp toegankelijk is’ voor ontwikkelaars van websites.

Methode

Al een aantal jaren werken wij aan een scan die het mogelijk moet maken om niet alleen de inhoud van een willekeurige website op toegankelijkheid te kunnen testen, maar ook om de bron van de inhoud te kunnen onderzoeken. Momenteel beschikken wij over diverse testmethoden om toegankelijkheidsproblemen niet alleen op te sporen, maar ook daadwerkelijk op te lossen.

Deze uiteenzetting dient om u een indruk te geven van onze methoden en kan ook als een uittreksel van de W3C-richtlijnen worden gezien, uitgebreid met onderwerpen en informatie die in trainingen rond webtoegankelijkheid vaak ontbreekt.

Het onderstaande zal voor veel mensen een eyeopener zijn. We leggen niet alles in detail uit; als u weet waar het om gaat, kunt u veel informatie die u nodig heeft om dingen op te lossen of te verbeteren via internet vinden. Maar uiteraard kunt u ons altijd benaderen als u vragen heeft of meer in detail op zaken in wilt gaan.

De structuur waarin we de informatie presenteren, gebruiken we in onze methode om resultaten schematisch vast te kunnen leggen en een score te genereren.

Niveau 1

Groep 1: Multimedia

Deze groep is voor een goede toegankelijkheid sterk afhankelijk van het ontwerp van de site. Als de site gebruik maakt van veel beeldmateriaal (zoals filmpjes of Sheets), die veel informatie bevatten dan zal een visueel gehandicapte gebruiker informatie missen. Het omgekeerde geldt voor de dove gebruiker die behoefte zal hebben aan tekst in plaats van gesproken woord of muziek. Als de gebruikte Multimedia uitsluitend tot doel heeft zaken te verfraaien voor het visuele effect dan is een beschrijving in de vorm van een tag niet nodig. In het volgende overzicht geven wij de diverse Multimedia en de mogelijke oplossingen weer:

Symbolen en grafische tekstattributen (bijvoorbeeld High Ascii)

Meestal zullen leestekens goed worden weergegeven door elke willekeurige browser.
Het gebruikte font is hiervoor wel bepalend voor de mogelijkheden.

Animaties (Animatid Gif)

De ontwerper moet zich altijd realiseren dat animaties door de gebruiker moeten worden geladen. Marktonderzoek heeft aangetoond dat het beoogde effect om de aandacht van de bezoeker vast te houden plaats maakt voor ergernis. De ontwerper moet zich afvragen hof de informatie in de animatie essentieel is. Als het bijvoorbeeld een logo betreft dat door te knipperen opvalt, dan is een knop om deze weg te klikken of een positie bovenin het scherm voldoende. Een al te drukke animatie heeft niet alleen tot gevolg dat deze alle aandacht van de screenreader op zich vestigt, maar maakt een standaardstructuur voor de hele site onmogelijk.

Let bij het kiezen van het geluid- of beeldmateriaal altijd op de kwaliteit! De norm van een goed geluid staat of valt met de klankkleur. Hoe beter de gebruiker het verschil tussen voor- en achtergrondgeluid kan bepalen hoe meer het gebodene tot zijn recht komt, zelfs als iemand last heeft van afwijkingen in het gehoor.

Voor afbeeldingen en filmpjes geldt ook een verantwoorde keuze van resolutie, kleurenpatroon en techniek. Bij bepaalde combinaties van kleur en beweging is het zelfs mogelijk om epileptische effecten op te lopen! Wat te denken van misselijkheid bij het tonen van een 3D-animatie of bij een schommelende beeldopname.

Afbeeldingen en foto’s

Geef door middel van een tag een omschrijving van wat er wordt getoond. De Webcrawlers die voor zoekmachines de inhoud van uw Site scannen letten hierop en leveren u een hogere score in de zoekresultaten op.

Filmpjes

Hiermee worden te downloaden AVI- MPEG- of MOV-bestanden bedoeld. Vaak is de omschrijving van de inhoud al in het Item dat de Link bevat verwerkt. Een echt alternatief is alleen nodig als er veel informatie wordt geboden die elders niet wordt weergegeven.

Geluiden

Hierbij is een tag die een omschrijving van het geluid bevat voldoende. Ervaring leert echter dat geluiden (net als het kleuren van de achtergrond) meer als versiering dienen en geen extra informatie bevatten. Een afweging of deze aanpassing moet worden gemaakt is dus sterk afhankelijk van het behandelde onderwerp van de site.

Midi

Hiervoor geldt de zelfde overweging als bij geluid.

Streaming audio/video

Een alternatief hiervoor is lastig te realiseren. Meestal wordt deze Multimedia toegepast voor presentaties, radio- en TV-uitzendingen, film en pod- en vodcasts. Voor presentaties kan worden volstaan met een document dat de gesproken tekst bevat.
Voor andere Streaming Media kan (net als bij radio en televisie) ondertiteling, tweede beeld met een doventolk of Naration een mogelijkheid zijn. (Zie voor meer informatie de verhandelingen rond SMIL, XML en andere artikelen op deze pagina).

Flash

Hierbij kan zowel een alternatieve tekstpagina worden geboden, als gebruik worden gemaakt van de toegankelijkheids-opties binnen Flash. Deze opties worden alleen in de laatste Flash-Player ondersteund. Flash is door de gangbare browsers echter niet meer ondersteund, dus is een alternatief in HTML5 een echte noodzaak geworden.

Applets (ASP, JS) voor grafische doeleinden (opmaak en knoppen)

Ontwikkelomgevingen voor webapplicaties als Coldfusion Dreamweaver en Sharepoint gebruiken scripting om snel een mooie opmaak te genereren. Zowel binnen deze applicaties als aan de kant van de gebruikte browser kunnen voldoende aanpassingen worden gemaakt om een acceptabel resultaat te verkrijgen.

Ingescande tekst

Inscannen van tekst die al op papier aanwezig is kan in kantooromgevingen verleidelijk zijn voor het snel plaatsen van informatie, maar een grafisch tekstbestand (foto-PDF, png, jpeg, enz.) is rampzalig voor de structuur van de site.
Niet alleen is de tekst niet meer selecteerbaar of aan te passen. De tekst wordt ook niet meegenomen in zoekresultaten en maakt een standaard onderhoud van de site onmogelijk. Google is hier bijvoorbeeld erg gevoelig voor en levert u minpunten op. Als laatste zijn deze gegevens bijna niet in een digitaal archief onder te brengen. Dus: zet zo nodig altijd de tekst via OCR (Optical Character Reading) om naar selecteerbare tekst.

Alternatieve documenten

Downloadbare PDF-bestanden zijn (als ze tekst en geen ingescande pagina’s bevatten) volledig toegankelijk, zeker als de Advanced-standaard wordt toegepast. Zie ook ‘De ene PDF is de andere niet‘. MS Office bestanden die gedownload kunnen worden, zijn eveneens (grotendeels) toegankelijk. (Gebruik van Word of Excel of Powerpoint kan echter ook slecht toegankelijke bestanden opleveren. Zo zijn tekstvakken en WordArt in Word of grafieken in Excel niet benaderbaar voor screenreaders).

Groep 2: Tekstopmaak

Let bij het samenstellen van de tekstopmaak op de volgende zaken:

• Zichtbaarheid van de tekst als de browser op monochrome weergave is ingesteld;
• Voor dyslectische gebruikers: zorg voor duidelijke tekstovergangen in onderschriften en paragrafen;
• Helder en zichtbaar verschil tussen tekst en afbeeldingen op de voorgrond en de gebruikte achtergrond;
• Geen afwijkingen in tekstopmaak bij het uitschakelen van stylesheets;

Groep 3: Overdracht van gegevens

Hiermee worden de gegevensoverdracht tussen de site en eventueel achterliggende database of applicatie bedoeld en de overdracht tussen de site en de gebruikte agent of browser).

De invloed van de webmaster of ontwerper van de site is afhankelijk van de mate waarin de achterliggende applicatie de zichtbare inhoud genereert. Inkoopportalen, webwinkels en informerende instellingen baseren de getoonde inhoud op gegevens die elders op kantoor of zelfs op andere locaties zijn ingevoerd.

Stelt u zich altijd de vraag of het mogelijk is om de dynamische content plaats te laten vinden zonder update van het scherm. Een refresh om de 5 minuten is niet erg, maar het komt vaak voor dat bij het invullen van een enkel veld het hele scherm herschreven wordt.
Helaas is hier niet altijd omheen te werken.

Besef wel dat u de gebruiker dwingt om een vast leestempo aan te houden. Als de factor tijd een rol speelt (bijvoorbeeld bij een competitie-element) dan is hier niets aan te doen.
Een feit blijft dat de gebruiker altijd zelf moet kunnen bepalen hoe snel hij/zij informatie wil doorzoeken. Verder zijn tekstlinks voor de serversite-imagemaps een waardevolle aanvulling.

Groep 4: schermlayout

Zorg altijd voor kolommen en tabellen met duidelijke opmaak en markeringen. Als er gebruik wordt gemaakt van frames, voorzie deze dan van een duidelijke titel voor een effectieve navigatie.

Groep 5: scripts en interactie van de gebruiker

Het blijft altijd lastig om uw site vorm te geven zonder gebruik te maken van scripts.
Veel webbouwers gebruiken ontwikkelomgevingen die hier driftig gebruik van maken.
Een pagina aanbieden zonder gebruik te maken van scripts heeft echter veel voordelen.
Niet alleen geeft u de gebruiker de kans om bijvoorbeeld ook op het mobieltje alle informatie zonder problemen te laten benaderen, maar biedt u ook een snelle overdracht van gegevens.

Als de gebruiker ondersteuning voor Javascripts heeft uitgezet werkt uw formuliercontrole of opslag via de rechter muisklik niet meer. Het aanbieden van een vergelijkbare taak helpt u niet alleen aan een hogere score van toegankelijkheid maar levert u ook een betere controle over het gebruik van uw site op. Als scripts te hecht met het concept van de site zijn verbonden dan is het ook mogelijk om extra tags op te nemen. Denk aan een extra tag voor een knop die door een Javascript wordt gegenereerd of hotkeys om een niet te klikken knop toch te kunnen bedienen.

Niveau 2

Groep 1: pop-ups

Pop-ups worden steeds meer als lastig ervaren en worden ook bij het downloaden van mirrorsites gebruikt en kunnen controles uitvoeren of snel berichten naar de gebruiker pushen. Totaal negeren kunnen we ze niet, maar zo weinig mogelijk gebruiken is wel een must voor een toegankelijke site.

Bij een pop-up opent er een nieuw scherm dat moet worden dichtgeklikt. De inhoud van de pop-up wordt vaak niet voorgelezen en valt over andere tekst heen, waardoor vergrotingssoftware het ook zwaar te verduren krijgt.

Groep 2: Structuur van informatie

Logisch groeperen van informatie, duidelijke woordkeuze, niet te lange zinnen, het zijn allemaal zaken die in een gewone tekst ook het succes van een goede communicatie bepalen. Besteed hier altijd veel zorg aan.

Groep 3: Koppeling van informatie

Als er bij het concept van de site sprake is van veelvuldig doorsturen van de gebruiker (redirected Links), wordt het scherm onnodig van opbouw veranderd en ontstaat er verwarring. Hanteer dus altijd een vaste structuur en bouw deze modulair op zodat wijzigingen snel zijn aan te brengen en u ook zelf de weg niet kwijt raakt. Haast is altijd de grote valkuil voor een doordacht ontwerp.

Groep 4: Grafische effecten in tekst

Grafische effecten hebben tot doel om de aandacht van de lezer op een bepaald zinsonderdeel te vestigen of een klemtoon aan te geven. Als deze effecten worden gebruikt, moet de indeling van de tekst wel eenduidig zijn. Wisselingen van stijl werken verwarrend en de aandacht van de gebruiker verslapt. Bepaal altijd of deze zaken iets toevoegen aan het doel van uw site.

Groep 5: Formulieren

In de huidige moderne site worden formulieren vaak door scripts vanuit een database opgebouwd. Formulieren moeten altijd volledig met de tab-toets te doorlopen zijn en eenduidig zijn opgemaakt. De tijdens de invoer gemaakte fouten moeten door de gebruiker gemakkelijk te herstellen zijn.

Niveau 3

Groep 1: site layout

Als eigenaar van de site kunt u zich afvragen of de layout van de site overzichtelijk blijft als u zaken als animaties en omvangrijke afbeeldingen verwijdert of minder toepast. Navigatiepijlen zien er goed uit, maar gewone links werken ook en dwingen meer structuur af. Voegen de toegepaste multimedia veel toe aan de geboden informatie van de site, dan is het van belang om te bepalen of de aansluiting met het doel van de site voldoende is.
Alternatieven zijn dan van groot belang.

Groep 2: zoekfunctie

Een goede tekstindeling vergemakkelijkt het zoeken door de site. Mocht u een zoekfunctie in de site hebben ingebouwd maar de structuur is onlogisch dan zullen de gevonden resultaten veel minder bruikbaar zijn. Verder helpt een standaard indeling van alinea’s en paragrafen ook heel erg mee aan een goede schermindeling. Prettig leesbare informatie verhoogt de concentratie van de gebruiker en dus ook de bereidheid om terug te keren of zaken te kopen.

Groep 3: Invloed op zoekfunctie

Als het lastig is om aanpassingen in de zoekfunctie aan te brengen dan is het toevoegen van gebruikersinstellingen ook een optie. Overweeg of zoekwoorden volstaan of dat het toevoegen van Fuzzy Logic (keuzes via vraag en antwoord) beter werkbaar zijn.

Groep 4: tabellen, frames en stylesheets

Tabellen genieten vaak de voorkeur boven frames. Frames zijn wel toegankelijk als ze een juiste naam in de frameset hebben en corresponderen met de titel van de pagina. Helaas blijft het niet mogelijk om links aan te maken naar een pagina in een frame, waarbij deze met de bijbehorende frames getoond wordt.
Verder filteren zoekmachines de frames keurig uit de inhoud, waardoor de opmaak verloren gaat. De pagina’s zijn niet met een bookmark vast te leggen, scherminhoud wordt onoverzichtelijk en navigeren is lastig, ook bij het aanpassen van de schermresolutie.
Screenreaders worden echter steeds intelligenter en sommige tools maken frames nu eenmaal standaard aan. Helemaal negeren is dus niet mogelijk.

Voor tabellen raden wij aan zoveel mogelijk deze vormgeving voor het weergeven van gegevens te gebruiken. Denk hierbij aan overzichten (actielijsten, prijslijsten, etc), waarbij de positie van de data bijdraagt aan de informatie en uniek is.

Voor toepassingen als vormgeving en vervanging van frames zijn tabellen ongeschikt. Door gebruik te maken van Layout-technieken zijn veranderingen snel aan te brengen. Als u bijvoorbeeld stylesheets gebruikt dan dwingt u al een eenduidige opmaak af.

Groep 5: Ergonomie

Heeft u al eens geprobeerd om zonder de muis uw site te besturen? Als u met de tab-toets alle keuzes van de site kan benaderen, dan scheelt dat heel veel tijd en RSI-klachten. Zijn er in uw concept ook shortcuts (Hotkeys) mogelijk dan werkt deze navigatie nog sneller.