Internet wordt langzamerhand een onmisbaar communicatiemiddel, ook voor gehandicapten. Veel mensen met een handicap zijn dan ook positief over internet. Maar ze lopen vaak tegen drempels aan die websites ontoegankelijk maken. De campagne Drempels Weg wil daarom zoveel mogelijk mensen en organisaties overtuigen van het belang van toegankelijk internet.

Internet is voor mensen met een handicap soms behoorlijk frustrerend. Stel, je bent blind. Je maakt regelmatig gebruik van internet. Vaak erger je je enorm, omdat bijvoorbeeld gevraagd wordt de rode velden nog even in te vullen. Of je bent doof en de enige manier waarop je een online bestelling kan afronden is via de telefoon. Of je hebt een verstandelijke beperking en de site waarop je rondkijkt wordt ineens Engelstalig. Of je hebt een motorische handicap waardoor je je handen niet zo goed kan gebruiken, maar de navigatie op de website beweegt in een hoog tempo. Probeer daar maar eens op te klikken.

Drempels Weg

De campagne Drempels Weg strijdt voor een beter toegankelijk internet. Centraal staan daarbij de internationaal erkende criteria voor toegankelijk internet, zoals opgesteld door het W3C-consortium. Toegankelijk internet is niet iets wat je in een dag bereikt. Daarom zijn de criteria opgedeeld in criteria die meer en criteria die minder prioriteit hebben. Deze richtlijnen en de verschillende prioriteiten zijn te lezen op drempelsweg.nl.

Toegankelijk internet begint volgens Drempels Weg met het besef dat niet iedereen met hetzelfde gemak over internet surft. En dan gaat het niet over mensen met een handicap alleen: ook ouderen zijn gebaat bij de mogelijkheid om de grootte van letters in te kunnen stellen en iedere internetgebruiker heeft baat bij een duidelijke navigatie en helder taalgebruik. Toegankelijkheid is dus een kwestie van mentaliteit. Een toegankelijke site hoeft niet lelijk van vormgeving te zijn. En het toegankelijk maken van een site hoeft ook niet veel te kosten. Vele websites worden eens in de zoveel tijd volledig herzien. Dat zou een mooi moment kunnen zijn om de nieuwe structuur meteen toegankelijk te bouwen. En tot die tijd kunnen website-aanbieders aan de slag met de volgende eerste stappen.

De eerste stappen

Een aantal webbouwers heeft zich gebogen over de vraag welke richtlijnen én belangrijk én relatief eenvoudig toepasbaar zijn. Daarnaast is gekeken naar de meest voorkomende drempels op internet, en met welke richtlijn deze drempels te bestrijden zouden kunnen zijn. Deze vragen leverde de onderstaande selectie op. De selectie pretendeert niet uitputtend te zijn, maar is slechts bedoeld als eerste stap op weg naar een voor iedereen toegankelijke website.

1. Lever een tekstequivalent voor elk niet-tekstueel element.
Elke afbeelding, elk niet-tekstueel element, op een website moet een alt-tekst hebben. De beschrijving moet vooral functioneel zijn en hetzelfde doel hebben als de visuele of auditieve informatie.

Als je een beeld alleen gebruikt om je document op te fleuren en/of bevat het geen informatie, zoals een “spacer”, gebruik dan wel een alt-tekst, maar laat hem leeg (alt=""). Hierdoor is het plaatje niet te zien of te horen in een tekst-browser.

Voorbeeld 1:

Code:
<img scr="/img/1.gif" alt="optie 1">

Uitleg:
Een tekst-browser laat de alt-tekst zien, een screenreader kan het ook laten horen. Door het gebruik van een alt-tekst geef je nuttige informatie. Gebruik je geen alt-tekst dan zal de tekst-browser of screenreader de naam van het bestand tonen (of alleen het woord: Image)

Voorbeeld 2:

Code:
<img scr="/img/aex.gif" alt="AEX-index: 351,43 (grafiek bijgewerkt tot 16.10 uur)" longdesc="/img/aex_ld.html">

