Navigatie zonder muis

Navigatie zonder muis

• Zorg ervoor dat alle hyperlinks bereikbaar en activeerbaar zijn met het toetsenbord

uitklapmenu: –www.digipolis.be & http://job.monster.be–www.vreg.be

Linkteksten zijn betekenisvol

• Zorg dat linkteksten informatiedragend zijn • Niet: klik hier, meer info, lees verder,

volledig bericht, download, openen etc.• Betekenisvolle linktekst hoeft niet te starten

met ga naar … / link naar … / klik hier om …

• Bij grafische links zit de linktekst in het alt-attribuut

• Klik hierhier en win een auto.

• DownloadDownload het studieprogramma van dit schooljaar in PDF

Linkteksten vermelden gedrag

• Als een hyperlink verwijst naar een downloadbaar bestand, kondig het bestandstype dan aan in de linktekst

• Verwachtingspatroon wordt doorbroken• Als het bestand groter is dan een megabyte,

vermeld dan ook de bestandsgrootte.• Geef ook aan dat een link een pop-upvenster

of een nieuw browserscherm zal openen.

Voorbeelden• <a href="verslag_010606.pdf">Verslag

gemeenteraad 1 juni 2006 (PDF)</a>

• <a href="fragment.mp3">Beluister het interview met meneer X (MP3, +-5 MB)</a>

• Of met een icoon:<a href="toegankelijkheidsbrochure.doc"><img src="icoon_word.png" alt="Word">Brochure webtoegankelijkheid (2,3 MB)</a>

Goede paginatitelsContact - Vlaanderen.beContact - Vlaanderen.beTarieven - Boekhoudkantoor Tarieven - Boekhoudkantoor DevlooDevlooNieuwsarchief | De StandaardNieuwsarchief | De Standaard

... niet zo goed... niet zo goedVlaanderen.beVlaanderen.beUntitled DocumentUntitled DocumentNieuwsarchiefNieuwsarchief

Waarom zijn titels belangrijk?

• Bovenaan in scherm (ook na scrollen)

• Enige informatie bij tabbed browsing

• Eerste informatie in screenreader output (ook na alt+tab)

• Link vanuit zoekmachines

• Tekst bij bookmarks

Klikgebied is groot genoeg

• Zorg ervoor dat icoontjes, knoppen en grafische hyperlinks minstens 15 pixels breed en hoog zijn.

• Voor internetgebruikers met een beperkte motoriek en voor wie een muisraster, een aanwijsstok of een ander invoermiddel gebruikt dat de muis vervangt.

Alt-teksten• Alt-tekst bij elke <img> en <area>

– Afbeelding: beschrijving (eerder van functie dan van uitzicht)

– Grafische link of klikbaar icoon: doel van de link heeft voorrang op de beschrijving

Waarom beschrijven?

• Voorgelezen door screenreader

• Zichtbaar als tooltip (niet in alle browsers)

• Zichtbaar als afbeeldingen ontbreken, traag downloaden of uitgeschakeld zijn

Tips voor beschrijvingen• Hou ze beknopt: start niet met "afbeelding van",

“klik hier voor", “dit is een illustratie van" ...• Vermijd alt="decoratie", alt="foto”, alt=“lijntje”:

kies in die gevallen voor alt=“”• Gebruik geen bestandsnamen • Vergeet niet om de beschrijvingen mee te

vertalen.• Ideale beschrijving bestaat niet.• Foto’s bij nieuwsberichten? Het heeft geen zin

om de alt-tekst identiek te maken aan de titel van het bericht. Dan liever een blanco alt-tekst.

<img src=”...” alt=”Portret Yves Leterme” /><img src=”...” alt=”Portret Yves Leterme” />

<img src=”...” alt=”Atomium (detail)” /><img src=”...” alt=”Atomium (detail)” />

<img src=”...” alt=”Trollenkoning” /><img src=”...” alt=”Trollenkoning” />

<img src=”...” alt=”Pasta en rode wijn” /><img src=”...” alt=”Pasta en rode wijn” />

Grafische tekst• Lettertype, dikte en voor- en achtergrondkleur

van grafische tekst is niet aanpasbaar.• In de meeste browsers niet te vergroten, en als

dat wel kan, neemt de kwaliteit sterk af.• Zorg ervoor dat de tekengrootte minimaal 16

