1 navigatie 1.1 Algemeen 1.1.1 Website is bruikbaar zonder muis ‑6 1.1.2 Inhoudsopgave voor lange pagina ‑7 1.1.3 Mogelijkheid om de navigatie over te slaan ‑7 1.1.4 Beperkt aantal links per pagina ‑8
1.2 Hyperlinks 1.2.1 Linkteksten zijn betekenisvol ‑8 1.2.2 Klikgebied is groot genoeg ‑9 1.2.3 Bestandstype is aangegeven bij downloads ‑10 1.2.4 Linkteksten zijn beknopt ‑10 1.2.5 Links zijn uniek ‑10
1.3 Pop-up’s en nieuwe vensters 1.3.1 Pop-ups zijn schaalbaar ‑11 1.3.2 Pop-up’s zijn aangekondigd ‑11 1.3.3 Nieuwe vensters zijn aangekondigd ‑12
2 Inhoud 2.1 Tekst 2.1.1 Pagina heeft een betekenisvolle titel ‑14 2.1.2 Hypertekst is semantisch gestructureerd (strenger) ‑14
2.2 Afbeeldingen 2.2.1 Foto’s en illustraties 2.2.1.1 Alt-tekst beschrijft de afbeelding ‑16
2.2.2 Grafische tekst 2.2.2.1 Grafische tekst is niet gebruikt ‑16 2.2.3 Complexe afbeeldingen 2.2.3.1 Alt-tekst biedt beknopte omschrijving ‑17 2.2.3.2 Afbeelding is elders tekstueel beschreven ‑17 2.2.4 Decoratieve afbeeldingen 2.2.4.1 Alt-tekst is leeg ‑18 2.2.4.2 Achtergrond is louter decoratief ‑18
2.3.1.1 Tabel is bruikbaar na linearisatie ‑19 2.3.1.2 Tabelhoofdingen zijn goed geplaatst ‑21 2.3.1.3 Tabelhoofdingen zijn juist gemarkeerd (TH) ‑23 2.3.1.4 Bijschrift is juist gemarkeerd (CAPTION) ‑24 2.3.2. Complexe gegevenstabellen 2.3.2.1 Toegankelijk alternatief is beschikbaar ‑24 2.3.2.2 Toegankelijkheidsattributen zijn gebruikt ‑25
2.4. Video en geluid 2.4.1 Gesproken tekst is als HTML beschikbaar ‑26 2.4.2 Video en geluid starten niet automatisch ‑26 2.4.3 Bedieningsknoppen zijn toegankelijk ‑26 2.4.4 Video is ondertiteld ‑27
2.5. Downloadbare documenten 2.5.1 Office-document is naar tekst omzetbaar ‑27 2.5.2 Office-document heeft een alternatief ‑27
2.6 Taal 2.6.1 Basistaal van elke pagina is aangegeven ‑27 2.6.2 Alle belangrijke taalwijzigingen zijn aangegeven ‑28
3 Vormgeving 3.1 Tekstopmaak 3.1.1 Tekengrootte is eenvoudig te wijzigen ‑33 3.1.2 Letters zijn niet gescheiden door spaties of andere tekens ‑33 3.1.3 Links zijn onderstreept; overige tekst niet ‑34 3.1.4 In lopende tekst bedraagt het verschil in tekstgrootte maximaal 150% ‑34 3.1.5 Alle tekstkenmerken zijn in CSS gedefinieerd ‑34 3.1.6 Lijnen, opsommingstekens en pijlen bevatten geen ASCII-tekens ‑34
3.2 Paginaopmaak 3.2.1 Cascading Style Sheets 3.2.1.1 Geen overlappingen bij een vergroting tot 150% ‑35 3.2.1.2 Broncode is logisch opgebouwd ‑36 3.2.1.3 Opbouw pagina’s is uitsluitend CSS-gestuurd ‑36 3.2.2 Opmaaktabellen 3.2.2.1 Opmaaktabellen zijn niet gebruikt ‑36 3.2.3 Frames 3.2.3.1 Frames zijn niet gebruikt ‑36
3.3 Beweging 3.3.1 Beweging start uitsluitend op verzoek ‑37
3.3.2 Beweging kan stopgezet worden ‑37 3.3.3 Tekst en afbeeldingen knipperen niet ‑37 3.3.4 Tekst verschuift niet automatisch ‑37
3.4 Kleur 3.4.1 Inhoud is begrijpelijk voor wie geen kleuren kan onderscheiden ‑37 3.4.2 Kleurcontrast is voldoende ‑38
4 Interactiviteit 4.1 Formulieren 4.1.1 Labels en formuliervelden zijn verbonden ‑40 4.1.2 Verplichte velden zijn binnen het label aangekondigd ‑41 4.1.3 Tabvolgorde stemt overeen met de zichtbare structuur ‑41 4.1.4 Knoppen hebben informatieve opschriften ‑42 4.1.5 Uitgebreide formulieren zijn logisch ingedeeld ‑42 4.1.6 Tooltips bij invoervelden zijn gelijkwaardig aan labels ‑42
4.2 Javascript 4.2.1 Gebruik botst niet met overige ijkpunten ‑43 4.2.2 Dynamische updates kunnen aangekondigd worden ‑43 4.2.3 Website is ook zonder JavaScript bruikbaar ‑44
4.3 Flash en Java 4.3.1 Alternatieven in HTML zijn beschikbaar ‑44 4.3.2 Flash of Java is niet gebruikt voor de navigatie ‑45
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 Pluslabel 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 Pluslabel. 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.1.2 Inhoudsopgave voor lange pagina Voorzie een inhoudsopgave op pagina’s met vijf of meer tussenkoppen. Zo krijgen bezoekers een overzicht van de informatie en kunnen ze snel naar een onderdeel springen of onderdelen overslaan. Voorzie ook een of meerdere hyperlinks terug naar de inhoudsopgave of naar de bovenkant van de pagina. Die hyperlinks kunt u desgewenst verbergen met behulp van CSS zodat enkel screenreadergebruikers ze opmerken.
1.1.3 Mogelijkheid om de navigatie over te slaan Als er veel navigatielinks zijn, moet een toetsenbordgebruiker vaak op de tabtoets drukken om hyperlinks verderop in de pagina te bereiken. Dit kunt u voorkomen door bovenaan de pagina een skip link toe te voegen. Met behulp van zo’n link kan een bezoeker alle links tot aan een door de auteur gekozen anker in één keer overbruggen. Op websites met het Pluslabel is een skip link verplicht op pagina’s waar de eigenlijke inhoud voorafgegaan wordt door meer dan 20 navigatielinks of waar hoofd- en subnavigatie elkaar niet onmiddellijk opvolgen in de broncode van de pagina.
Wees niet te kwistig met skip links. Meestal volstaat één link per pagina.
1.1.4 Beperkt aantal links per pagina Beperk het aantal hyperlinks op een pagina tot ongeveer vijftig. Zo blijft de pagina overzichtelijk en de structuur van de website begrijpelijk. Dat is met name belangrijk voor screenreadergebruikers.
Toegestane uitzonderingen •
homepagina
•
portaalpagina's
•
sitemap
•
pagina's met een opsomming van hyperlinks of documenten om te downloaden
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.
Klik hier voor informatie over ons congres over webtoegankelijkheid op 30 april.
Deze linkteksten zijn ook niet informatiedragend: •
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 AnySurfer richtlijnen Pluslabel versie 1.0 | www.anysurfer.be | 01-07-2006
9
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.2.4 Linkteksten zijn beknopt Beperk de lengte van linkteksten tot ongeveer tachtig tekens. Zorg er echter in de eerste plaats voor dat de ijkpunten over betekenisvolle linkteksten en het aangeven van het bestandstype goed zijn toegepast. Tachtig tekens is een goede maatstaf omdat dat het maximum aantal tekens is dat een elektronische brailleleesregel tegelijk kan weergeven. Als een linktekst langer is, moet de gebruiker van zo’n apparaat een extra handeling uitvoeren om het vervolg te kunnen lezen. Onthoud ook dat linkteksten niet hoeven te beginnen met ‘ga naar de site van’ of ‘klik hier om’. Hulpprogramma’s voor blinden kondigen hyperlinks zelf aan en visueel moet het ook al duidelijk zijn welke tekst klikbaar is.
1.2.5 Links zijn uniek Combineer vlak na elkaar gelegen links als ze dezelfde bestemming hebben. Dat neemt de verwarring weg voor blinde bezoekers die de links op een pagina overlopen met behulp van de tabtoets of een linklijst. In het ijkpunt Linkteksten zijn betekenisvol leest u hoe blinde internetgebruikers de links op een webpagina overlopen.
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 zijn aangekondigd Kondig nieuwe vensters altijd aan in de linktekst. Gebruik ook steeds dezelfde naam (het targetattribuut). Zo vermijdt u dat verschillende browservensters geopend worden vanaf uw website.
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 (strenger) Dit ijkpunt voor het pluslabel is een verstrenging van hetzelfde ijkpunt voor het basislabel. 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
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 Ons aanbod: 1. Fietsen 2. Auto’s 3. Motorfietsen Ons product heeft drie belangrijke kenmerken: - compact - snel - goedkoop
Goed Ons aanbod:
Fietsen
Auto’s
Motorfietsen
Ons product heeft drie belangrijke kenmerken:
snel
goedkoop
compact
Andere structuurtags •
Voor citaten gebruikt u de BLOCKQUOTE tag.
•
Afkortingen geeft u aan met abbr of acronym. HTML-puristen zijn het er niet over eens welke tag wanneer precies gebruikt moet worden. Screenreaders behandelen beide tags op dezelfde manier, maar over het algemeen is de ondersteuning voor ACRONYM ruimer.
Voorbeeld: OVAM OVAM
Merk op dat ook het gebruik van tags als LABEL, CAPTION en TH (die in andere ijkpunten behandeld worden), binnen dezelfde filosofie vallen.
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 kondigen afbeeldingen zelf aan.
•
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 Grafische tekst is niet gebruikt Hoewel grafische tekst toegankelijker gemaakt kan worden door rekening te houden met de
voorwaarden die gelden voor het basislabel, kunnen deze problemen niet opgelost worden: •
Bezoekers kunnen het lettertype, de dikte en de voor- en achtergrondkleur van grafische tekst niet wijzigen.
•
Als grafische tekst vergroot wordt, neemt de weergavekwaliteit af.
•
Grafische tekst is niet doorzoekbaar en niet te kopiëren.
Omdat het Pluslabel een maximaal gebruiksgemak wil garanderen voor internetbezoekers met een functiebeperking, is grafische tekst niet toegestaan op websites met dit label.
Toegestane uitzondering Image Replacement met behulp van CSS is toegestaan als u rekening houdt met deze voorwaarden: •
Tekst moet leesbaar zijn als Flash of JavaScript niet beschikbaar zijn.
•
(Geen display none)
•
(CSS Switcher)
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;
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.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.
Voorbeeld Bron: site van Dentergem
Sociale Dienst
Sophie Vankeirsbilck
Viaene Wendy
Dujardyn Didier
bereikbaar op:
056 xxxxxx
056 xxxxxx
056 xxxxxx
maandag dinsdag woensdag donderdag vrijdag
9-12u en 16-17u 9-12u en 16-17u
9-12u en 16-18u 9-12uÂ
9-12u en 16-17u 9-12u en 16-17u 9-12u 9-12u en 16-18u 9-12uÂ
15-17u 15-17u 16-17u 16-18u 14.30-16u
Gelineariseerd Tabel met 4 kolommen en 3 rijen Sociale Dienst Sophie Vankeirsbilck Viaene Wendy
Dujardyn Didier bereikbaar op: 056 xxxxxx 056 xxxxxx 056 xxxxxx maandag dinsdag woensdag donderdag vrijdag 9-12u en 16-17u 9-12u en 16-17u 9-12u en 16-18u 9-12u 9-12u en 16-17u 9-12u en 16-17u 9-12u 9-12u en 16-18u 9-12u 15-17u 15-17u 16-17u 16-18u 14.30-16u tabeleinde
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.
2.3.1.4 Bijschrift is juist gemarkeerd (CAPTION) Als de gegevenstabel een bijschrift heeft, gebruik hiervoor dan de caption tag. Bent u niet tevreden met het uitzicht, dan kunt u het bijschrift naar wens vormgeven met CSS.
Voorbeeld
Openingsuren gemeentehuis stad X
Dag
Voormiddag
Namiddag
Maandag
8u-12u
14u-18u
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.3.2.2 Toegankelijkheidsattributen zijn gebruikt Gebruik de toegankelijkheidsattributen headers en id om screenreaders te helpen de tabel correct te interpreteren en naar spraak of braille om te zetten. Dit ijkpunt vult het ijkpunt voor het basislabel aan. Tot zolang de ondersteuning door screenreaders niet beter is, is een alternatief nodig voor elke complexe tabel.
2.4. Video en geluid 2.4.1 Gesproken tekst is als HTML beschikbaar 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.
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.4.4 Video is ondertiteld Ondertitel videofragmenten die gesproken tekst bevatten. Ondertitels moeten gesynchroniseerd zijn met de gesproken tekst. Het is niet nodig om geluidseffecten of muziek te beschrijven.
Toegestane uitzondering Als uw website een uitgebreid archief met videobeelden heeft, ligt het toevoegen van ondertitels niet meteen voor de hand. In dat geval kunt u, in akkoord met onze medewerkers, een uitzondering opnemen in de toegankelijkheidsverklaring die bij uw website hoort.
Meer lezen •
Online captioning
2.5. Downloadbare documenten 2.5.1 Office-document is naar tekst omzetbaar Zelf testen 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.5.2 Office-document heeft een alternatief Omdat de toegankelijkheid van Microsoft Office-documenten niet in alle omstandigheden gegarandeerd is en er geen eensluidende testmethode bestaat om de toegankelijkheid te controleren, zijn ze niet toegestaan op websites met het Pluslabel. Office-bestanden zijn bovendien werkdocumenten die eigenlijk niet thuishoren op een publieke website. Daarnaast hebben niet alle internetgebruikers Word, Excel of PowerPoint op de harde schijf staan.
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 Alle belangrijke taalwijzigingen 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 pluslabel volstaat het niet om de taalwijzigingen in het sjabloon en op de homepage aan te geven: u moet ook de natuurlijke taal van anderstalige hoofdingen, zinnen en citaten aangeven.
Voorbeeld
The power of the Web is in its universality.
U hoeft niet ieder anderstalig woord in een lopende tekst aan te duiden met een lang-attribuut. Dat is niet verplicht omwille van de praktische haalbaarheid en omdat moderne spraaksynthesizers een set uitspraakregels hebben voor een groot aantal courante anderstalige woorden.
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 onderstreept; overige tekst niet Onderstreep alle hyperlinks in lopende tekst. Overige tekst kunt u benadrukken door hem vet te maken. Noot: dit is een verstrengde versie van het ijkpunt voor het basislabel.
Meer lezen •
Design Guidelines for Visualizing Links (Jakob Nielsen’s Alertbox)
3.1.4 In lopende tekst bedraagt het verschil in tekstgrootte maximaal 150% Ernstig slechtziende computergebruikers gebruiken software die de inhoud van het hele scherm tot wel 36 maal kan vergroten. De ideale vergrotingsfactor hangt af van iemands gezichtsscherpte en de werkelijke tekstgrootte. Aanzienlijke grootteverschillen dwingen gebruikers van vergrotingssoftware om de vergrotingsfactor voortdurend bij te stellen, wat het lezen bemoeilijkt. Dit ijkpunt geldt niet voor de grootteverschillen tussen koppen en lopende tekst.
3.1.5 Alle tekstkenmerken zijn in CSS gedefinieerd Om tekst op te maken, mag u geen opmaaktags gebruiken. In plaats daarvan gebruikt u structuurtags die met CSS zijn vormgegeven. Tags als FONT, B en CENTER zijn opmaaktags. H1, P, BLOCKQUOTE en STRONG zijn voorbeelden van structuurtags.
3.1.6 Lijnen, opsommingstekens en pijlen bevatten geen ASCII-tekens Voor bezoekers die de inhoud van een webpagina beluisteren met behulp van een kunstmatige stem, zijn onderstaande reeksen met ASCII-tekens weinigzeggend en neemt het beluisteren vaak veel tijd in beslag. Op websites met het Pluslabel zijn ze daarom niet toegestaan.
Voorbeelden (niet goed) •
Horizontale scheidingslijnen die samengesteld zijn uit een reeks underscores of min-tekens
•
Opsommingstekens die samengesteld zijn met tekens als :, *, of -.
Alternatieven Voor scheidingslijnen gebruikt u HR, voor lijstitems LI en voor grafische pijlen gebruikt u liefst een afbeelding met een passende alt-tekst.
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.1.3 Opbouw pagina’s is uitsluitend CSS-gestuurd Op websites met het Pluslabel mogen geen frames of opmaaktabellen voorkomen. Dit label is immers bedoeld voor sites die naast toegankelijkheid ook de andere webstandaarden respecteren.
Toegestane uitzonderng Voor complexe formulieren of andere pagina’s met moeilijk te positioneren elementen is een opmaaktabel wel toegestaan. AnySurfer zal beoordelen voor welke concrete pagina’s deze uitzondering wordt toegestaan.
3.2.2 Opmaaktabellen 3.2.2.1 Opmaaktabellen zijn niet gebruikt Op websites met het Pluslabel zijn opmaaktabellen niet toegestaan. Het Pluslabel is bedoeld voor sites die een hogere toegankelijkheidsgraad nastreven en hiervoor webstandaarden en moderne ontwerptechnieken hanteren. Een doorgedreven scheiding van inhoud en vormgeving — en dus ook het weren van opmaaktabellen — hoort daarbij. Dit ijkpunt is inhoudelijk identiek aan het ijkpunt Opbouw pagina’s is uitsluitend CSS-gestuurd. Het is enkel toegevoegd om de structuur van de richtlijnenset consistent te houden.
3.2.3 Frames 3.2.3.1 Frames zijn niet gebruikt Op websites met het Pluslabel zijn (inline) frames niet toegestaan.
Frames bemoeilijken de toegankelijkheid, maar ze zijn ook de oorzaak van heel wat gebruiksvriendelijkheidsproblemen. Zo verhinderen ze een vlotte weergave op kleine beeldschermen en zorgen ze voor problemen bij het printen en het maken van bookmarks.
3.3 Beweging 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.3.4 Tekst verschuift niet automatisch Vermijd het gebruik van tekst die horizontaal of verticaal over de pagina beweegt, zoals in lichtkranten of news tickers.
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. AnySurfer richtlijnen Pluslabel versie 1.0 | www.anysurfer.be | 01-07-2006
35
4.
int e r a c t iv it ei t
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.1.5 Uitgebreide formulieren zijn logisch ingedeeld Als een formulier groepen met samenhangende velden bevat, dan moet u die groepen afbakenen met een FIELDSET. Met de LEGEND tag geeft u iedere FIELDSET een duidelijke omschrijving.
4.1.6 Tooltips bij invoervelden zijn gelijkwaardig aan labels De meeste screenreaders hebben een formuliermodus die labels voorleest die gekoppeld zijn aan invoervelden. Tooltips vervangen de functie van labels als zo’n formuliermodus niet beschikbaar is; ze worden voorgelezen of in braille weergegeven als een invoerveld focus krijgt. Tooltips voegt u toe met behulp van het title attribuut. Tooltips zijn ook nuttig voor andere bezoekers: ze verschijnen in de buurt van een invoerveld als je er met de muis over beweegt.
Voorbeeld Als het label ‘Maandelijkse nieuwsbrief’ luidt, dan kan de tooltip ‘Wenst u onze maandelijkse nieuwsbrief te ontvangen?’ bevatten.
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.
Toegankelijk ontwikkelen in Flash (artikel van Naarvoren.nl)
•
Flash en toegankelijkheid (artikel van Accessibility.nl)
•
Creating Accessible Macromedia Flash Content (uitgebreid artikel van Webaim)
4.3.2 Flash of Java is niet gebruikt voor de navigatie Op websites met het Pluslabel is het niet toegestaan om Flash of Java-applets te gebruiken voor de navigatie. Alle navigatielinks moeten in de HTML-code voorkomen. Het basisijkpunt over Flash en Java verplicht sowieso om alternatieven te voorzien. Omdat de navigatie de ruggengraat van een website vormt, is een dubbele ontsluiting en de onvermijdelijke gebruiksvriendelijkheidsproblemen die daarmee samengaan, niet gepast op websites met het Pluslabel.
Meer lezen •
Toegankelijk ontwikkelen in Flash (artikel van Naarvoren.nl)
•
Flash en toegankelijkheid (artikel van Accessibility.nl)
•
Creating Accessible Macromedia Flash Content (uitgerbreid artikel van Webaim)
Brochure webtoegankelijkheid (2,3 MB) Beluister het interview met meneer X (MP3, +-5 MB)
Naar boven
