1 navigatie 1.1 Algemeen 1.1.1 Website is bruikbaar zonder muis –6
1.2 Hyperlinks 1.2.1 Linkteksten zijn betekenisvol –7 1.2.2 Klikgebied is groot genoeg –9 1.2.3 Bestandstype is aangegeven bij downloads –9
1.3 Pop-up’s en nieuwe vensters 1.3.1 Pop-ups zijn schaalbaar –9 1.3.2 Pop-up’s zijn aangekondigd –10 1.3.3 Nieuwe vensters enkel voor externe links –10
2 Inhoud 2.1 Tekst 2.1.1 Pagina heeft een betekenisvolle titel –13 2.1.2 Hypertekst is semantisch gestructureerd –13
2.2 Afbeeldingen 2.2.1 Foto’s en illustraties 2.2.1.1 Alt-tekst beschrijft de afbeelding –14
2.2.2 Grafische tekst 2.2.2.1 Alt-tekst is letterlijke weergave –15 2.2.2.2 Tekst is minstens 16 pixels hoog –15 2.2.3 Complexe afbeeldingen 2.2.3.1 Alt-tekst biedt beknopte omschrijving –16 2.2.3.2 Afbeelding is elders tekstueel beschreven –16 2.2.4 Decoratieve afbeeldingen 2.2.4.1 Alt-tekst is leeg –16 2.2.4.2 Achtergrond is louter decoratief –17
2.3 Gegevenstabellen 2.3.1 Eenvoudige gegevenstabellen 2.3.1.1 Tabel is bruikbaar na linearisatie –18 2.3.1.2 Tabelhoofdingen zijn goed geplaatst –20 2.3.1.3 Tabelhoofdingen zijn juist gemarkeerd (TH) –22 2.3.2. Complexe gegevenstabellen 2.3.2.1 Toegankelijk alternatief is beschikbaar –22
2.4. Video en geluid 2.4.1 Gesproken tekst is als HTML beschikbaar –23 2.4.2 Video en geluid starten niet automatisch –24 2.4.3 Bedieningsknoppen zijn toegankelijk –24
2.5. Downloadbare documenten 2.5.1 PDF is vlot leesbaar na tekstconversie –24 2.5.2 Office-document is naar tekst omzetbaar –25
2.6 Taal 2.6.1 Basistaal van elke pagina is aangegeven –25 2.6.2 Taalwijzigingen op de homepage zijn aangegeven –26
3 Vormgeving 3.1 Tekstopmaak 3.1.1 Tekengrootte is eenvoudig te wijzigen –28 3.1.2 Letters zijn niet gescheiden door spaties of andere tekens –28 3.1.3 Links zijn zichtbaar te onderscheiden –29
3.2 Paginaopmaak 3.2.1 Cascading Style Sheets 3.2.1.1 Geen overlappingen bij een vergroting tot 150% –29 3.2.1.2 Broncode is logisch opgebouwd –30 3.2.2 Opmaaktabellen 3.2.2.1 Pagina blijft overzichtelijk na linearisatie –30 3.2.3 Frames 3.2.3.1 Pagina bevat hoogstens 5 frames –31 3.2.3.2 Frames hebben beschrijvende naam en titel –31 3.2.3.3 Frames zijn schaalbaar en of hebben schuifbalken –31 3.2.3.4 Links naar andere websites openen browservullend –32 3.2.3.5 Lijst met links naar afzonderlijke pagina’s is beschikbaar –32
3.3 Beweging 3.3.1 Beweging start uitsluitend op verzoek –33 3.3.2 Beweging kan stopgezet worden –33 3.3.3 Tekst en afbeeldingen knipperen niet –33
3.4 Kleur 3.4.1 Inhoud is begrijpelijk voor wie geen kleuren kan onderscheiden –33 3.4.2 Kleurcontrast is voldoende –34
4 Interactiviteit 4.1 Formulieren 4.1.1 Labels en formuliervelden zijn verbonden –36 AnySurfer richtlijnen Basislabel versie 1.0 | www.anysurfer.be | 01-07-2006
2
4.1.2 Verplichte velden zijn binnen het label aangekondigd –37 4.1.3 Tabvolgorde stemt overeen met de zichtbare structuur –37 4.1.4 Knoppen hebben informatieve opschriften –38
4.2 Javascript 4.2.1 Gebruik botst niet met overige ijkpunten –38 4.2.2 Dynamische updates kunnen aangekondigd worden –38 4.2.3 Website is ook zonder JavaScript bruikbaar –39
4.3 Flash en Java 4.3.1 Alternatieven in HTML zijn beschikbaar –39
Voorwoord AnySurfer (vroeger BlindSurfer) is een Belgisch kwaliteitslabel voor toegankelijke websites. Websites met het label zijn voor iedereen bruikbaar — ook voor slechtzienden, blinden, kleurenblinden, ouderen, en wie een auditieve of motorische handicap heeft. Daarnaast zijn toegankelijke websites over het algemeen beter geschikt voor kleine beeldschermen, zoals dat van een GSM of zakcomputer, en zijn ze bruikbaar in iedere webbrowser. Tenslotte scoren ze beter in de resultaten van zoekmachines zoals Google. Door de vele parallellen met andere principes van modern webdesign, zoals aandacht voor de algemene gebruiksvriendelijkheid en internationale webstandaarden, heeft het respecteren van de AnySurfer toegankelijkheidsrichtlijnen voordelen voor alle internetgebruikers. Alle organisaties met een eigen website kunnen een beroep doen op het AnySurferteam voor een website-audit. Voor een website het label kan dragen, moet aan de AnySurfer richtlijnen worden voldaan. Hiervoor biedt AnySurfer technische ondersteuning en hebben we een speciaal opleidingenaanbod samengesteld. Er zijn twee varianten op het label:
Basislabel
Het basislabel garandeert een vlotte basistoegankelijkheid voor iedereen. Webdesigners die goed vertrouwd zijn met HTML en CSS en aandacht hebben voor de principes van usability, kunnen het label met een kleine inspanning behalen. U kan de richtlijnen van het basislabel in PDF-versie downloaden via www.anysurfer.be.
Pluslabel
Het Pluslabel is aangevuld met extra ijkpunten die de toegankelijkheid een extra duwtje geven. Voor websites die veel PDF-bestanden of videobeelden aanbieden is het Pluslabel behalen minder vanzelfsprekend, maar niet onrealistisch. Voor louter informatieve websites — zoals de meeste overheidssites — vraagt het behalen van het Pluslabel weinig extra inspanningen.
PDF-versie De AnySurferrichtlijnen evolueren mee met de technologieën en standaarden van het internetlandschap. De AnySurfersite bevat daarom altijd de meest recente versie van de richtlijnenset. Deze PDF-versie is een momentopname van de richtlijnen voor het Basislabel uitgebracht als naslagwerk voor personen die de voorkeur geven aan een afgedrukte versie. Vooraleer u deze richtlijnen gaat toepassen kijkt u best na of u de meest recente versie bezit. Dit is versie 1.0 van 1 juli 2006 voor het Basislabel. Fouten of opmerkingen in verband met deze PDF mag u richten naar [email protected].
1 navigatie 1.1 Algemeen 1.1.1 Website is bruikbaar zonder muis Zorg ervoor dat alle hyperlinks bereikbaar en activeerbaar zijn met het toetsenbord.
Zelf controleren Leg de muis aan de kant en probeer of u alle hyperlinks kunt bereiken met de Tabtoets. Houd de Shifttoets ingedrukt terwijl u op Tab drukt om een stap terug te keren. Met de Entertoets activeert u een hyperlink. Wees extra aandachtig bij het testen van de bereikbaarheid van hyperlinks in uitklapmenu’s en snelmenu’s.
Uitklapmenu’s Het ijkpunt Hypertekst is semantisch gestructureerd verplicht het gebruik van geneste ul tags voor lijsten met meer dan 1 niveau. Dit ijkpunt is ook op uitklapmenu’s van toepassing. Als u CSS gebruikt om subniveaus te verbergen in zo’n uitklapmenu, is het vaak niet mogelijk om links in die subniveaus te bereiken met de tabtoets. Dat lost u op door: •
een optioneel stijlblad te voorzien dat alle subniveaus tegelijk weergeeft, zoals in een sitemap. In dit ijkpunt over CSS leest u hoe u zo’n optioneel stijlblad aanbiedt met behulp van een CSS switcher.
•
of door de onbereikbare items uit de subnavigatie te herhalen op een onderliggende pagina die wel met het toetsenbord is te activeren. Een voorbeeld vindt u op de website van de Provincie Oost-Vlaanderen.
Snelmenu’s Als u hyperlinks in een keuzelijst plaatst, voeg dan steeds een knop toe om de keuze te bevestigen. Keuzelijsten met een JavaScript onChange event (zoals in onderstaand voorbeeld) zijn problematisch voor wie met het toetsenbord navigeert. De actie die aan het event gekoppeld is (het laden van een nieuwe pagina), wordt in de meeste browsers al bij de eerste toetsaanslag uitgevoerd (vanaf het ogenblik dat de keuzelijst focus krijgt). Hierdoor is het niet mogelijk om de volledige lijst te doorlopen met de pijltjestoetsen. Opmerking: in sommige programma’s om webpagina’s te maken worden snelmenu’s ‘quick menus’ of ‘jump menus’ genoemd.
Voorbeeld: taalkeuze Niet goed <select onchange=“parent.location=this.value”>
Gebruikt u grafische hyperlinks, lees dan ook de richtlijnen over afbeeldingen en grafische tekstdelen.
•
Als hyperlinks geactiveerd worden met behulp van JavaScript, gebruik dan uitsluitend apparaatonafhankelijke event handlers. Lees hiervoor ook de richtlijn over JavaScript.
•
Het komt wel eens voor dat een Flash-object de linkfocus blijvend opeist. Dat merkt u als het herhaaldelijk op de tabtoets drukken uitsluitend nog hyperlinks binnen het Flash-object doet oplichten, in een eindeloze lus. Het Flash-object kunt u dan enkel nog verlaten door met de muis elders in de pagina te klikken. Dit ongewenste gedrag kunt u meestal verhelpen door geen expliciete tabvolgorde te specifië²¥n voor hyperlinks die in Fash zijn gedefinieerd.
Meer lezen •
Drop Down Menu Tutorial
•
A List Apart: Articles: Hybrid CSS Dropdowns
•
Accessible contents menu
•
Accessible Website Menu: Ultimate Drop Down Menu
•
Faire un menu dynamique ouvert et accessible
•
A List Apart: Articles: Drop-Down Menus, Horizontal Style
1.2 Hyperlinks 1.2.1 Linkteksten zijn betekenisvol Blinden overlopen de hyperlinks op een webpagina met de tabtoets. Hulpprogramma’s kunnen ook automatisch een lijst samenstellen met alle links die op een pagina voorkomen. Zo’n linklijst kan het navigeren aanzienlijk versnellen: als je blind bent, kan je een pagina immers niet diagonaal lezen of met je ogen ‘scannen’. De context (de omliggende tekst) waarin links voorkomen, is evenwel niet beschikbaar voor wie op deze manier surft. Daarom moeten linkteksten betekenisvol of informatiedragend zijn; ze moeten ondubbelzinnig weergeven wat het doel van de link is.
Andere voordelen Uit usability-onderzoek blijkt dat ook andere internetgebruikers meer aandacht besteden aan linkteksten dan aan de overige tekst op een webpagina. Daarnaast hebben ze een gunstige invloed op de manier waarop zoekmachines de website indexeren.
Voorbeelden Niet goed
Klik hier voor informatie over ons congres over webtoegankelijkheid op 30 april.
Klik hier voor informatie over ons congres over webtoegankelijkheid op 30 april.
Beter Het is niet verplicht, maar het staat netter om de constructie ‘Klik hier voor...’ weg te laten. Dat voorkomt bovendien verwarring: ‘Klik hier’ is immers niet (meer) aanklikbaar in bovenstaand voorbeeld.
Toegestane uitzondering Bij korte nieuwsberichten hoort vaak een ‘Lees verder’ link. Op zichzelf is de linktekst ‘Lees verder’ niet informatiedragend, maar als op dezelfde pagina ook een tweede, duidelijke link met hetzelfde doel aanwezig is, zijn dergelijke links toch toegestaan. De titel van het bericht is meestal het best geschikt voor die extra link.
Anysurfer lanceert een nieuwe website. Dat werd wel eens tijd. Lees verder
Andere aandachtspunten •
Bij een grafische link zit de linktekst in het alt attribuut. Hier beschrijft de alt-tekst dus het doel van de link en niet hoe de afbeelding er uit ziet.
•
Een betekenisvolle linktekst hoeft niet te starten met 'ga naar' of 'klik hier om'. Visueel moet het immers al duidelijk zijn dat het om een link gaat en ook een screenreader kondigt links zelf aan.
•
Met behulp van CSS is het mogelijk om delen van linkteksten te verbergen als een pagina in een grafische browser wordt weergegeven. Screenreadergebruikers zullen toch de volledige linktekst kunnen lezen. Deze techniek is toegestaan, mits correct toegepast.
•
Een title-attribuut bij de hyperlink kan helpen om het doel van de link te verduidelijken. Het maakt betekenisvolle linkteksten echter niet overbodig omdat niet alle browsers en hulpprogramma's de inhoud van title-attributen kunnen lezen.
•
Hyperlinks die op het scherm niet zichtbaar zijn, zijn dat soms wel voor screenreadergebruikers. Meestal gaat het om verwijderde hyperlinks waarvan een restant is achtergebleven in de
broncode. Een screenreader zal zulke links aankondigen als 'onbenoemd', en dat is verwarrend. Verwijder linkresten daarom altijd uit de broncode.
Voorbeeld (niet goed)
1.2.2 Klikgebied is groot genoeg Zorg ervoor dat grafische hyperlinks minstens 15 pixels breed en hoog zijn. Dat is nuttig of zelfs noodzakelijk voor internetgebruikers met een beperkte motoriek en voor wie een muisraster, een aanwijsstok of een ander invoermiddel gebruikt dat de muis vervangt.
Tip om het aanklikbare gebied te vergroten De CSS-eigenschap padding kan het aanklikbare gebied van block level elements vergroten.
1.2.3 Bestandstype is aangegeven bij downloads Als een hyperlink verwijst naar iets anders dan een HTML-bestand, kondig het bestandstype dan aan in de linktekst. Zo weet een gebruiker wat er zal gebeuren als hij de link activeert. Als het bestand groter is dan een megabyte, vermeld dan ook de bestandsgrootte. Het is belangrijk dat deze aanduiding deel uitmaakt van de linktekst (de tekst die tussen en geplaatst is). In het ijkpunt Linkteksten zijn betekenisvol leest u hoe blinde internetgebruikers de links op een webpagina overlopen.
Toegestane uitzondering Voor pagina’s waar uitsluitend PDF- of andere bestanden te downloaden zijn, volstaat het om het bestandstype bovenaan de tabel of lijst te vermelden.
Overeenkomstige richtlijnen •
BlindSurfer: aanbeveling
•
WCAG: ijkpunt 13.6
1.3 Pop-up’s en nieuwe vensters 1.3.1 Pop-ups zijn schaalbaar
Bezoekers die tekst in een pop-upvenster willen vergroten, moeten het venster ook breder of hoger kunnen maken opdat de tekst erin zou passen. Om pop-ups te openen, is er de JavaScript method window.open. Die aanvaardt een aantal parameters waarvan de laatste een opsomming met eigenschappen kan bevatten om de vormgeving van het venster te bepalen. Het is niet toegestaan om hierin de eigenschappen resizable en scrollbars als waarde ‘no’ te geven. De standaarwaardes van deze eigenschappen zijn respectievelijk ‘yes’ en ‘auto’. Als u deze eigenschappen niet specifieert, is er geen probleem. Programma’s waarmee u webpagina’s op een visuele manier kan ontwerpen, doen dat echter vaak automatisch. Bekijk daarom steeds aandachtig de broncode die programma’s als Dreamweaver of FrontPage genereren en pas aan waar nodig.
1.3.2 Pop-up’s zijn aangekondigd Als een hyperlink een pop-upvenster opent, kondig dat dan aan als een onderdeel van de linktekst. Dialoogvensters en zogenaamde alert boxes hoeft u niet aan te kondigen.
Onthoud ook dat het niet toegestaan is om de event handlers onmouseup of onmousedown te gebruiken om hyperlinks te activeren. Meer hierover leest u in het ijktpunt Website is bruikbaar zonder muis.
1.3.3 Nieuwe vensters enkel voor externe links Opent u een pagina van uw eigen website in een nieuw venster, kondig dat dan aan in de linktekst. Als de link naar een pagina op een externe website verwijst of naar een eigen pagina of rubriek met een duidelijk afwijkende structuur en vormgeving, dan is het niet nodig om het nieuwe venster aan te kondigen.
Aanbeveling Het is aanbevolen om nieuwe pagina’s nooit in een nieuw venster te openen. De meeste gebruikers bepalen liever zelf of ze pagina’s in een nieuw venster of tabblad willen bekijken.
2 Inhoud 2.1 Tekst 2.1.1 Pagina heeft een betekenisvolle titel Met de title tag geeft u iedere pagina een duidelijke en unieke titel. De titel is het eerste paginakenmerk dat screenreaders voorlezen. Dezelfde titel is zichtbaar in de titelbalk van browsers en wordt gebruikt in de resultaatlijst van zoekmachines en de favorietenlijst van internetgebruikers. Titels moeten ook de naam van de website zelf vermelden, zoals ‘Onze diensten — Boekhoudkantoor Devloo’ of ‘Contact — Vlaanderen.be’.
Aanbeveling Het is een goed idee om de naam van de site achteraan te plaatsen in de paginatitel. Gebruikers van screenreaders hoeven hierdoor niet steeds opnieuw de naam van de site te horen bij het inladen van een nieuwe pagina. Het heeft ook andere voordelen: de breedte van tabbladen, geminimaliseerde vensters in de taakbalk van Windows en favorietenlijsten is vaak beperkt waardoor het laatste gedeelte van een titel soms niet zichtbaar is of vervangen wordt door drie puntjes. Als u het meest unieke en betekenisvolle onderdeel van de titel vooraan plaatst, het eigenlijke onderwerp van de pagina, vergemakkelijkt dat het terugvinden van informatie voor de meeste bezoekers.
2.1.2 Hypertekst is semantisch gestructureerd Om hypertekst toegankelijk te maken, volstaat het niet om visueel aan te duiden wat een kop, een lijst of een citaat is. U moet ook de bijbehorende structuurtags gebruiken die HTML hiervoor biedt. Zo kunnen screenreaders en spraakbrowsers automatisch inhoudsopgaves samenstellen en lijsten met verschillende niveaus beter doorzoekbaar maken. Dat is ondermeer nuttig voor blinden en dyslectici Semantisch gestructureerde hypertext past zich ook beter aan aan persoonlijke stijlbladen. Met behulp daarvan kunnen slechtzienden de kleur, het lettertype, de grootte en de positie van verschillende teksten paginadelen nauwkeuriger bepalen. Bijkomende voordelen van structuurtags voor webontwikkelaars: •
Positie in resultaatpagina's van zoekmachines wordt gunstig beïnvloed
•
In combinatie met CSS is de vormgeving nauwkeuriger en onafhankelijk van de HTML-code aanpasbaar.
•
HTML-code is compacter en overzichtelijk
•
Basisopmaak is gegarandeerd in oude browsers en op mobiele apparaten
Voor het pluslabel geldt een strengere versie van dit ijkpunt.
Koppen Voor koppen op het hoogste niveau gebruikt u de h1 tag. Subkoppen geeft u aan met h2, en koppen op een derde of lager niveau met h3 tot h6.
Voorbeeld (niet goed) <span class=“hoofdtitel”>Titel van de webpagina <span class=“subtitel”>Inleiding
Lijsten Voor lijsten gebruikt u ol (voor genummerde lijsten) of ul (voor lijsten met opsommingstekens). Combineren kan ook.
Voorbeeld Niet goed 1. Home 2. Aanbod * Auto’s * Motorfietsen 3. Contact
Goed
Home
Aanbod
Auto’s
Motorfietsen
Contact
2.2 Afbeeldingen 2.2.1 Foto’s en illustraties 2.2.1.1 Alt-tekst beschrijft de afbeelding Elke afbeelding heeft een alt-tekst nodig. Bij informatieve foto’s en illustraties moet die een beknopte beschrijving bevatten van wat afgebeeld is.
Voorbeelden
Tips voor goede alt-teksten •
Volzinnen zijn niet nodig. Vaak volstaat een woord. Beperk de alt-tekst liefst tot 40 karakters.
•
Begin een alt-tekst niet met ‘afbeelding van’, ‘hier ziet u’ of ‘foto:’. Hulpprogramma’s voor blinden
Gebruik geen bestandsnamen omdat die niet altijd netjes uitgesproken worden door spraakbrowsers.
•
Als een grote afbeelding opgeknipt is en de weergave met behulp van verschillende tags is samengesteld, koppel de omschrijving dan aan het eerste onderdeel en laat de alt-tekst van de andere delen leeg.
•
Vergeet ook niet om alt-teksten te vertalen op meertalige websites
Opgelet U mag informatieve en decoratieve afbeeldingen niet verwarren. Lees meer over decoratieve afbeeldingen.
Alternatieve aanpak voor fotogallerijen Een fotogallerij is een reeks van vijf of meer foto’s over hetzelfde onderwerp. Er is niets op tegen om iedere foto afzonderlijk te beschrijven met een alt-tekst, maar dat is niet verplicht om het label te behalen. Fotogallerijen zijn vluchtig; de meeste fotoverslagen zijn niet meer dan een visuele impressie van een evenement dat voorbij is. Daarom mag u bovenaan zo’n gallerij een algemene beschrijving geven van de fotoreeks. U omschrijft dan in enkele zinnen waar en wanneer de foto’s genomen zijn en wat er zoals te zien is. De foto’s zelf geeft u een lege alt-tekst (alt=””). Zijn de foto’s klikbaar, geef ze dan een unieke alt-tekst, zoals alt=”Foto 1 (groot)”, alt=”Foto 2 (groot”) etc.
Meer lezen •
Alt text in IMG
2.2.2 Grafische tekst 2.2.2.1 Alt-tekst is letterlijke weergave De alt-tekst herhaalt de letterlijke tekst die grafisch is weergegeven. Als de grafische tekst meer dan drie regels lang is of niet-lineair (zoals in een organigram), dan is een alttekst alleen niet toereikend. Pas in dat geval ook het ijkpunt over complexe afbeeldingen toe.
2.2.2.2 Tekst is minstens 16 pixels hoog Zorg ervoor dat de tekengrootte van grafische (of ‘gerenderde’) tekst minimaal 16 pixels bedraagt. Dat komt overeen met 11 à 12 punten, de standaardgrootte van niet-opgemaakte browsertekst. Tests wijzen uit dat vergroting van gerenderde tekst die kleiner is dan 16 pixels een slecht leesbaar resultaat oplevert.
Andere tips om gerenderde tekst leesbaarder te maken •
Gebruik letters met zachte randen (‘anti-aliasing’) om de leesbaarheid van fijne letters te verbeteren.
•
Vermijd het gebruik van frivole en kalligrafische lettertypes, cursieve of doorgehaalde tekst en sterk variërende tekstgroottes.
•
Plaats tekst liever niet op foto’s of kleurverlopen.
2.2.3 Complexe afbeeldingen 2.2.3.1 Alt-tekst biedt beknopte omschrijving Complexe afbeeldingen hebben een duidelijke en beknopte alt-tekst nodig, ook al worden ze elders uitgebreid beschreven. Een goed voorbeeld vindt u op de website van het Lokaal Gezondheidsoverleg (voedingsdriehoek).
2.2.3.2 Afbeelding is elders tekstueel beschreven Complexe afbeeldingen bevatten meer informatie dan de alt-tekst kan weergeven. Komen het vaakst voor: •
Kaarten en routeplannen
•
Grafieken en schema's
•
Gescande artikels
U hoeft complexe afbeeldingen niet te weren; voor de meeste bezoekers zijn ze immers een handige hulp. Wie echter niet (goed) ziet, heeft een tekstueel alternatief nodig. Als de alt-tekst van een organigram “Organigram OCMW Brussel” luidt, heeft een blinde bezoeker nog geen idee van de structuur van het OCMW. Het organigram moet daarom ook woordelijk en/of met behulp van de beschikbare HTML-tags beschreven worden. Die beschrijving mag u boven of onder de afbeelding plaatsen. U kan ook een link naar een afzonderlijke pagina maken waar de beschrijving te lezen is.
Oplossing voor liggingsplannen Het is niet nodig om liggingsplannen van naaldje tot draadje te beschrijven. Het doel van een liggingsplan is mensen de weg wijzen naar een plaats, en dat kan ook in enkele volzinnen. Voor de meeste plannen volstaat het om te vermelden dat het gebouw zich bevindt op het kruispunt van straat x en y en dat bushalte z op vijftig meter afstand ligt. Daarnaast is het een goed idee om te beschrijven hoe de plaats het best bereikt kan worden met het openbaar vervoer, vanaf het dichtsbijzijnde NMBS-station.
Andere voorbeelden • Deze voedingsdriehoek is een voorbeeld van een complexe afbeelding • Tekstuele beschrijving van de voedingsdriehoek • Kaart van Europa waarop de tijdszones zijn aangeduid beschrijving: Tijdzones in Europa
2.2.4 Decoratieve afbeeldingen 2.2.4.1 Alt-tekst is leeg Alle afbeeldingen die u invoegt met behulp van de IMG of de AREA tag hebben een alt-attribuut nodig,
ook als ze louter decoratief gebruikt zijn. Dat is een toegankelijkheidsregel, maar ook een voorwaarde om aan de actuele XHTML-standaard te voldoen. Omdat decoratieve afbeeldingen geen informatiewaarde hebben, laat u het alt-attribuut leeg. Een spatie of het woord ‘decoratie’ is ongewenst. Decoratieve afbeeldingen die het vaakst voorkomen, zijn onzichtbare ‘spacers’, afgeronde hoeken en paginaranden. Maar ook sfeerfoto’s die verwerkt zijn in hoofdingen of op intropagina’s hoeven niet noodzakelijk beschreven te worden.
2.2.4.2 Achtergrond is louter decoratief Omdat achtergrondafbeeldingen in de regel geen informatiewaarde hebben, is het niet mogelijk om er met HTML een tekstbeschrijving aan te koppelen. Daarbij maakt het niet uit of achtergrondafbeeldingen in de broncode van een webpagina of in een stijlblad gebruikt zijn. Wie geen afbeeldingen kan waarnemen, merkt de aanwezigheid van achtergrondafbeeldingen dus niet op. Meestal is dat geen probleem, maar als zo’n afbeelding tekst of een andere boodschap bevat, moet u die ook op een andere manier — met behulp van HTML — overbrengen.
Voorbeeld In dit voorbeeld zijn deze CSS classes gebruikt: .goed { background: url(vinkje.gif) center middle no-repeat; padding: 0 0 0 15px; } .fout { background: url(kruisje.gif) center middle no-repeat; padding: 0 0 0 15px; } .verberg { display: block; position: absolute; top: -10000px; }
Fout
class=“goed”>Brussel is de hoofdstad van België
class=“fout”>Het atomium staat in Antwerpen class=“goed”>De zomer komt na de lente class=“fout”>Een toegankelijke website maken is moeilijk
Goed Een voor de hand liggende oplossing is om juiste en foute antwoorden te groeperen en aan te kondigen met een hoofding.
Goede antwoorden
Brussel is de hoofdstad van België
De zomer komt na de lente
Foute antwoorden
Het atomium staat in Antwerpen
Een toegankelijke website maken is moeilijk
Als u niet aan de vormgeving wilt raken, kunt u ook de woorden ‘goed’ of ‘fout’ tussen haakjes vermelden. Met behulp van CSS kunt u ze vervolgens verbergen in visuele browsers. Sscreenreadergebruikers zullen de woordjes wel opmerken.
Brussel is de hoofdstad van België<span class=“verberg”> (goed)
Het atomium staat in Antwerpen<span class=“verberg”> (fout)
De zomer komt na de lente<span class=“verberg”> (goed)
Een toegankelijke website maken is moeilijk<span class=“verberg”> (fout)
2.3 Gegevenstabellen 2.3.1 Eenvoudige gegevenstabellen 2.3.1.1 Tabel is bruikbaar na linearisatie Denkt u even alle HTML-tabellen weg. Browsers en hulpprogramma’s die geen tabellen kunnen weergeven, plaatsen de inhoud van iedere cel op een nieuwe regel (of lezen ze achtereenvolgens voor). De volgorde van die regels stemt precies overeen met de volgorde van de cellen (th en td) in de broncode van de pagina.
Zelf testen Met de Web Developer Extension voor Firefox (en sommige andere browsers) kunt u snel controleren of een webpagina in lineaire vorm logisch en samenhangend is. •
Schakel CSS tijdelijk uit met Beeld > Paginastijl > Geen stijl.
•
Kies Extra > Web Developer > Miscellaneous > Linearize page.
Verbetering Een eerste stap om deze tabel overzichtelijker te maken is om elk gegeven in zijn eigen cel te plaatsen:
maandag
9-12u en 16-17u
9-12u en 16-17u
15-17u
dinsdag
9-12u en 16-17u
15-17u
16-17u
Dit is een afdoende oplossing omdat er slechts drie kolommen met gegevens zijn. Wilt u de gegevens van meer personen naast elkaar tonen, dan is het wellicht het meest overzichtelijk om de tabel op te splitsen en de gegevens van elke persoon in een aparte geneste tabel te tonen.
2.3.1.2 Tabelhoofdingen zijn goed geplaatst U maakt het zichzelf gemakkelijk door kolomhoofdingen in de bovenste rij van de tabel te plaatsen en de rijhoofdingen in de eerste kolom. Als u de tabel anders wil structureren, dan moet u de attributen id en headers gebruiken. Meer hierover leest u in het ijkpunt over Complexe gegevenstabellen.
Voorbeeld In deze tabel kunnen de th tags hun functie niet optimaal vervullen omdat ze niet in de eerste rij staan.
2.3.1.3 Tabelhoofdingen zijn juist gemarkeerd (TH) Cellen die hoofdingen bevatten, geeft u aan met th tags en cellen die gegevens bevatten met td tags. Als u niet tevreden bent met het uitzicht van de hoofdingen (standaard zijn ze vet en gecentreerd), kunt u dit eenvoudig aanpassen in het stijlblad.
Voorbeeld
Openingsuren gemeentehuis stad X
Dag
Voormiddag
Namiddag
Maandag
8u-12u
14u-18u
Dinsdag
8u-12u
Gesloten
Woensdag
8u-12u
14-20u
Donderdag
Gesloten
14u-18u
Vrijdag
8u-12u
Gesloten
2.3.2. Complexe gegevenstabellen 2.3.2.1 Toegankelijk alternatief is beschikbaar Een complexe datatabel heeft minstens twee sets rij- of kolomhoofdingen. Het is technisch mogelijk deze tabellen toegankelijk te maken, maar dat is enkel verplicht voor het Pluslabel. Screenreaders ondersteunen geavanceerde toegankelijkheidstags nog onvoldoende. Voorzie een toegankelijk alternatief voor deze tabellen. Hiervoor kan u alle beschikbare HTML-tags gebruiken.
Voorbeeld Dit is een voorbeeld van een complexe datatabel:
Van deze complexe datatabel kunt u twee eenvoudige datatabellen maken door de tabel te splitsen. Kiest u hier niet voor dan is een alternatief nodig voor deze tabel.
Gesplitste tabel
Openingsuren gemeentehuis
Dag
Voormiddag
Namiddag
Maandag
8u-12u
Gesloten
Openingsuren OCMW
Dag
Voormiddag
Namiddag
Maandag
Gesloten
14u-18u
2.4. Video en geluid 2.4.1 Gesproken tekst is als HTML beschikbaar AnySurfer richtlijnen Basislabel versie 1.0 | www.anysurfer.be | 01-07-2006
23
De inhoud van audio- en videofragmenten moet ook als tekst beschikbaar zijn. Mensen die het geluid niet horen of de video niet zien, krijgen zo toegang tot dezelfde informatie. •
Voor een geluidsbestand volstaat een letterlijke weergave van wat gezegd wordt.
•
Voor een videofragment beschrijft u ook kort wat er te zien is. In geval van een webcam beschrijft u in enkele zinnen waar de camera is opgesteld en wat hij in beeld brengt.
Tekstalternatieven kunt u op een aparte pagina plaatsen of op de pagina waar de link naar het fragment staat.
2.4.2 Video en geluid starten niet automatisch Zorg ervoor dat achtergrondgeluiden en -muziek niet automatisch starten na het inladen van een pagina. U kunt wel een knop of link voorzien om het geluid in te schakelen; bezoekers kunnen zo zelf beslissen of ze achtergrondmuziek willen of niet.
Problematisch voor screenreadergebruikers Achtergrondgeluid op internet is erg storend voor gebruikers van screenreaders. De stem van de spraakbrowser raakt al gauw overstemd door het geluid dat de site voortbrengt. Omdat beide geluidsbronnen door dezelfde luidsprekers klinken, is het niet mogelijk om een van beide bronnen te dempen. Screenreadergebruikers raken hierdoor uit concentratie of gedesoriënteerd. Als de kunstmatige stem onverstaanbaar is, is het bovendien onmogelijk om de Stop-knop te localiseren.
Vervelend voor anderen Doven en mensen die om een andere reden het geluid niet kunnen horen (lawaaierige ruimte, uitgeschakelde luidsprekers), zijn zich niet bewust van het geluid dat een website voortbrengt en missen daardoor mogelijk een deel van de gebruikservaring. Een zichtbare knop om het geluid in te schakelen, is daarom voor iedereen gewenst.
Meer lezen •
How to Convince a Client their Site Doesn't Need Music
2.4.3 Bedieningsknoppen zijn toegankelijk Zorg ervoor dat de knoppen om een video- of geluidsfragment te starten, te pauzeren en te stoppen bereikbaar zijn met het toetsenbord. Screenreaders moeten de opschriften van knoppen ook kunnen interpreteren. Voor de meeste ingebedde media (in de formaten Windows Media, QuickTime en RealMedia) hoeft u daar niets speciaals voor te doen, maar audio- videospelers die op Flash zijn gebaseerd, vormen wel een probleem.
2.5. Downloadbare documenten 2.5.1 PDF is vlot leesbaar na tekstconversie
Zelf testen Voor websites met het basislabel is de basistoegankelijkheid van PDF-bestanden voldoende. Dat betekent: als een eenvoudige tekstconversie van PDF-bestanden een leesbaar en logisch resultaat oplevert, is dat voldoende.
Zelf testen •
Open het PDF-bestand in Adobe Reader 7.0 of hoger
•
Kies Bestand > Opslaan als tekstbestand
•
Open het tekstbestand in Kladblok of een andere teksteditor en ga na of alle informatie uit het PDF-bestand aanwezig is en in de juiste volgorde staat.
Meer lezen •
Handleiding PDF-documenten lezen met vergroting of een screenreader
2.5.2 Office-document is naar tekst omzetbaar U krijgt een goed idee van de toegankelijkheid van Office-documenten door ze als ruwe tekst (.txt) op te slaan en te controleren of de inhoud volledig is en in de juiste volgorde staat. Het is bijvoorbeeld bekend dat tekst in tekstvakken (Word en PowerPoint) niet toegankelijk gemaakt kan worden. Access- en Publisher-bestanden zijn doorgaans helemaal ontoegankelijk. Voor ontoegankelijke documenten moet u een toegankelijk alternatief voorzien in HTML.
Meer lezen •
Handleiding over de toegankelijkheid van elektronische documenten
2.6 Taal 2.6.1 Basistaal van elke pagina is aangegeven In de HTML tag van elke webpagina geeft u met een lang-attribuut aan in welke taal de inhoud is geschreven. Dit zijn de meest voorkomende landcodes:
Dit is in het Nederlands
Ceci est en français
This is in English
Dieses ist auf Deutsch
Gebruikt u XHTML 1.0 (Strict of Transitional), dan voegt u hier nog xml:lang=”...” aan toe. Het aangeven van de basistaal van een webpagina is belangrijk voor wie een spraaksynthesizer gebruikt. Deze software herkent de inhoud van het lang-attribuut en leest de tekst dan met de juiste stem en uitspraakregels voor. Een Franse tekst die met Nederlandse uitspraakregels wordt voorgelezen, is bijvoorbeeld onverstaanbaar.
2.6.2 Taalwijzigingen op de homepage zijn aangegeven Het is niet alleen noodzakelijk om de basistaal van iedere webpagina aan te geven, ook taalwijzigingen op de pagina’s zelf moet u aankondigen. Hiervoor voegt u een lang-attribuut toe aan om het even welke tag die de tekst omspant. Is er niet zo’n tag, dan gebruikt u een SPAN element. Voor het basislabel volstaat het om taalwijzigingen aan te geven op de homepage en in de sjablonen (het raamwerk dat op iedere pagina gelijk is en waarbinnen de inhoud geplaatst is).
Voorbeelden <span lang=”en”>All rights reserved
Meer lezen •
Taalwisselingen (artikel van accessibility;nl)
•
Specifying the language of content 1.0 (Authoring Techniques for XHTML & HTML Internationalization
3 Vormgeving 3.1 Tekstopmaak 3.1.1 Tekengrootte is eenvoudig te wijzigen Slechtzienden, ouderen en mensen die met een hoge schermresolutie werken, vinden de standaardgrootte van tekst op webpagina’s vaak te klein. De meest voor de hand liggende manier om aan dit ijkpunt te voldoen, is om de tekengrootte relatief te maken in de CSS-code. Zo kunnen gebruikers van alle browsers de tekengrootte eenvoudig aanpassen met de opties die hun browser hiervoor biedt.
Niet goed font-size: 10px; // Pixels font-size: 12pt; // Punten
Voor gebruikers van Firefox, Opera of Safari maakt het in principe niet uit welke eenheid u gebruikt. Microsoft Internet Explorer is de enige spelbreker: deze populaire browser vergrendelt de tekengrootte als die in absolute eenheden gespecifieerd is.
Alternatieve oplossing In sommige gevallen kan de omschakeling naar relatieve eenheden het uiterlijk van bestaande webpagina’s aantasten of onvoorspelbaar maken. Daarom is het ook toegestaan om een zogenaamde Stylesheet switcher toe te voegen. Zo’n Stylesheet switcher bevat een of meerdere links waarmee bezoekers de hele website met één muisklik in een ander kleedje kunnen steken. Meer hierover vindt u bij het ijkpunt Geen overlapping bij een vergroting tot 150%.
3.1.2 Letters zijn niet gescheiden door spaties of andere tekens Als letters gescheiden zijn door spaties, dan zullen spraakbrowsers de tekst niet voorlezen, maar spellen. Meestal is dat niet de bedoeling. Wilt u woorden laten opvallen door de letterafstand te vergroten, dan moet u daar CSS voor gebruiken. Met CSS kunt u de letterafstand bovendien nauwkeuriger bepalen.
3.1.3 Links zijn zichtbaar te onderscheiden Het volstaat niet om hyperlinks aan te duiden met een afwijkende tekstkleur. Wie kleurenblind is of een monochroom beeldscherm gebruikt, moet links ook kunnen herkennen op basis van een ander tekstkenmerk. Onderstreping is hiervoor het best geschikt. Het is niet noodzakelijk om voor actieve of bezochte hyperlinks een ander tekstkenmerk te gebruiken. Noot: voor het pluslabel geldt een strengere versie van dit ijkpunt. Meer lezen •
Design Guidelines for Visualizing Links (Jakob Nielsen’s Alertbox)
3.2 Paginaopmaak 3.2.1 Cascading Style Sheets 3.2.1.1 Geen overlappingen bij een vergroting tot 150% Zorg ervoor dat geen overlappingen ontstaan die de leesbaarheid verminderen als bezoekers de tekengrootte aanpassen met behulp van de ingebouwde voorzieningen van moderne browsers. Weergaveproblemen treden het vaakst op als u paginadelen positioneert met behulp van CSS en u pixels gebruikt om de positie, de breedte en hoogte ervan te bepalen.
Voorbeeldsituaties •
De lijnhoogte van tekst is uitgedrukt in pixels, maar voor de tekengrootte is een relatieve eenheid (zoals em’s of percentages) gebruikt. Tekstregels zullen in elkaar vloeien bij vergroting.
•
De breedte en hoogte van paginaonderdelen is uitgedrukt in pixels en/of ze zijn absoluut gepositioneerd. Bij vergroting zullen de randen van tekstdelen elkaar raken en uiteindelijk overlappen.
•
De afmetingen van achtergrondafbeeldingen zijn afgestemd op de standaardgrootte van de tekst die erop geplaatst is. Bij vergroting zal de tekst de achtergrondafbeelding mogelijk niet meer helemaal bedekken. Als de tekstkleur bovendien onvoldoende contrasteert met de achtergrond (wit op wit, bijvoorbeeld), dan zullen tekstdelen onleesbaar worden.
De meeste van deze problemen kunt u verhelpen door de breedte en hoogte van paginadelen in een relatieve eenheden uit te drukken (zoals percentages of em’s) en/of door vloeiende of elastische paginalay-outs te gebruiken. Sommige problemen kunt u oplossen door achtergrondafbeeldingen automatisch te laten herhalen of een solide achtergrondkleur te kiezen voor bepaalde paginadelen.
Zelf controleren Een eenvoudige manier om zelf te controleren of tekst goed leesbaar blijft, is om de optie Beeld > Tekengrootte > Extra groot te kiezen in Internet Explorer. Firefox heeft geen instellingen als Klein, Groter en Grootst. Als u dit ijkpunt in Firefox wil controleren, zorg er dan eerst voor dat de tekst in de standaardgrootte is weergegeven (CTRL+0). Vergroot de tekst vervolgens met twee stappen (tweemaal CTRL+). U zult merken dat overlappingen toch zullen optreden als u de tekstgrootte nog opvoert. Dat is onvermijdelijk. Bezoekers die een vergrotingsfactor van meer dan 150% nodig hebben om de tekst te kunnen lezen, gebruiken beter een programma dat de inhoud van het hele beeldscherm kan vergroten
— inclusief knoppenbalken, cursors en andere onderdelen van het besturingssysteem. Daar hoeven webdesigners zelf niets extra voor te doen.
Alternatieve oplossing In sommige gevallen kan het gebruik van relatieve eenheden en/of een vloeibaar of elastisch ontwerp het uiterlijk van webpagina’s aantasten of onvoorspelbaar maken. Daarom is het ook toegestaan om een zogenaamde Stylesheet switcher te voorzien. Zo’n Stylesheet switcher bevat een of meerdere links waarmee bezoekers de hele website met één muisklik in een ander kleedje kunnen steken. Als u voor een Stylesheet switcher kiest: •
Plaats de link(s) duidelijk zichtbaar bovenaan op iedere pagina, nog voor het eerste navigatieniveau.
•
Geef iedere link een duidelijke naam, zoals ‘Grote tekst’ of ‘Extra kleine tekst’.
•
Zorg ervoor dat de gekozen instelling bewaard blijft doorheen het bezoek aan de website. Hiervoor kunt u een cookie gebruiken.
•
Zorg ervoor dat geen overlappingen ontstaan bij tekstvergroting als een van de alternatieve stylesheets actief is.
3.2.1.2 Broncode is logisch opgebouwd Als paginaonderdelen met behulp van CSS gepositioneerd zijn, kan de volgorde in de broncode sterk afwijken van de visuele structuur. Niet alle browsers en hulpprogramma’s hebben ondersteuning voor CSS. Zorg er daarom voor dat de verschillende navigatieniveaus en andere pagina-elementen logisch gegroepeerd zijn in de HTML-code. Merk op dat het niet noodzakelijk is om de navigatie onderaan te plaatsen.
3.2.2 Opmaaktabellen 3.2.2.1 Pagina blijft overzichtelijk na linearisatie Wat zijn opmaaktabellen? De elementen table, tr en td zijn in principe bedoeld voor de tabulaire uitlijning van gegevens waarbij hoofdingen de inhoud van rijen en kolommen aangeven. Sommige webdesigners gebruiken dezelfde HTML-tags ook om een (onzichtbaar) raster te maken waarop ze paginaonderdelen nauwkeurig kunnen positioneren. Zulke tabellen noemt AnySurfer opmaaktabellen. Het gebruik ervan is toegestaan op websites met het AnySurferlabel, maar wordt niet aangemoedigd. Op websites met het Pluslabel mogen opmaaktabellen niet voorkomen.
Wat is linearisatie? Denkt u even alle HTML-tabellen weg. Browsers en hulpprogramma’s die geen tabellen kunnen weergeven, plaatsen de inhoud van iedere cel op een nieuwe regel (of lezen ze achtereenvolgens voor). De volgorde van die regels stemt precies overeen met de volgorde van de cellen (th en td) in de broncode van de pagina.
Zelf testen Met de Web Developer Extension voor Firefox (en sommige andere browsers) kunt u snel controleren of
een webpagina in lineaire vorm logisch en samenhangend is. •
Schakel CSS tijdelijk uit met Beeld > Paginastijl > Geen stijl.
•
Kies Extra > Web Developer > Miscellaneous > Linearize page.
Nu kunt u nagaan of de verschillende navigatieniveaus en andere pagina-elementen elkaar logisch opvolgen in de HTML-code. Die volgorde hoeft overigens niet per se overeen te komen met de visuele weergave; zo mag u gerust ook alle navigatieniveaus onderaan de HTML-code groeperen.
Problemen kunt u op twee manieren verhelpen: •
Pas de tabelstructuur aan of overweeg om CSS te gebruiken om de paginalay-out te bepalen. CSS biedt meer flexibiliteit.
•
Voeg skip-links in of pas de tab-volgorde van hyperlinks aan met behulp van het tabindex attribuut.
3.2.3 Frames 3.2.3.1 Pagina bevat hoogstens 5 frames Zorg ervoor dat pagina’s samengesteld zijn uit niet meer dan vijf frames. Lege en verborgen frames inbegrepen. Sommige browsers en hulpprogramma’s voor blinden kunnen slechts de inhoud van één frame tegelijk weergeven. Bezoekers vinden het schakelen tussen veel frames tijdrovend en verwarrend.
3.2.3.2 Frames hebben beschrijvende naam en titel Hulpprogramma’s voor blinden kunnen niet alle frames in een frameset tegelijk weergeven. In plaats daarvan stellen ze een keuzelijst samen met links naar de afzonderlijke frames. Om de bruikbaarheid van die lijst te garanderen, moet u elk frame een betekenisvol name- en titleattribuut geven. Beide zijn noodzakelijk omwille van interpretatieverschillen door verschillende hulpprogramma’s. De inhoud van deze attributen mag identiek zijn.
Voorbeeld (niet goed)
Voorbeeld (goed)
3.2.3.3 Frames zijn schaalbaar en of hebben schuifbalken AnySurfer richtlijnen Basislabel versie 1.0 | www.anysurfer.be | 01-07-2006
31
Bezoekers die tekst in een frame willen vergroten, moeten het frame ook breder of hoger kunnen maken opdat de tekst erin zou passen. •
Het attribuut noresize=”noresize” gebruikt u liever niet.
•
Als u dat toch doet, dan mag dat uitsluitend in combinatie met het attribuut scrolling=”auto”. Deze code zorgt ervoor dat horizontale of verticale schuifbalken verschijnen als de inhoud niet meer in het frame past.
Als u geen van deze attributen specificeert, is er geen probleem. Programma’s om webpagina’s op een visuele manier te ontwerpen, doen dat echter vaak automatisch. Bekijk daarom steeds aandachtig de broncode die zulke programma’s voor u genereren en verbeter waar nodig.
3.2.3.4 Links naar andere websites openen browservullend Als u vanuit een frame een link naar een andere website maakt, dan moet u voorkomen dat die website in hetzelfde frame geopend wordt. Nieuwe websites moeten steeds het volledige browservenster beslaan en buiten de frameset om worden geopend. Hiervoor gebruikt u het attribuut target=”_top”.
3.2.3.5 Lijst met links naar afzonderlijke pagina’s is beschikbaar Oude browsers, tekstbrowsers en sommige zakcomputers kunnen niet overweg met frames. Met behulp van NOFRAMES kunt u gebruikers van zulke browsers toch op weg helpen door een lijst met beschrijvende links naar de afzonderlijke frames aan te bieden. Die lijst is onzichtbaar in browsers die wel frames ondersteunen.
Voorbeeld Niet goed <noframes>
Oh-oh! Uw browser ondersteunt geen frames. Download een nieuwere browser.
Goed <noframes>
Uw browser ondersteunt geen frames. U kan de pagina’s wel afzonderlijk bekijken:
3.3.1 Beweging start uitsluitend op verzoek Het is niet toegestaan om een animatie te starten zonder dat de gebruiker hiervoor toestemming gegeven heeft. Voorzie onder, boven of naast iedere animatie een link of knop om te animatie te starten.
Toegestane uitzondering Een uitzondering op dit ijkpunt is toegestaan voor animaties die afkomstig zijn van adverteerders.
3.3.2 Beweging kan stopgezet worden Voorzie onder, boven of naast iedere animatie een link of knop om te pauzeren en/of te stoppen.
Toegestane uitzondering Een uitzondering op dit ijkpunt is toegestaan voor animaties die afkomstig zijn van adverteerders.
3.3.3 Tekst en afbeeldingen knipperen niet Knipperende tekst en afbeeldingen leiden de aandacht af voor bezoekers met dyslexie en andere bezoekers met concentratieproblemen. Daarnaast bemoeilijkt het knipperen de leesbaarheid voor slechtzienden.
Voorbeeld (niet goed)
Bel ons voor een offerte!
3.4 Kleur 3.4.1 Inhoud is begrijpelijk voor wie geen kleuren kan onderscheiden Zorg ervoor dat u niet enkel kleuren gebruikt om essentiële informatie over te brengen. Kleuren worden meestal decoratief gebruikt, maar soms vervullen ze ook een communicatieve functie of zijn ze essentieel om de inhoud van een webpagina te begrijpen. Dit ijkpunt gaat over kleuren die informatie overbrengen. Opmerking: hoewel decoratief kleurgebruik geen invloed heeft op de begrijpbaarheid van de inhoud, kan het in sommige gevallen wel de leesbaarheid verminderen. Raadpleeg hiervoor het ijkpunt Kleurcontrast tussen voor- en achtergrond is voldoende.
Voorbeeld Hieronder ziet u een fragment uit de (vroegere) tabel met vertrektijden op de website van de Brusselse Luchthaven. Opgestegen vliegtuigen zijn aangeduid met een groen blokje. Vertraagde vluchten herkent u aan de rode blokjes.
Eén op acht mannen is kleurenblind en rood-groenkleurenblindheid komt het vaakst voor. Wie geen kleuren kan onderscheiden (of blind is), heeft niet voldoende aan de gekleurde blokjes om de vluchtinformatie te begrijpen. De webmaster heeft de tabel als volgt aangepast:
Wat veranderd is: * De rode en groene blokjes zijn balkjes geworden met het opschrift ‘Opgestegen’ of ‘Vertraagd’. * Alt-attributen (alt=”Opgestegen” of alt=”Vertraagd”) zijn aan ieder balkje toegevoegd zodat ook blinden (die ook de grafische opschriften niet kunnen lezen) de status kunnen aflezen.
Andere voorbeelden * Om aan te geven dat een verzonden webformulier fouten bevat, volstaat het niet om velden rood te markeren. U moet ook tekstueel aangeven welke velden niet of foutief ingevuld werden. * In afvalkalenders op gemeentelijke websites wordt het onderscheid tussen restafval, PMD, papier en glas vaak met kleuren aangeduid. Ook hier volstaat het niet om een kleurlegende te gebruiken. Het gebruik van afkortingen of pictogrammen (met bijbehorende alt-attributen) kan dit toegankelijkheidsprobleem oplossen.
3.4.2 Kleurcontrast is voldoende Zorg ervoor dat de kleur van informatieve paginaonderdelen (zoals tekst en schema’s) voldoende contrasteert met de achtergrond. Vermijd daarnaast de kleurencombinaties rood/groen, zwart/rood, wit/ geel, en groen/blauw. Als u twijfelt over kleurcontrasten, kunt u de gratis Colour Contrast Analyzer gebruiken. Met behulp van een pipet kan u een voor – en een achtergrondkleur op het scherm aanduiden. Het opgeleverde contrastratio moet minstens 5:1 zijn voor standaard tekst. Voor grote tekst (18 punten normaal of 14 bold) is een contrastratio van 3:1 voldoende. Sommige webdesigners vinden ook de gratis Photoshop plug-in VisCheck de moeite waard.
4 Interactiviteit 4.1 Formulieren 4.1.1 Labels en formuliervelden zijn verbonden Formulieren op internet bestaan enerzijds uit formuliervelden (zoals invoervelden, keuzerondjes, aankruisvakjes en keuzelijsten) en anderzijds uit instructies of labels, die informatie geven bij een formulierveld. Het volstaat niet om labels in de buurt van een veld te plaatsen; ze moeten ook expliciet verbonden zijn met behulp van het label-element. Voeg aan elk formulierelement een id toe met een unieke waarde. Deze waarde herhaalt u in het forattribuut van het label-element. Plaats het label-element rond de instructietekst die bij het formulierveld hoort. Het is hierbij onbelangrijk of het formulierelement en de instructietekst in verschillende tabelcellen of div’s zijn geplaatst.
Voorbeeldcode
Voordelen Labels zijn in de eerste plaats een belangrijke hulp voor screenreadergebruikers. Deze software kan niet zelf inschatten welke instructie bij welk formulierveld hoort. Dankzij de label/for-constructie kan de juiste instructie voorgelezen worden als de cursor op een formulierveld terechtkomt. Het gebruik van labels heeft ook voordelen voor muisgebruikers: om een checkbox of radiobutton aan te vinken of om de cursorfocus te verplaatsen naar een tekstveld of combobox, volstaat het om op de labeltekst te klikken. Vooral mensen met een motorische beperking maken hier dankbaar gebruik van.
Opmerking Er is nog een tweede techniek om het label-element te gebruiken, maar deze heeft niet dezelfde voordelen en daarom staan we het gebruik niet toe.
Deze methode lijkt eenvoudiger, maar kunt u enkel gebruiken als het formulierveld en het label niet door andere tags zijn gescheiden. Bovendien is de ondersteuning in screenreaders minder goed en valt het effect van de aanklikbare labeltekst weg in Internet Explorer.
4.1.2 Verplichte velden zijn binnen het label aangekondigd Als u wilt aangeven welke velden bezoekers verplicht moeten invullen, kunt u het woord ‘verplicht’ of een asterisk (*) toevoegen aan de instructietekst. Zorg ervoor dat deze aanduiding binnen het label element is geplaatst. Enkel zo kan een screenreader in formuliermodus aangeven welke velden verplicht zijn.
Voorbeeld Niet goed (*)
Goed
Tip Als u de aanduiding ‘verplicht’ of ‘(*)’ rechts van het invoerveld wil uitlijnen, dan kan dat met CSS. Hiervoor omsluit u het stukje tekst met een span element.
4.1.3 Tabvolgorde stemt overeen met de zichtbare structuur Door gebruik van CSS en tabellen kan de plaats van labels, formuliervelden en knoppen worden beïnvloed. Als de volgorde in de broncode niet overeenstemt met de bedoelde, logische volgorde, dan kunt u met het tabindex attribuut bepalen in welke volgorde formuliervelden focus krijgen.
Voorbeeld (goed)
Meer lezen •
Tabvolgorde in formulieren, enkele regelmatig voorkomende fouten (link naar een technisch artikel in de sectie publicaties van deze website)
4.1.4 Knoppen hebben informatieve opschriften Het opschrift van knoppen moet de functie verduidelijken. Goede voorbeelden zijn Verzenden, Wissen of Zoeken. Opschriften als Klik hier zijn niet goed omdat ze enkel het middel (klikken) aangeven, maar niet het doel.
Voorbeelden Niet goed “ />
Goed
4.2 Javascript 4.2.1 Gebruik botst niet met overige ijkpunten Aan het gebruik van JavaScript is slechs een belangrijke voorwaarde verbonden: de toegevoegde functies en gedragingen mogen de conformiteit met andere ijkpunten niet in het gedrang brengen. Hetzelfde geldt voor wijzigingen in het Document Object Model die met behulp van JavaScript zijn gemaakt. Hieruit afgeleid: voor websites met het basislabel hoeft de foutloze en volledige werking van de website niet gegarandeerd te zijn als JavaScript uitgeschakeld of niet beschikbaar is. Moderne hulpprogramma’s voor internetgebruikers met een beperking bieden vandaag immers ook ondersteuning voor JavaScript.
Voorbeelden Een script dat de kleur van een hyperlink verandert als de muis erover beweegt, is geen probleem. Als er onmouseover extra informatie of een subnavigatie verschijnt, moet er wel voor een alternatief gezorgd worden. Ijkpunten die extra aandacht vereisen als u JavaScript gebruikt, zijn: •
Website is bruikbaar zonder muis
4.2.2 Dynamische updates kunnen aangekondigd worden Voorzie een mechanisme waardoor betekenisvolle wijzigingen in het Document Object Model aangekondigd kunnen worden voor gebruikers van screenreaders en voor mensen die nog niet vertrouwd zijn met deze vorm van dynamische updates. Slechtzienden die een hoge vergrotingsfactor gebruiken, zullen de dynamische update niet zien als die elders op het scherm gebeurt. Met name in zogenaamde Ajax-toepassingen komen wijzigingen in het DOM veelvuldig voor.
Ajax en screenreaders Het bijzondere aan Ajax-toepassingen is dat de pagina niet opnieuw ingeladen hoeft te worden om wijzingen te kunnen tonen, zelfs niet als hiervoor gegevens van de server gehaald moeten worden. Een vervelend gevolg hiervan is dat een screenreader de websitebezoeker niet attent kan maken op zulke real-timewijzigingen. De meeste screenreaders kunnen immers nog niet overweg met die nieuwerwetse van surfen. Voorlopig moeten websitemakers dus zelf een handje helpen.
Meer lezen •
AJAX en toegankelijkheid (accessibility.nl)
•
AJAX and Screenreaders: When Can it Work? (James Edwards)
•
Is AJAX accessible (Joe Clark)
•
Making AJAX work with screenreaders
4.2.3 Website is ook zonder JavaScript bruikbaar Websites met het pluslabel moeten bruikbaar zijn als JavaScript uitstaat of niet beschikbaar is. Uiteraard moet ook alle inhoud bereikbaar zijn. Vertrouw daarom niet uitsluitend op JavaScript om nieuwe vensters, pop-up’s of navigatieniveaus te openen of om formulieren te verzenden. Inhoud en functionaliteit moeten gelijkwaardig zijn, maar hoeven niet even flitsend te zijn. Snufjes en effecten die uitsluitend bedoeld zijn om de gebruikservaring te verbeteren of de inhoud visueel aantrekkelijker te maken, mag u gerust voorbehouden aan bezoekers die met Javascript aan surfen. Om de website bruikbaar te maken voor bezoekers die geen gebruik (kunnen) maken van JavaScript, kunt u het principe van Graceful Degradation toepassen.
4.3 Flash en Java 4.3.1 Alternatieven in HTML zijn beschikbaar Voor ieder betekenisvol Flash-, Java- of ander ingebed object moet een toegankelijk alternatief in HTML beschikbaar zijn. Objecten die louter decoratief gebruikt zijn, hebben geen alternatief nodig. •
Zorg ervoor dat alle teksten en hyperlinks die deel uitmaken van het object, ook in het HTMLalternatief voorkomen.
•
Als het object een grafiek, schema of plan bevat, moet u het woordelijk en/of met behulp van de meest geschikte HTML-tags beschrijven.
Het HTML-alternatief (of de link ernaartoe) plaatst u op een zichtbare plaats, net boven of onder het object. Uitgebreide beschrijvingen komen beter tot hun recht op een afzonderlijke pagina.
Flash en Java toegankelijk maken? Hoewel het theoretisch mogelijk is om Flash- en Java-objecten te bouwen die voldoen aan internationale toegankelijkheidsstandaarden, is een alternatief vandaag nog steeds verplicht. Hulpprogramma’s voor internetters met een handicap zijn nog lang niet zo geperfectioneerd dat ze de inhoud van ‘toegankelijke’ Flash- en Java-objecten vlot toegankelijk kunnen maken.
Brochure webtoegankelijkheid (2,3 MB) Beluister het interview met meneer X (MP3, +-5 MB)
<span lang=”en”>All rights reserved