navigatie zonder muis n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Navigatie zonder muis PowerPoint Presentation
Download Presentation
Navigatie zonder muis

Loading in 2 Seconds...

play fullscreen
1 / 31

Navigatie zonder muis - PowerPoint PPT Presentation


  • 155 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Navigatie zonder muis' - harken


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
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

slide3
Klik hier en win een auto.

Download het studieprogramma van dit schooljaar in PDF

linkteksten vermelden gedrag
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
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 paginatitels
Goede paginatitels

Contact - Vlaanderen.be

Tarieven - BoekhoudkantoorDevloo

Nieuwsarchief | De Standaard

... nietzogoed

Vlaanderen.be

Untitled Document

Nieuwsarchief

waarom zijn titels belangrijk
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
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-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
Waarom beschrijven?

Voorgelezen door screenreader

Zichtbaar als tooltip (niet in alle browsers)

Zichtbaar als afbeeldingen ontbreken, traag downloaden of uitgeschakeld zijn

tips voor beschrijvingen
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.

slide13

<imgsrc=”...” alt=”Atomium (detail)” />

<imgsrc=”...” alt=”Pasta en rode wijn” />

<imgsrc=”...” alt=”Trollenkoning” />

<imgsrc=”...” alt=”Portret Yves Leterme” />

grafische tekst
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 tekst1
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
Alt-tekst is letterlijke weergave

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

slide17

<imgsrc=”...” alt=”Vergelijk de leveranciers” />

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

<imgsrc=”...” alt=”Milieukoopwijzer.be” />

<imgsrc=”..” alt=”Eenvraagje? Bel gratis 1700” />

<imgsrc=”...” alt=”Vlaanderen.be - Uwstartpaginavoor de Vlaamseoverheid” />

grafische toegangscodes
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

video en geluid
Video en geluid

Gesproken tekst is als HTML beschikbaar

Video en geluid starten niet automatisch

gesproken tekst
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
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
Office-bestanden

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

tekengrootte is eenvoudig te wijzigen
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)

kleur
Kleur

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

kleurcontrast is voldoende
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
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