Uitleg:
Een niet grafische browser laat de alt-tekst zien of horen. En je kunt verwijzen met de longdesc naar een document waar de data te vinden is. [voorbeeld]

2. Geef elk frame een titel, zodat je identificatie en navigatie van een frame vergemakkelijkt.
Door het gebruik van frames wordt een pagina verdeeld in verschillende segmenten. Wanneer de afzonderlijke frames geen duidelijke, beschrijvende titel hebben, is de website voor gebruikers van een tekstbrowser vrijwel onbruikbaar.

Daarnaast moet je een noframes ingang bieden voor browsers die geen frames ondersteunen. De <noframes> tag dient speciaal voor deze browsers. Zet hierin een link die leidt naar de eerste tekstpagina die in de frameset getoond wordt. Hierdoor kunnen frameloze gebruikers toch je site betreden.

Niet zo:
<frameset rows="20%,*">
  <frame src="titel.html">
  <frameset cols="30%,*">
    <frame src="menu.html">
    <frame src="content.html">
  </frameset>
</frameset>
<noframes>
  Op deze site worden frames gebruikt,
  maar uw browser ondersteunt geen frames.
</noframes>

Maar zo:
<frameset rows="20%,*">
  <frame src="titel.html" title="titel">
  <frameset cols="30%,*">
    <frame src="menu.html" title="menu">
    <frame src="content.html" title="content">
  </frameset>
</frameset>
<noframes>
  Uw browser ondersteunt geen frames.
  Ga <a href="content.html">hier</a>
  de site binnen.
</noframes>

Uitleg:
Een bezoeker van de site die gebruik maakt van een tekst-browser krijgt informatie over de inhoud van de frames en kan hierdoor gemakkelijk de weg vinden. Ook de pagina’s binnen het frame zouden een betekenisvolle Title-tag moeten hebben. Laat dus niet <title>Untitled Document</title> staan omdat jij het niet in jouw browser ziet.

3. Organiseer documenten zo dat ze zonder stylesheets gelezen kunnen worden.
Dit bereik je onder andere door de content van de opmaak te scheiden. Zet bij voorkeur de opmaak in een stylesheet en de content in het HTML-bestand. Je kunt testen of je site zonder stylesheets toegankelijk is door in Internet Explorer onder ‘Extra/Internet-opties’ te kiezen voor ‘Toegankelijkheid’, waarna je kunt kiezen welke onderdelen van de stylesheets je wilt negeren. Daarnaast kun je ook de <link> tag tijdelijk in een <ink> tag te veranderen. Alle stijlen vallen dan weg en je ziet snel genoeg of je pagina nog steeds bruikbaar is.

Gebruik liever <strong> en <em> dan <b> en <i>. “strong” en “emphasized” zijn algemene begrippen die een visuele en een screenreader elk op hun eigen manier kunnen invullen. “bold” en “italic” daarintegen zijn specifiek voor typografie: een screenreader kan niets met deze informatie.

4. Laat geen pop-ups of andere vensters verschijnen en het actuele venster veranderen zonder de gebruiker daarover te informeren.
Pop-up vensters kunnen heel verwarrend werken voor sommige gebruikers. Mensen die gebruik maken van speciale of aangepaste apparatuur worden vaak niet op de hoogte gesteld van het feit dat er een nieuw venster wordt geopend.

Het gebruik van target="_blank" in een link is af te raden. De bezoeker kan best zelf bepalen of de link in nieuw venster geopend moet worden.

• Internet Explorer/Windows, hou de Shift-toets ingedrukt als je op een link klikt.
• Netscape 6/7 en Mozilla, hou de Ctrl-toets ingedrukt.
• Internet Explorer/Mac, hou de Command-toets ingedrukt.