punten bedraagt = 11 pixels = standaardgrootte van niet-opgemaakte browsertekst.

• Gebruik letters met zachte randen ('anti-aliasing') om de leesbaarheid van fijne letters te verbeteren.

Grafische tekst

• Vermijd het gebruik van frivole en kalligrafische lettertypes, cursieve of doorgehaalde tekst en sterk variërende tekstgroottes.

• Een schreefloos lettertype heeft de voorkeur.

• Plaats tekst liever niet op foto's of kleurverlopen.

Alt-tekst is letterlijke weergave

• Herhaal de tekst die grafisch is weergegeven letterlijk in de alt-tekst.

<img src=”..” alt=”Vragen over de vrijmaking van de <img src=”..” alt=”Vragen over de vrijmaking van de electriciteits- en gasmarkt? 0800 120 33” />electriciteits- en gasmarkt? 0800 120 33” />

<img src=”...” alt=”Vlaanderen.be - Uw startpagina voor de Vlaamse overheid” /><img src=”...” alt=”Vlaanderen.be - Uw startpagina voor de Vlaamse overheid” />

<img src=”..” alt=”Een vraagje? Bel gratis 1700” /><img src=”..” alt=”Een vraagje? Bel gratis 1700” />

<img src=”...” alt=”Vergelijk de leveranciers” /><img src=”...” alt=”Vergelijk de leveranciers” />

<img src=”...” alt=”Milieukoopwijzer.be” /><img src=”...” alt=”Milieukoopwijzer.be” />

Grafische toegangscodes• CAPTCHA: Om toegang te krijgen tot site moet

gebruiker een code overtypen uit afbeelding• Voorbeeld:

www.dns.be, www.passport.net, yahoo groups ...• Zo is men zeker dat formulier niet automatisch

ingevuld wordt door software (SPAM)• Probleem: code is steeds anders dus alt-tekst is

niet mogelijk• Alternatief: geluidsbestandje met code,

vb. www.google.com/accounts/NewAccount

Captcha’s

Video en geluid

• Gesproken tekst is als HTML beschikbaar

• Video en geluid starten niet automatisch

Gesproken tekst

• Stel de inhoud van audio- en videofragmenten ook als tekst ter beschikking.

• Mensen die het geluid niet horen of de video niet zien, krijgen zo toegang tot dezelfde informatie.

Video en geluid starten niet automatisch

• Zorg ervoor dat achtergrondgeluiden en -muziek niet automatisch starten.

• Laat de keuze aan de gebruiker en voorzie een knop of link om het geluid in te schakelen.

• Uitzondering: waarschuwingsgeluidjes

Office-bestanden

• Handleiding over de toegankelijkheid van elektronische documenten: www.anysurfer.be/toedoc

Tekengrootte is eenvoudig te wijzigen

• Maak de tekengrootte relatief in de CSS-code. Zo kunnen gebruikers van alle browsers de tekengrootte eenvoudig aanpassen.

• Slechtzienden, ouderen en mensen die met een hoge schermresolutie werken, vinden de standaardgrootte van tekst op webpagina's vaak te klein.– font-size: 1em; (em’s)– font-size: 120%; (percentages)– font-size: medium; (keywords)

Normale tekengrootteNormale tekengrootteNormale tekengrootteNormale tekengrootte

IE: Tekengrootte ‘Grootst’ / slechtziendIE: Tekengrootte ‘Grootst’ / slechtziendIE: Tekengrootte ‘Grootst’ / slechtziendIE: Tekengrootte ‘Grootst’ / slechtziend

Kleur

• Gebruik niet enkel kleuren om essentiële informatie over te brengen.

Voorbeeld

Voorbeeld Collivery

Kleurcontrast is voldoende

• Zorg ervoor dat de kleur van informatieve paginaonderdelen (zoals tekst en schema's) voldoende contrasteert met de achtergrond

• Colour Contrast Analyser

Webtoegankelijkheid testen

• Test in meerdere browsers• Test enkel met muis• Test enkel met toetsenbord• Schakel het geluid uit• Bekijk in zwart/wit• Surf met een PDA of gsm naar je site• Installeer een gratis demoversie van een screenreader:

overzicht op www.blindsupport.com/screenreaders.php