[Testen op toegankelijkheid]

Degraderen of transformeren?
Drie manieren om navigeren met een uitklapmenu beter toegankelijk te maken

Wat is het verschil tussen de vier uitklapmenu's op deze pagina? Voor wie een gangbare browser gebruikt zijn ze zo op het eerste gezicht identiek. Maar schijn bedriegt:

  • Eén van de menu's voldoet niet aan de minimum toegankelijkheidseisen; de rest wel
  • Eén menu werkt ook zonder JavaScript
  • Eén menu wordt zonder JavaScript onzichtbaar; een lijst met links verschijnt, en
  • Eén menu is zelfs helemaal geen menu, het lijkt er alleen maar op!

Zie je de verschillen?

Het uitklapmenu wordt hier gebruikt als voorbeeld om drie ontwerpprincipes toe te lichten waarmee webpagina's toegankelijker kunnen worden gemaakt: 'graceful degradation', 'graceful transformation' en het aanbieden van een alternatief.
Graceful degradation gaat uit van de toepassing van webtechnieken als JavaScript en Cascading Style Sheets (CSS), waarbij er nadrukkelijk op wordt gelet dat informatie en navigatie in alle gevallen toegankelijk blijft voor browsers die dergelijke technieken niet ondersteunen.
Graceful transformation gaat uit van 'plain and simple' HTML, waarbij standaard HTML elementen hele andere eigenschappen toebedeeld krijgen en als zodanig onherkenbaar kunnen worden 'getransformeerd'. Mits de browser het aankan, uiteraard.
Aanbieden van een alternatief is de derde mogelijkheid om toegankelijkheid te waarborgen. Op deze pagina wordt daarom de HTML-tag <NOSCRIPT> gebruikt in combinatie met JavaScript. In browsers met JavaScript wordt alles wat tussen <NOSCRIPT>-tags staat niet weergegeven en juist weer wel in browsers zonder JavaScript.
Helaas zie je in de praktijk maar al te vaak dat geen van de drie hier genoemde technieken worden toegepast. Het resultaat: een webpagina die alleen maar werkt met één type browser, of een paar browsers als het meezit.

Verschillen

Met een moderne browser lijken alle vier menu's identiek: je kiest met je muis één van de mogelijkheden en vervolgens spring je 'vanzelf' naar de gewenste pagina. Als je de menu's probeert te bedienen via het toetsenbord, merk je al een klein verschil; als je niet weet met welke toetenbordcombinatie het menu kunt uitklappen, lukt dat alleen met menu 2. Heb je een andere dan bovenstaande browsers, of een 'oude' versie van de populaire bladerprogramma's, dan zie je mogelijk een ander opmerkelijk verschil: dan zijn er opeens nog maar drie uitklapmenu's. En heb je een browser zonder JavaScript, dan is helemaal snel duidelijk dat de vier niet hetzelfde zijn: één menu werkt niet meer, één heeft een submit-knop gekregen en er zijn ineens twee lijsten met links in plaats van uitklapmenu's.

Toegankelijkheid

Gebruik van een uitklapmenu in combinatie met JavaScript, als alternatief voor een lijst met links, betekent in het algemeen dat niet wordt voldaan aan de toegankelijkheidsrichtlijnen. IJkpunt 6.3 schrijft namelijk voor: 'Zorg ervoor dat pagina's bruikbaar zijn, als scripts, applets of andere programma-objecten uitstaan of niet worden ondersteund'. Er zal dus een voorziening moeten worden getroffen om de toegankelijkheid te waarborgen.

  • Menu 3 voldoet in het geheel niet aan ijkpunt 6.3. Geen JavaScript? Dan heb je gewoon pech gehad.
  • Wanneer JavaScript niet beschikbaar is, biedt menu 4 een lijstje met links als alternatief. Omdat het uitklapmenu zelf met behulp van document.write in JavaScript is 'geschreven', verdwijnt het als scripting niet beschikbaar is. Informatie komt in deze mogelijkheid dus tweemaal voor; eenmaal in het JavaScript-gedeelte en eenmaal in het <NOSCRIPT>-gedeelte.
  • Bij menu 1 neemt een server-side script de functionaliteit over van JavaScript als dat niet wordt ondersteund. Er verschijnt in dat geval een 'OK'-knop, omdat het nu een echt formulier is dat 'gesubmit' moet worden om het script op de server te kunnen uitvoeren. Om deze mogelijkheid te kunnen gebruiken dien je uiteraard wel scripts te mogen uploaden naar je server.
  • Een doodgewone lijst met links; dat is menu 2 eigenlijk. En dus toegankelijk. Een JavaScript zorgt er echter voor, dat deze lijst letterlijk wordt getransformeerd tot een uitklapmenu. Dit stelt eisen aan de browser; het werkt alleen met vrij recente browsers als Internet Explorer 5.5 en hoger, Netscape 7, Mozilla 1 en hierop gebaseerde browsers, en tegenwoordig ook met Opera 7. Op de meeste PC's is zo'n browser geïnstalleerd. En als dat niet het geval is, dan heb je in elk geval een gewoon lijstje met links.

Bruikbaarheid

De hierboven beschreven methoden hebben elk hun voor- en nadelen. Behalve menu 3 dan, want dat heeft alleen maar nadelen. En da's nou net het type uitklapmenu dat je meestal ziet. De andere methoden zijn niet eens complexer, dus daar kan het niet aan liggen. Verder is alle code en scripting die je ervoor nodig hebt via deze pagina beschikbaar, als je weet hoe je de broncode kunt bekijken.
De techniek die is toegepast bij menu 1 is een hybride oplossing, waarbij een script op de server het werk overneemt als de browser daar zelf niet toe in staat is. Menu 2 is een mooi voorbeeld van hoe toepassing van nieuwe technieken juist tot betere toegankelijkheid kunnen leiden. En menu 3 geeft een vergelijkbaar resultaat en biedt letterlijk een bruikbaar alternatief.
Welke techniek het beste bruikbaar is mag eenieder voor zichzelf bepalen en hopelijk is deze pagina een nuttig hulpmiddel bij die keuze. Zolang maar niet de techniek van menu 3 wordt gekozen...

Aan het gebruik van uitklapmenu's voor navigatie-doeleinden zijn overigens ook beperkingen verbonden. Het voert te ver om hier de voors en tegens te gaan behandelen. De volgende links gaan er dieper op in:

Dit artikel is geschreven naar aanleiding van een discussie in de nieuwsgroep nl.internet.www.ontwerp. Het 'graceful transformation' script van menu 2 is bedacht en gemaakt door Salar al Khafaji (website@salar.xs4all.nl), met bijdragen van Warden Dave. Warden's voorkeur ligt echter bij voorbeeldmenu nummer 4. Als je al van een voorkeur kunt spreken, want Warden en Salar zijn allebei van mening dat je eigenlijk geen uitklapmenu's zou moeten gebruiken voor navigatie-doeleinden; zie ook de argumenten in de hierboven genoemde documenten.

Nabrandertje
Wie nieuwsgierig is naar de toetsenbordcombinatie waarmee een menu kan worden uitgeklapt: onder Windows en met Internet Explorer, Mozilla of Netscape kun je daarvoor ALT+<pijl omlaag> gebruiken.

[Terug naar boven] [Beginpagina]


 
counter