5. Zorg ervoor dat alle informatie die met behulp van kleur wordt overgebracht ook beschikbaar is zonder kleur, bijvoorbeeld uit de context of uit de opmaak.
Zo kun je informatie op gekleurde knoppen ondersteunen met tekst. Zorg ook voor voldoende contrast tussen de voor- en achtergrondkleur van tekstvlakken.

Niet zo:
- Klik op de groene button om door te gaan en op de rode button om te stoppen.
   

Maar zo:
- Maak uw keuze:
   

Natuurlijk gebruik je een alt-tekst als je voor de buttons een plaatje gebruikt.

6. Lever client-side imagemaps in plaats van server-side imagemaps, behalve waar de gebieden niet kunnen worden gedefinieerd met behulp van een beschikbaar geometrisch model.
Server-side imagemaps kunnen niet voorzien worden van alt-teksten, waardoor deze ontoegankelijk worden voor bepaalde gebruikers. Lever daarom apart tekstlinks voor ieder actief gebied van een server-side imagemap. De links op client-side imagemaps kunnen wel worden voorzien van alt-teksten. Hiervoor geldt wederom: de beschrijving moet vooral functioneel zijn en hetzelfde doel hebben als de visuele informatie.

7. Zorg ervoor dat pagina’s bruikbaar zijn, als scripts, applets of andere programma-objecten uitstaan of niet worden ondersteund.
Bijvoorbeeld door het gebruik van omschrijvingen, alt-teksten of een alternatieve navigatie.

Voorbeeld (een Flash-menu):

Code:
<object type="application/x-shockwave-flash" data="/swf/menu.swf" width="360" height="40">
 <param name="movie" value="/swf/menu.swf" />
 <a href="een.html"><img src="/img/1.gif" alt="optie 1" /></a>
 <a href="twee.html"><img src="/img/2.gif" alt="optie 2" /></a>
 <a href="drie.html"><img src="/img/3.gif" alt="optie 3" /></a>
 <a href="vier.html"><img src="/img/4.gif" alt="optie 4" /></a>
</object>

Uitleg:
Sommige bezoekers van de site kunnen geen gebruik maken van het Flash-menu omdat zij geen Flash-plugin geïnstalleerd hebben. Zij maken gebruik van het alternatief, de plaatjes. De bezoeker die met een tekst-browser de site bezoekt heeft niet veel aan Flash, ook niet aan plaatjes, maar omdat deze zijn voorzien alt-teksten wordt toch informatie van betekenis gegeven. Een volledig functionele navigatie.

8. Gebruik navigatiemechanismen op een consistente wijze.
Plaats de navigatie op elke pagina op dezelfde plaats. Dus niet voor elke pagina een andere plek, omschrijving of kleurstelling.

9. Gebruik geen opmaak om pagina’s automatisch te redirecten totdat user agents de mogelijkheid leveren om auto-redirect te stoppen.
Maak, met andere woorden, geen gebruik van de meta-tag <META HTTP-EQUIV="REFRESH">. Dit kan namelijk verwarrend werken.

Als sitebouwer kun je niet voorspellen hoeveel tijd iemand nodig heeft om een pagina te lezen. Als een “refresh” te vroeg plaats vindt is dat op zijn minst vervelend.

10. Zorg ervoor dat equivalenten voor dynamische content worden geactualiseerd, als de dynamische content verandert.
Wanneer je met scripts de inhoud van een pagina verandert, zoals afbeeldingen of geluidsfragmenten bij een ‘mouse-over’, dan moet de beschrijving van deze niet-tekstuele elementen meeveranderen.

11. Geef het scherm geen gelegenheid om te flikkeren totdat user agents gebruikers in staat stellen flikkering te sturen.
Snelle en felle kleurveranderingen werken niet alleen afleidend, voor sommige gebruikers is het zelfs gevaarlijk (kans op een epileptische aanval). Voorkom beeldwisselingen met een frequentie groter dan 2 Hz (2 keer per seconde) en kleiner dan 55 Hz.

---

Bronnen

» a list apart |
» constructing accessible web sites | » drempels weg

• Home
• Artikelen
• Colofon