Validatie van je HTML-documenten is waarschijnlijk het belangrijkste, maar ook het gemakkelijkste wat de webdesigner kan doen om toegankelijkheid te waarborgen. Een validator is een programma dat controleert of de HTML in een document correct wordt gebruikt volgens de grammatica van HTML, de document type definition.
Het vergeten van een aanhalingsteken of het gebruiken van de
verkeerde waarde voor een attribuut is zo gedaan als je HTML aan het
schrijven bent. Alhoewel veel browsers robuust zijn en daardoor
gemakkelijk over dit soort fouten heen zullen komen, verschilt de manier
waarop ze zich herstellen nogal eens en kunnen nieuwe versies van browsers
zich onverwacht gedragen. Een goed voorbeeld van zo'n gedragsverandering
van een browser is een verschil tussen Netscape 1.22 en zijn opvolger
Netscape 2.0. De eerste browserversie maakte het niet uit of je een
afsluitend aanhalingsteken gebruikte in code als <a
href="oops.html>Oeps</a>, maar Netscape 2.0
heeft het afsluitend aanhalingsteken nodig. Een document dat
was gevalideerd, had geen problemen met beide browsers, maar een document
waarvan de auteur alleen in Netscape 1.22 had gekeken of het er goed
uitzag, miste vaak de helft van zijn inhoud in Netscape 2.0.
Gebruik de HTML-validator van de WDG om webpagina's mee te controleren. Pas op voor programma's die ten onrechte claimen een validator te zijn. Alhoewel documentcheckers en 'lints' waardevolle werktuigen kunnen zijn, vormen ze geen vervanging voor HTML-validators.
Waar mogelijk moeten webpagina's platformonafhankelijk zijn. Dat betekent dat ze onafhankelijk van het computersysteem en de instellingen van de gebruiker toegankelijk moeten zijn. Alhoewel validatie een belangrijke stap in de goeie richting is als het erom gaat voor platformonafhankelijkheid te zorgen, is dat alleen niet voldoende. Je moet er ook voor zorgen dat webpagina's niet afhankelijk zijn van een bepaalde resolutie, kleurdiepte, fontgrootte of venstergrootte.
Webdesigners die zich zorgen maken om de toegankelijkheid van hun documenten kunnen het beste hun pagina's bekijken met verschillende resoluties, kleurdieptes, font-groottes en venstergroottes. Doordachte pagina's zullen zich aanpassen aan en toegankelijk blijven met elke browserconfiguratie. Designers kunnen hun web-pagina's op meerdere browsers uitproberen (bij voorkeur ook op een tekstbrowser als Lynx); je kunt ook een vriend of een collega jouw pagina's hardop laten voorlezen vanaf een tekstbrowser om te simuleren hoe blinden of autorijders je pagina's zouden horen. Twee nuttige tools voor auteurs om de platformonafhankelijkheid van een website te controleren zijn Web Page Purifier en Web Page Backward Compatibility Viewer.
Je moet teksten die van een bepaald platform afhankelijk zijn vermijden, omdat mensen verschillende computersystemen gebruiken om op het web te komen. Bijvoorbeeld, "klik hier" is nietszeggend voor iedereen die geen muis gebruikt en is ook waardeloos als de tekst van een link wordt voorgelezen of aan het einde van een document in een samenvatting van links wordt meegeprint. Designers moeten ook teksten vermijden als "zie onder", omdat die nietszeggend zijn als een document wordt voorgelezen.
Als je HTML schrijft, moet je je richten op de structuur van het document in plaats van de presentatie. Een document waarvan de mark-up (de M in HTML) structuur weergeeft, kan zich makkelijk aanpassen aan verschillende browser-configuraties. Als je HTML gebruikt, moet je nadenken over wat de inhoud betekent in plaats van hoe hij eruit moet zien. Als je tekst vetgedrukt wil laten zijn, vraag je dan af waarom je dat wilt; als wat je werkelijk wilt het leggen van nadruk of sterke nadruk is, gebruik dan de daarvoor bedoelde HTML-elementen EM en STRONG.
Het FONT-element wordt vaak misbruikt om aan te geven dat iets sterke nadruk heeft of een kop is. Gebruik in plaats van <FONT COLOR="red">Waarschuwing!</FONT> liever <STRONG CLASS="warning">Waarschuwing!</STRONG>, waarbij je .warning { color: red; background: transparent } definieert in een stijlblad.
Sommige presentatie-attributen van HTML, zoals het ALIGN-attribuut, kunnen veilig worden gebruikt als presentatiesuggesties. In het algemeen leveren style-sheets een flexibelere methode die zowel in het voordeel van designers als gebruikers werkt. Om toegankelijkheid te behouden, mogen documenten nooit afhankelijk zijn van een bepaalde presentatie, inclusief een die wordt bereikt met style-sheets.
Als je de IMG- of AREA-elementen gebruikt, moet je altijd het ALT-attribuut gebruiken om een tekstalternatief te bieden. De waarde van het ALT-attribuut wordt getoond aan diegenen die plaatjes niet automatisch laden -- naar schatting zijn dat ongeveer 30 % van de gebruikers.
Het ALT-attribuut kun je het beste gebruiken om de functie van een afbeelding weer te geven in plaats van een omschrijving van de afbeelding. Zo is ALT="Zeer Goed Bedrijf" nuttiger voor degenen die plaatjes niet laden dan ALT="Logo van Zeer Goed Bedrijf". Over het algemeen mogen gebruikers van tekstbrowsers als Lynx niet eens merken dat er op een pagina afbeeldingen worden gebruikt, behalve als de afbeelding inhoud is die niet volledig kan worden vervangen door tekst. In zo'n geval, bijvoorbeeld in een foto-album of kunstgalerij, zijn de beschrijving en de functie van een afbeelding vrijwel gelijk aan elkaar en is een beschrijving van het plaatje toepasselijk voor de ALT-tekst.
Afbeeldingen die puur een decoratieve functie hebben, moeten ALT="" gebruiken om uitdrukkelijk aan te geven dat de afbeelding geen inhoud is. Decoratieve 'bullets' (bolletjes voor de items in een lijst) moeten ALT="*" of iets wat daar op lijkt als vervanger krijgen. Gebruik echter in geen geval iets als ALT="Round yellow ball". Als afbeeldingen in lopende tekst of tussen andere afbeeldingen worden gebruikt, dan kan het noodzakelijk zijn om ze met behulp van een extra teken te scheiden, zoals in ALT=" [Portret van mij] " of ALT="Web Design Group ~".
Lees voor een diepgaande bespreking van het ALT-attribuut het artikel Use of ALT texts in IMGs.
Afbeeldingen van tekst zijn vrij gebruikelijk op het web, maar ze kunnen moeilijk leesbaar zijn voor mensen die slecht zien of bij hoge resoluties op kleine monitors. HTML-tekst wordt weergeven in een grootte die door de gebruiker kan worden gekozen, maar in afbeeldingen van tekst heeft de tekst in sommige browsers een vaste grootte. Omdat verschillende gebruikers verschillende smaken hebben, is het niet een goed idee om de juiste font-grootte te raden. Designers moeten daarom proberen zo weinig mogelijk afbeeldingen van tekst te gebruiken.
Cascading Style Sheets kunnen vaak worden gebruikt om aantrekkelijke tekst aan te bieden zonder dat je daarvoor afbeeldingen nodig hebt. Met CSS kan de designer meerdere fysieke eigenschappen van tekst suggereren, waaronder zijn font, kleur, achtergrond, letterspatiëring en meer.
'Image maps' zijn afbeeldingen die als een menu werken: door op een bepaald gedeelte van de afbeelding te klikken, selecteer je een hyperlink. Image-maps zijn problematisch vanwege de povere ondersteuning voor diegenen die geen afbeeldingen laden. Als je een image-map gebruikt, moet je altijd proberen een client-side image-map te combineren met een server-side image-map. Als je een client-side image-map gebruikt, moet je daarbij altijd het ALT-attribuut van het AREA-element gebruiken.
Image-maps moet je zo weinig mogelijk gebruiken als ze niet 'natuurlijk' zijn. De meeste grafische menubalken kun je bijvoorbeeld veel gemakkelijker en efficiënter maken door verschillende afbeeldingen of alleen tekst te gebruiken. Anderzijds is een image-map die naar de organen van een lichaam of naar de provincies in een land linkt natuurlijker dan een grafische menubalk. Als een tekstalternatief mogelijk is zou dit in deze gevallen erg nuttig zijn.
Als je kleuren instelt door in HTML gebruik te maken van de BODY-attributen moet je alle kleurattributen instellen. Door slechts een of enkele van BGCOLOR, TEXT, LINK, VLINK en ALINK te gebruiken, riskeer je een ontoegankelijk document, omdat de kleuren die de gebruiker heeft ingesteld onleesbaar kunnen zijn tegen de kleuren die de auteur heeft gespecificeerd. Ga er als designer niet van uit dat gebruikers dezelfde browser-instellingen hebben als jij.
BODY-kleuren moet je altijd specificeren met een hexadecimale waarde in de vorm #rrggbb of #RRGGBB. Dit is nodig, omdat oudere browsers kleurnamen niet ondersteunen. Netscape 1.22 interpreteert bijvoorbeeld alle kleurnamen als blauw.
Designers die een achtergrondafbeelding aangeven met behulp van het BACKGROUND-attribuut van het BODY-element moeten ook alle kleurattributen gebruiken. Let er daarbij in het bijzonder op dat je een BGCOLOR kiest die leesbaar is tegen de tekstkleuren, omdat degenen die in een grafische browser afbeeldingen niet laden de achtergrondkleur zullen zien in plaats van de achtergrondafbeelding.
Het gebruik van het FONT-element van HTML (en zijn 'handlanger' BASEFONT) moet je over het algemeen vermijden bij het maken van een toegankelijke website. Alhoewel relatieve attribuutspeficaties als SIZE="+1" of SIZE="-1" vrij onschadelijk zijn, kunnen absolute grootte's als SIZE="1" een tekst tot gevolg hebben die te klein is om te lezen. Style-sheets geven designers de mogelijkheid om relatieve veranderingen in de font-grootte met een veel grotere flexibiliteit aan te geven dan mogelijk is met FONT.
Het COLOR-attribuut van het FONT-element mag je nooit gebruiken, omdat veel browsers die dit attribuut ondersteunen de door de gebruiker ingestelde font-kleur negeren als de designer een font-kleur heeft aangegeven. Het resultaat kan zijn dat je document onleesbaar is als de font-kleur geen goed contrast vormt tegen de achtergrond die de gebruiker heeft gekozen.
Ook het effect van het FACE-attribuut van het FONT-element kan vaak niet door de gebruiker worden tenietgedaan. Dit kan er toe leiden dat de browser een font kiest dat moeilijk is te lezen in de browserconfiguratie van de gebruiker. Onthoud dat hetzelfde font er totaal anders uit kan zien op een ander platform dan dat van jou.
Het FACE-attribuut mag je ook niet gebruiken om Griekse letters, wiskundige symbolen of tekeningetjes ('dingbats') te krijgen. Het FONT-element suggereert alleen maar een bepaalde presentatie, dus inhoud moet nog steeds zinvol zijn als die presentatie wegvalt. Browsers zouden <FONT FACE="Symbol">a</FONT> niet mogen weergeven als de Griekse letter alpha; deze bug zou in de toekomst kunnen worden verbeterd.
Zie voor een minder oppervlakkige bespreking van het FACE-attribuut het artikel <FONT FACE> considered harmful. Een andere uitstekende bespreking van het FONT-element is Warren Steel's What's Wrong With FONT?.
Designers moeten het gebruik van tabellen voor opmaak zo veel mogelijk vermijden. Helaas kan het volledig vermijden van tabellen voor lay-out de mogelijkheden van een designer beperken, omdat de opmaakmethodes van CSS nog niet voldoende ondersteund worden om tabellen volledig te kunnen vervangen. Als je tabellen voor opmaak gebruikt, hou dan met het volgende rekening:
JavaScript (of JScript of VBScript) wordt niet door alle browsers ondersteund en sommige gebruikers kiezen ervoor om het uit te schakelen. Als je JavaScript gebruikt, mag dat niet voor essentiële zaken zijn.
Als je bijvoorbeeld JavaScript gebruikt om een klein pop-up-venster vanaf een link te openen, moet je niet het volgende gebruiken:
<A HREF="javascript:window.open('foo.html', 'popup', 'scrollbars,resizable,width=300,height=120')">
In dit geval zal de link namelijk niet functioneren voor degenen die JavaScript uit hebben staan. Het volgende zou in alle browsers moeten werken:
<A HREF="foo.html" ONCLICK="if (window.open) { window.open('foo.html', 'popup', 'scrollbars,resizable,width=300,height=120'); return false; }">
Toegankelijkheid:
index ~ Waarom toegankelijke webpagina's
schrijven? ~ Toegankelijkheidsfabels
Copyright © 1997-2002 Liam Quinn. Vertaling copyright 2000 Branko Collin. Alle rechten voorbehouden.