Christophe Lambrechts
Toegankelijkheid
Inhoud
Inleiding
Maar al te vaak wordt er weinig tot geen rekening gehouden met de toegankelijkheid van websites. Op deze manier veliest men in vele gevallen een grote groep potentiele bezoekers. We denken hierbij in de eerste plaats aan visueel gehandicapte mensen. Maar ook mensen die niet in staat zijn om op een vlotte manier met muis en toetsenbord te werken.
Verder kunnen we het begrip toegankelijkheid nog veel ruimer zien. Zo is het maken van een website volgens de laatste standaarden op gebied van webontwikkeling een ware must. Enkel op deze manier kan een maximale compatibiliteit worden gegarandeerd met toekomstige browsers. Verder moet men ook rekening houden met de laadtijden voor een website. Iemand met een trage internetverbinding moet ook vlot toegang hebben tot een site.
Bij de ontwikkeling van deze site is veel zorg besteed aan de toegankelijkheid. Er werd zo goed en zo kwaad mogelijk getracht rekening te houden met bekende knelpunten. Voor het opstellen van een toegankelijkheidsplan maakte ik gebruik van de website http://diveintoaccessibility.org/. Hieronder kunt u lezen op welke manier ik de toegankelijkheid heb verwerkt in deze website. Indien er elementen ontbreken of u problemen vindt bij het vlot gebruik van deze website, gelieve mij te contacteren. Zo kan ik hopelijk de site nog meer aanpassen aan de normen van hedendaagse webontwikkeling.
Document structuur
De site voldoet volledig aan de XHTML 1.1 normen, dit wil zeggen dat alle html code kan gevalideerd worden met de W3C Markup Validation Service. Om het valideren nog eenvoudiger te maken is onderaan elke pagina een rechtstreekse link voorzien waardoor de site eenvoudige kan worden gevalideerd. Verder houdt het correct gebruik van XHTML ook in dat de pagina gebruik maakt van de juiste DOCTYPE specificaties en elke pagina beschikt over een taal definitie. Zo kunnen browsers, zoekmachines en tekstlezers voor mensen met een visuele beperking bepalen hoe de website moet worden behandeld.
Verder maakt de site gebruik van CSS. Dit zorgt ervoor dat de inhoud van de website gescheiden is van de layout. Het correct gebruik van CSS kan ook weer worden gevalideerd. Dit gebeurt op http://jigsaw.w3.org/css-validator/. Om ook hier het valideren te vereenvoudigen is er op elke pagina onderaan een link voorzien.
Uiteraard maakt de site gebruik van een duidelijketitel. Buiten de titelvan het browser venster is er ook voor gezorgd dat elke pagina voorzien is van een duidelijke hoofding. Verder wordt de actieve link in de hoofdnavigatie gekleurd in grafische browsers.
Verder nog een puntje dat bekend staat onder de naam table trick, dit is een techniek die ervoor zorgt dat de inhoud van de pagina boven die van de navigatie en andere inhoud komt te staan in de broncode van de website. Dit zorgt ervoor dat de inhoud van de pagina direct wordt getoond en dat dan pas wordt gestart met het laden van de overige elementen. Maar het heeft ook invloed op de manier dat spraakbrowsers de website in het algemeen voorlezen. Zo zullen zij eerst de inhoud van de pagina voorlezen en dan pas beginnen aan de overige elementen zoals navigatie. Dit zorgt ervoor dat men niet steeds bij elke website naar de navigatie moet luisteren alvorens aan de inhoud te komen.
Aangezien tabellen om de layout te bepalen van een website verouderd zijn, wordt er op deze pagina gebruik gemaakt van layoutblokken. De eigenlijke inhoud staat hiermee niet bovenaan de pagina, maar door de compacte omvang van de navigatie en een link naar de inhoud kan men met een tekstlezers vlot navigeren.
Navigatie & AccesKeys
Navigatie: de navigatie bestaat uit twee niveaus. Enerzijds is er een grafische navigatie die zo goed en zo kwaad mogelijk toegankelijk is gemaakt voor alle soorten gebruikers. Verder hebben we dan ook nog de toegevoegde navigatie voor mensen met niet grafische browsers. Hiervoor wordt enerzijds gebruik gemaakt van acceskeys en anderzijds van het tag element.
De site kent ook een sitemap, dit is een soort van overzichtspagina waarin een gestructureerd beeld van de verschillende pagina's wordt gevormd.
AccesKeys: is een relatief onbekend navigatie hulpmiddel. Het is interessant voor iedereen, je moet alleen van het bestaan afweten. Het concept is simpel. Door aan belangrijke links een waarde toe te kennen kan men doormiddel van een toetsencombinatie snel navigeren naar de betreffende plaatsen.
Op deze website zijn volgende AccesKeys van toepassing.
- S — Naar de inhoud, spring over de navigatie
- N — Naar de navigatie
- 1 — Home page
- 2 — Blog, laatste nieuws
- 3 — Site map
- 4 — Zoeken
- 9 — Contact
- 0 — Access key details
Het gebruik ervan is voor enkele populaire browsers hieronder uitgelegd. Voor extra informatie, raadpleeg de handleiding of help van uw browser.
- Internet Explorer: druk de Alt toets in, druk de overeenkomstige AccesKey (zie hierboven) in. De link die u gaat volgen wordt geselecteerd (veranderd van kleur). Houd deAlt toets ingedrukt en druk opEnter.
- Mozilla Firefox 1.5: druk de Alt toets en de AccesKey (zie hierboven) te samen in. U wordt direct doorverwezen naar de link.
- Opera: door op Alt+Esc te drukken krijg je een lijstje van beschikbare AccesKeys, de overeenkomstige toets activeert deze.
- Netscape: druk rechtstreeks de overeenkomstige AccesKey in.
Kleuren
Een webpagina maakt uiteraard gebruik van kleuren. Het web zou er anders nogal saai en grijs uitzien. We mogen echter we niet vergeten dat er mensen zijn die problemen hebben met al die prachtige kleuren. Denken we maar aan mensen met een bepaalde vorm van kleurenblindheid, voor hen is het niet zo simpel om een website te testen op toegankelijkheid. Ik heb bij de kleurkeuze gebruik gemaakt van contrasterende kleuren. Indien je problemen zou ondervinden met de kleuren, gelieve mij hierover te contacteren. Ik sta open om dergenlijke problemen te verhelpen en zo het web aangenamer te maken voor iedereen.
Een simulator en meer informatie over dit onderwerp vindt u op http://www.vischeck.com/.
Overige
Hieronder vindt u nog een beknopt lijstje van de overige items waar rekening mee wordt gehouden.
- Beperkt gebruik van afbeelding
- Duidelijk onderscheid tussen bezochte (onderstreept) en niet bezochte links (onderstreept met stippelijn)
- Gebruik van acroniemen om moeilijke woorden toe te lichten
- Geen gebruik van pop-ups of links die nieuwe vensters openen
- Beperkt gebruik van JavaScript (site is ook toegankelijk zonder JavaScript ondersteuning)
- Gebruik van
title&altattribuut bij links en afbeelding (maakt duidelijk waarvoor iets staat) - Gebruik van tabelhoofden met behulp van de tag
<th></th>. - Korte samenvatting van tabellen met het attribuut
summary. - Gebruik van relatieve lettertype. De website blijft goed geordend tot op zekere hoogte.
- Gebruik van
<h1>,<h2>,<h3>, ... tags zodat browsers de structuur van het document kunnen identificeren aan de hand van de hoofdingen. - Forms zijn voorzien van labels met behulp van de tag
<label>.
En verder?
Deze pagina over toegankelijkheid werd opgesteld met de informatie van Dive Into Accessibility. Op deze website kan je heel wat informatie vinden die toegankelijk is voor elke site bouwer. Ook staan op deze site heel wat vermeldingen naar andere site's die heel gedetailleerde informatie bieden. Zeker het bezoeken waard.
|
|
|
|
|
|
