|
|
 |
Webtoegankelijkheid
Het begrip Webtoegankelijkheid ofwel Accessibility zorgt ervoor dat alle bezoekers die een website bezoeken duidelijk en gemakkelijk een webpagina kunnen lezen ongeacht de omstandigheden en ongeacht de configuratie van de computer.
In deze paper wordt het nut en de belangrijkheden van het opzetten van een toegankelijke website besproken waarna stap voor stap wordt uitgelegd hoe een website toegankelijker kan gemaakt worden met speciale aandacht voor de AnySurfer richtlijnen.
Elke stap wordt uitvoerig besproken en geïllustreerd door passende voorbeelden.
Het begrip Webtoegankelijkheid ofwel Accessibility zorgt ervoor dat alle bezoekers die een
website bezoeken duidelijk en gemakkelijk een webpagina kunnen lezen ongeacht de
omstandigheden en ongeacht de configuratie van de computer.
In deze paper wordt het nut en de belangrijkheden van het opzetten van een toegankelijke
website besproken waarna stap voor stap wordt uitgelegd hoe een website toegankelijker
kan gemaakt worden met speciale aandacht voor de AnySurfer richtlijnen.
Elke stap wordt uitvoerig besproken en geïllustreerd door passende voorbeelden.
2 AnyKid
2.1 Wie of wat is AnyKid
AnyKid is een project van de ople
Katholieke Hogeschool te Mechelen.
onderwijs bewust maken van het belang van toegankelijke websites. Door het bouwen van
een toegankelijke website tonen we de leerlingen waa
2.2 Wie of wat is AnySurfer
2.2.1 AnySurfer label
“ AnySurfer is een kwaliteitslabel
voor mensen met een functiebeperking.
AnySurfer is een Belgisch kwaliteitslabel dat staat labeldragers zijn sites die voor iedereen vlot bereikbaar zijn, dus ook voor blinden, slechtziende, ouderen of mensen met een handicap.
AnySurfer heeft daarnaast ook aandacht voor de gebruiksvriendelijkheid van we internationale webstandaarden van het huidige moment.
2.2.2 Wie heeft zo een label
Verschillende websites van bedrijven hebben
Deze is te herkennen aan het AnySu
Enkele voorbeelden:
• Dexia direct net (toepassing om elektronisch te bankieren)
• 2dehands.be
• Centrum voor gelijkheid van kansen
• Week van de smaak
Voor de volledige lijst van websites die een
http://www.AnySurfer.be/nl/service/labeldragers/
AnySurfer
kwaliteitslabel voor websites die voor iedereen toegankelijk zijn
voor mensen met een functiebeperking.” Bron: AnySurfer.be
is een Belgisch kwaliteitslabel dat staat voor toegankelijke websites. De
die voor iedereen vlot bereikbaar zijn, dus ook voor blinden,
slechtziende, ouderen of mensen met een handicap.
heeft daarnaast ook aandacht voor de
gebruiksvriendelijkheid van websites en de
internationale webstandaarden van het huidige
is niet enkel: blinden,
slechtziende, ouderen of mensen met een handicap.
ullen ook de voordelen van het
label ervaring doordat websites
gebruiksvriendelijker worden dankzij AnySurfer.
Wie heeft zo een label
van bedrijven hebben al een AnySurfer label behaald.
Deze is te herkennen aan het AnySurfer label op hun website.
(toepassing om elektronisch te bankieren)
Centrum voor gelijkheid van kansen
lijst van websites die een AnySurfer label hebben kan u kijken op
.be/nl/service/labeldragers/.
4
iding Informaticamanagement en Multimedia aan de
Hierbij wil men de kinderen van het secundair
maken van het belang van toegankelijke websites. Door het bouwen van
r ze op moeten letten.
voor websites die voor iedereen toegankelijk zijn — ook
oor toegankelijke websites. De AnySurfer
die voor iedereen vlot bereikbaar zijn, dus ook voor blinden,
label behaald.
label hebben kan u kijken op
5
3 Een website maken
In dit voorbeeld gaan we een toegankelijke website bouwen waarin we bij de opbouw van
de website stap voor stap gaan stilstaan bij alle elementen waar u moet op letten bij het
bouwen van een gebruiksvriendelijke website die voor iedereen toegankelijk is.
Want mits een klein inspanning kan u uw website heel wat toegankelijker en ook
gebruiksvriendelijker maken.
In dit voorbeeld maken wij een website voor het restaurant Mechelen-Centraal.
Deze website is online beschikbaar op volgend adres: http://anykid.digiwize.net .
Hieronder kunt u een screenshot terugvinden van hoe de website er zal uitzien na het
overlopen van alle stappen.
GEBRUIK VAN DE SOFTWARE
Voor het tot stand komen van dit project maakten we gebruik van Adobe Dreamweaver CS3
en het design van de website werd ontworpen met Adobe Photoshop CS3.
Voor het testen van de website hebben we gebruik gemaakt
van Internet Explorer, Firefox en Opera.
Tevens maakte we gebruik van de Colour Contrast Analyser
tool (http://www.paciellogroup.com/resources/contrast-
analyser.html) en de Firefox addons Web Developer en Fangs.
6
DE OPBOUW
In de eerste fase van dit hoofdstuk gaan we focussen op enkele belangrijke punten die de
toegankelijkheid van de website kunnen verhogen. Mits wat extra aandacht te besteden aan
deze punten kan men snel en zonder veel extra tijd een website een stuk toegankelijker
maken.
1. Goede titel geven
2. HTML strict zetten
3. Externe CSS sheet koppelen
4. Opbouw van lay-out -> logische volgorde van de DIV’s
5. Taal duidelijk aanduiden
6. Opmaak van teksten
7. Duidelijke hyperlinks
8. Wat bij externe hyperlinks?
9. Images invoegen met passende ALT tags
10. Gebruik van tabellen voor inhoud
11. Formulier toevoegen
12. Downloadbare bestanden
TESTEN & CONTROLEREN
In de tweede fase van dit hoofdstuk gaan we dieper in op testen en controleren. Hierbij gaan
we aan de hand van tools en technieken de gebruiksvriendelijkheid van de website testen.
1. Wat als de CSS uitgeschakeld is
2. Verschillende browsers testen
3. Testen zonder muis
4. Fangs addon firefox
5. Contrast van de kleuren controleren
7
DE OPBOUW
STAP 1 : ZINVOLLE TITEL
Toepassing op AnySurfer Richtlijn
• http://www.anysurfer.be/nl/richtlijnen/inhoud/tekst/pagina-heeft-een-
betekenisvolle-titel/
Een titel van een pagina is zeer belangrijk, deze geeft je een idee wat er op die pagina staat.
Hecht daarom voldoende belang aan het opstellen van een goede titel. De titel moet je
duidelijk zeggen op welke pagina je je binnen een website bevindt.
In de onderstaande afbeelding zie je een screenshot van onze website en een van een
externe website. De 2 eerste tabbladen hebben meer betekenis, het onderwerp is leesbaar
in het tabblad. De titel van de externe website in het laatste tabblad is minder goed gekozen
omdat je de pagina’s moet openklikken alvorens je weet wat er in staat. Begin de titel best
met de titel van de pagina met daar op volgend de titel van de website. Zo blijven je
paginatitels steeds goed zichtbaar zoals getoond in de 2de
afbeelding.
In HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> <title> <title> <title>Inleiding | Inleiding | Inleiding | Inleiding | Mechelen Mechelen Mechelen Mechelen- -- -Centraal Centraal Centraal Centraal</title> </title> </title> </title>
<link href="css/stijl.css" rel="stylesheet" type="text/css">
</head>
In browser
8
STAP 2 : HTML DOCTYPE OP STRICT ZETTEN
In Dreamweaver kan je dit ook door rechts te klikken op je pagina en dan in het menu Page
properties te selecteren. Daarna kies je voor de category: title/encoding, dan krijg je
onderstaand scherm te zien. Daar kan je dan Document Type XHTML 1.0 Strict selecteren.
In HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1 http://www.w3.org/TR/xhtml1/DTD/xhtml1 http://www.w3.org/TR/xhtml1/DTD/xhtml1 http://www.w3.org/TR/xhtml1/DTD/xhtml1- -- -strict.dtd strict.dtd strict.dtd strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inleiding | Mechelen-Centraal</title>
<link href="css/stijl.css" rel="stylesheet" type="text/css">
</head>
STAP 3 : EXTERNE CSS SHEET KOPPELEN
Toepassing op AnySurfer Richtlijn
• http://www.anysurfer.be/nl/richtlijnen/inhoud/tekst/hypertekst-is-semantisch-
gestructureerd/
• http://www.anysurfer.be/nl/richtlijnen/vormgeving/paginaopmaak-met-css-
positionering/
Een van de grote voordelen van stylesheets is de mogelijkheid om stijlkenmerken op te
nemen in externe files. Om deze externe file te kunnen gebruiken op de website dient er op
de webpagina in de <head> tag de verwijzing gedefinieerd te worden naar de externe file.
Het grote voordeel hierbij is dat indien men de externe filesheet aanpast automatisch alle
daar aan gekoppelde webpagina’s worden aangepast.
In HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
9
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inleiding | Mechelen-Centraal</title>
<link href="css/stijl.css" rel="stylesheet" type="text/css"> <link href="css/stijl.css" rel="stylesheet" type="text/css"> <link href="css/stijl.css" rel="stylesheet" type="text/css"> <link href="css/stijl.css" rel="stylesheet" type="text/css">
</head>
Locatie van files
STAP 4 : OPBOUW VAN LAY-OUT MET CSS
Toepassing op AnySurfer Richtlijn
• http://www.anysurfer.be/nl/richtlijnen/vormgeving/paginaopmaak-met-css-
positionering/
• http://www.anysurfer.be/nl/richtlijnen/vormgeving/tekstopmaak/
We moeten er op letten dat de opbouw van de CSS geen problemen geeft als we de
lettergrootte van de website gaan aanpassen. Tot 150% zoomniveau moeten overlapping
tussen elementen vermeden worden. (Zie ook stap 6) Ook de DIV elementen moeten in een
logische volgorde op elkaar volgen zodat de inhoud nog te lezen en te begrijpen is als de
stylesheet niet aanwezig is. In stap 1 van het Testen van de website gaan we hier dieper op
in.
Zie erop toe dat er geen overlappingen ontstaan die de leesbaarheid verminderen als gevolg
dat bezoekers de tekstgrootte gaan aanpassen. Dit probleem kan verholpen worden door
gebruik te maken van relatieve positionering en vloeiende of elastische paginalay-outs te
gebruiken.
In HTML Code
<body>
<div class="container">
<div class="menu-text">
<ul>
<li><a href="#">Inleiding</a></li>
<li><a href="#">Suggesties</a></li>
<li><a href="#">Kaart</a></li>
<li><a href="#">Locatie</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
10
<div class="content">
<div class="titel">
<span id="resto">Restaurant|</span>Mechelen-Centraal
</div>
<div class="tekst">
<p>Teksten op de website</p>
</div>
</div>
</div>
</body>
Grafische schets van Div’s
In browser
STAP 5 : DUIDELIJK DE SCHRIJFTAAL AANGEVEN
Toepassing op AnySurfer Richtlijn
• http://www.anysurfer.be/nl/richtlijnen/inhoud/taal/
Het aangeven van de schrijftaal op de website is vooral nodig voor de mensen die een
screenreader gebruiken. Hierdoor zal de software weten op welke manier hij de woorden
moet uitspreken. Als we dit niet doen zou in onderstaand voorbeeld de Engelse tekst op zijn
Nederlands worden uitgesproken waardoor deze boodschap waarschijnlijk niet meer
verstaanbaar is.
In HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl xml:lang="nl xml:lang="nl xml:lang="nl">
<head>
11
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Inleiding | Mechelen-Centraal</title>
<link href="css/stijl.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Restaurant</h1>
<p>Welkom in ons restaurant.Naar de filosofie van onze kok: <span <span <span <span
xml:lang=”en”>After dinner sit a while, after supper walk a xml:lang=”en”>After dinner sit a while, after supper walk a xml:lang=”en”>After dinner sit a while, after supper walk a xml:lang=”en”>After dinner sit a while, after supper walk a
mile.</span> mile.</span> mile.</span> mile.</span>
</p>
</body>
STAP 6 : OPMAAK VAN TEKSTEN
Toepassing op AnySurfer Richtlijn
• http://www.anysurfer.be/nl/richtlijnen/inhoud/tekst/
• http://www.anysurfer.be/nl/richtlijnen/vormgeving/tekstopmaak/
Via een webbrowser kunnen slechtzienden en ouderen de standaard tekstgrootte van een
webpagina vergroten of indien nodig verkleinen. Door gebruik te maken van relatieve
eenheden in de CSS code past de website de tekstgrootte automatisch aan.
Bij het instellen van tekst groottes kan je best gebruikmaken van 1 van de hieronder
getoonde CSS eigenschappen.
font-size: 1em; // Em's
font-size: 120%; // Procenten van de tekstgrootte
font-size: medium; // (keuze van xx-small t.e.m. xx-large)
Een ander belangrijke richtlijn in verband met de tekstopmaak is het gebruik van spaties. U
dient enkel spaties te gebruiken waar nodig en niet om een visueel effect te creëren. Indien
u toch dit visueel effect wenst te gebruiken maak dan gebruik van volgende code in css:
Witruimte tussen de karakters aanpassen:
letter-spacing: 0.3em;
Witruimte tussen de woorden aanpassen:
word-spacing: 0.3em;
Tevens dienen links in een webpagina duidelijk kenbaar gemaakt te worden met een
afwijkende tekstkleur en voor mensen die kleurenblind zijn of een monochroom
beeldscherm gebruiken dient een extra tekst herkenmerk gebruik te worden zoals
onderstreping om de duidelijk te maken.
12
Alle informatie die aangeboden wordt op de website maakt gebruik van deze
geoptimaliseerde opmaak techniek waardoor de lay-out zich steeds optimaal schikt naar de
door de gebruiker ingestelde weergave grootte. Zo bevat het titel attribuut de volgende
waarden.
In CSS
.titel {
font:Georgia, Times, serif;
color:#ffffff;
font font font font- -- -s ss size:xx ize:xx ize:xx ize:xx- -- -large; large; large; large;
border-bottom-color:#222222;
border-bottom-style:solid;
border-bottom-width:5px;
}
13
STAP 7 : GEBRUIK HYPERLINKS
Toepassing op AnySurfer Richtlijn
• http://www.anysurfer.be/nl/richtlijnen/navigatie/hyperlinks/
Bij het plaatsen van hyperlinks op een website moet er gelet worden op 3 belangrijke
punten.
• Linktekst is betekenisvol
• Klikgebied is groot genoeg
• Bij downloads moet je het bestandtype meegeven
Linktekst betekenisvol
Om de navigatie van zowel gewone als blinde gebruikers te vergemakkelijken moet de
linktekst informatiedragend zijn. Vermijdt dus zoveel mogelijk links als ‘meer lezen’ , ‘klik
hier’, ‘openen’ , ‘volledig bericht’. Want voor blinde gebruikers hebben deze links weinig tot
geen betekenis en weten zijn niet welke informatie ze zullen krijgen als ze op de link klikken.
Klikgebied is groot genoeg
Een hyperlink moet goed aan te klikken zijn, zowel voor mensen die de muis gebruiken en
mensen die werken met een muisraster, aanwijsstok of andere technologie. De minimale
grote die een link mag hebben is 15 pixels breed en 15 pixels hoog.
Bij downloads
Als je links maakt naar een niet HTML document dan dien je dit ook te vermelden zodat de
gebruiker weet wat hij kan verwachten als op de link geklikt zal worden. Om aan te geven
dat je link naar een ander bestand verwijst geef je in de hyperlink tekst tussen de A tags
tussen haakjes mee naar welk documenttype je linkt.
14
In HTML Code
<a href="menudecember.pdf" title="Menu Van December">Het maand menu
van December kan u terugvinden in de pdf (61,3 KB).</a>
STAP 8 : TOEPASSINGEN VAN EXTERNE HYPERLINKS
Toepassing op AnySurfer Richtlijn
• http://www.anysurfer.be/nl/richtlijnen/navigatie/pop-ups-en-nieuwe-vensters/
Links naar andere websites mogen geopend worden in een nieuwe pagina. Zo blijft u eigen
site nog steeds openstaan terwijl de gebruiker een kijkje neemt op die externe site naar
waar je hem hebt doorverwezen. Het is aan te raden externe sites en pdf file te openen in
een nieuw venster.
In HTML Code
<a href="http://www.deweekvandesmaak.be" target="_blank">Week van
de smaak website (nieuw venster)</a>
STAP 9 : AFBEELDINGEN INVOEGEN MET PASSENDE ALT-TAGS
Toepassing op AnySurfer Richtlijn
• http://www.anysurfer.be/nl/richtlijnen/inhoud/decoratieve-afbeeldingen/
Geef steeds passende beschrijving aan de afbeeldingen op je pagina. Deze beschrijving kan
je aan een afbeelding toevoegen door middel van de ALT tag (ALT=”de beschrijving van de
afbeelding”). De beschrijving geeft de gebruiker een idee van wat er op de afbeelding te zien
is. Zo kunnen ook blinden en slechtzienden zich iets voorstellen over wat er op de website
getoond wordt. Een alt message is ook handig als de webontwikkelaar vergeten is om de
afbeelding te uploaden, dan krijgt de gebruiker alsnog een beschrijving te zien van wat er
eigenlijk had moeten staan.
In HTML Code
<img src="image/resto2.jpg" alt="Interieur van Mechelen-Centraal"
class="image-right">
15
In browser
STAP 10 : GEBRUIK VAN TABELLEN EN HUN INHOUD
Toepassing op AnySurfer Richtlijn
• http://www.anysurfer.be/nl/richtlijnen/inhoud/eenvoudige-gegevenstabellen/
De inhoud van de tabel kan op een bepaalde manier geschikt worden dat de data ook
leesbaar blijft als een gebruiker de tabelweergave blokkeert of met een screenreader werkt.
Als u zelf even de vergelijking maakt tussen optie 1 en optie 2 in HTML en daarna kijkt naar
de output in de browser en hoe de screenreader dit zal lezen. Dan zult u al snel merken dat
optie 2 gebruiksvriendelijker is. Vergeet tevens ook de kolomkoppen niet aan te duiden met
<th> tags in plaats van <td>.
Het gebruik van deze tabellen voor opmaak is enkel toegestaan bij het AnySurfer Basis Label.
Bij het AnySurfer Plus label dient alle opmaak via CSS te gebeuren en mag er geen gebruik
gemaakt worden van tabellen.
Via de Firefox module Webdeveloper kan aan de hand van de Linearize page nagegaan
worden of de verschillende navigatieniveaus en andere pagina-elementen elkaar logisch
opvolgen in de HTML-code waarvan u een screenshot hieronder van kan terugvinden.
In HTML Code
<h2>Openingsuren</h2> <!--optie 1 optie 1 optie 1 optie 1-->
<table>
<tr>
<td>Ma - Di</td>
<td>Woe - Do</td>
<td>Vrij - Za - Zon</td>
</tr>
<tr>
<td>Gesloten</td>
<td>12.00 - 15.00 | 17.30 - 20.30</td>
<td>10.30 - 17.00 | 17.30 - 22.00</td>
</tr>
</table>
16
<h2>Openingsuren</h2> <!--optie 2 optie 2 optie 2 optie 2-->
<table>
<tr>
<td>Ma - Di</td>
<td>Gesloten</td>
</tr>
<tr>
<td>Woe - Do</td>
<td>12.00 - 15.00 | 17.30 - 20.30</td>
</tr>
<tr>
<td>Vrij - Za - Zon</td>
<td>10.30 - 17.00 | 17.30 - 22.00</td>
</tr>
</table>
In browser
In browser (tables disabled met Web developer addon in Firefox)
17
Screenreader output
Optie 1:
Ma - Di Woe - Do Vrij - Za - Zon Gesloten 12.00 - 15.00 | 17.30 - 20.30 10.30 - 17.00 | 17.30 -
22.00
Optie 2:
Ma - Di Gesloten Woe - Do 12.00 - 15.00 | 17.30 - 20.30 Vrij - Za - Zon 10.30 - 17.00 | 17.30 -
22.00
STAP 11 : FORMULIER TOEVOEGEN
Toepassing op AnySurfer Richtlijn
• http://www.anysurfer.be/nl/richtlijnen/interactiviteit/formulieren/
Formulieren kunnen gebruikt worden om informatie te vragen van de gebruiker om hem de
mogelijkheid te bieden om contact te leggen met het bedrijf. Zorgt er altijd voor dat het
duidelijk is welke velden verplicht in te vullen zijn en welke niet. Let er ook op dat deze
indicatie mee tot de inhoud van de label behoort.
Op de website staat een dergelijk voorbeeld op de contactpagina. De contactmodule werd
als volgt opgebouwd. Eerst en vooral maken we een contactformulier waarbij het systeem
parameters van de gebruiker vraagt. In dit voorbeeld betreft het de naam, het e-mailadres
en het eigenlijke bericht.
In html code:
<form id="frmContactFormulier" name="ContactFormulier" method="POST"
action="mailform.php">
<table>
<p><tr><td><label name="Naam">Naam en Voornaam:</label></td>
<td><input type="text" name="name" size="19"><br /></td>
</tr>
<tr><td><label name="email">Email adres:</label></td>
<td><input type="text" name="email" size="19"></td></tr>
<tr><td><label
name="message">Bericht:</label></td><td><textarea rows="9"
name="message" cols="30"></textarea></td></p></tr>
<tr><td></td><td><input type="submit" value="Submit"
name="submit" /><input type="reset" value="Reset" name="reset"
/></td></tr>
</table>
</form>
Om de informatie door te kunnen zenden naar een mailserver is server-side
programmeertaal nodig. In dit voorbeeld maken we gebruik van php om via de “POST”
module de informatie door te sturen. Het mailform.php document ziet er als volgt uit:
mailform.php:
<?php
if(isset($_POST['submit'])) {
$to = "de.pauw.johan@gmail.com";
$subject = "Form Tutorial";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
18
$body = "From: $name_field\n E-Mail: $email_field\n Message:\n
$message";
echo "Het bericht werd succesvol verzonden.";
mail($to, $subject, $body);
} else {
echo "Het bericht kon niet worden verzonden.";
}
?>
STAP 12 : DOWNLOADBARE DOCUMENTEN
Toepassing op AnySurfer Richtlijn
• http://www.anysurfer.be/nl/richtlijnen/inhoud/downloadbare-documenten/
Bij het aanbieden van Word of PDF documenten op je
website moeten deze ook voldoende toegankelijk zijn. Met
andere woorden, als de gebruiker dit bestand download moet
een screenreader in staat zijn ook dit bestand vlot te lezen. Je
kan dit testen door je document op te slaan als tekstbestand.
Indien er geen inhoud verloren is gegaan en alle alinea’s nog
goed op elkaar volgen zal ook een screenreader geen
problemen hebben met je document te lezen.
Een voorbeeld wat u op onze website kan terugvinden is het
pdf document met de Menu Kaart van december. Deze menukaart wordt in pdf aangeboden
doch is het mogelijk voor screenreader alsnog de inhoud hiervan te lezen. Doordat het
document werd
opgebouwd met
tabellen en stijl
attributen is het voor
deze tools mogelijk de
inhoud ervan voor te
lezen.
Een manier waarop deze
kan getest worden dat
deze pdf file beschikbaar
en leesbaar zijn voor
screenreaders kan
doormiddel van het
converteren van de file
naar plain-tekst en het
resultaat ervan te
bekijken. Zoals u kunt zien in onderstaande screenshot worden alle gegevens correct
gecategoriseerd.
19
TESTEN & CONTROLEREN
STAP 1 : CSS UITSCHAKELEN
Door de Css uit te schakelen kunnen we controleren of de DIV’s in een logische volgorde zijn
opgebouwd. Zo kunnen we zien dat screenreaders alle DIV’s in een logische volgorde lezen.
Als de inhoud van de website nog in een juist volgorde getoond wordt zijn de volgorde van je
Div’s goed gekozen.
In Firefox gebruiken we de Webdeveloper tool om de Css af te zetten
zoals getoond wordt in onderstaande afbeelding.
Resultaat in browser
20
STAP 2 : TESTEN MET VERSCHILLENDE BROWSERS
Het is de bedoeling dat de website even gebruikersvriendelijk is in Internet Explorer, Firefox,
Opera, Safari of Google Chrome. Mogelijk is er een probleem met je website in 1 van de
browsers. In dit geval van Restaurant Mechelen-centraal ziet de website er hetzelfde uit in
zowel Firefox , Opera en Internet Explorer.
Browsertesting: Firefox – Opera – Internet Explorer
STAP 3 : NAVIGEREN ZONDER MUIS
Toepassing op AnySurfer Richtlijn
• http://www.anysurfer.be/nl/richtlijnen/navigatie/navigatie-in-het-algemeen/
Navigeren zonder muis is de derde stap om de usability van de website te testen. Hierbij
wordt gecontroleerd of alle hyperlinks bereikbaar en activeerbaar zijn met het toetsenbord.
Want elke website moet steeds zonder muis te gebruiken zijn. Dit wil dus zeggen dan de
gebruiker vlot met de tab toets over de links van de pagina kan lopen. Om het belang
hiervan te ondervinden probeer je dit best even zelf uit aan de hand van een simpele
zoekopdracht.
STAP 4 : FANGS ADDON
Fangs is een addon voor Firefox, het is een screenreader simulator die tekstueel gaat
weergeven wat de screenreader gaat lezen, zo kan je controleren of alles in de correcte
volgorde ingelezen zal worden en of er geen paragrafen worden omgewisseld waardoor de
gebruiker verward zou kunnen zijn. Naast volgorde kan je hier ook controleren of je tabellen
goed zijn opgebouwd.
De tool kan gedownload worden in een Firefox browser met volgende url:
https://addons.mozilla.org/nl/firefox/addon/402
21
Voorbeeld in browser (fangs addon voor firefox)
STAP 5 : KLEURENCONTRAST CONTROLEREN
Volgens de AnySurfer richtlijnen is het
belangrijk dat u niet enkel kleuren gebruikt om
belangrijke zaken aan te duiden maar ook
gebruik maakt van andere technieken zoals vet
en onderlijnen. Houdt bij het maken van een
website in het achterhoofd dat 10% van onze
bevolking kleurenblind is en hierdoor het
kleurverschil niet zal kunnen waarnemen. Zorg
ook voor voldoende contract tussen de tekst en
de achtergrond.
Er zijn op internet gratis tools beschikbaar om
het kleurcontract te testen.
Voor het testen kan u ondermeer gebruik
maken van
http://www.paciellogroup.com/resources/cont
rast-analyser.html, deze handige tool maakt het mogelijk om 2 kleuren in te geven waarop
de applicatie de contrast ratio berekend. Indien deze kleuren voldoende contract bevatten
geeft deze applicatie dit aan doormiddel van de groene indicatie.
22
4 Voorbeelden “webtoegankelijkheid en andersvaliditeit”
In dit hoofdstuk tonen we u nog enkele voorbeelden die we op internet vonden. We tonen
zowel inbreuken als goede voorbeelden.
4.1 Hyperlinks
Bij het plaatsen van hyperlinks op een website moet er gelet worden op 3 belangrijke
punten.
Linktekst is betekenisvol
De link ‘Ford Grand C-max 2010’ is een goed gekozen linktekst.
Probeer links met teksten zoals meer lezen of lees verder te vermijden. Als is er wel een
uitzondering die toestaat ‘lees verder’ te gebruiken bij nieuwsberichten.
Klikgebied is groot genoeg
Het klikgebied van bovenstaande zoekfunctie is veel te klein. De minimale grote
van 15px x 15px is hier niet gerespecteerd
23
Bij Downloads moet je het bestandtype meegeven
In dit voorbeeld is het duidelijk dat de gebruiker een pdf mag verwachten als hij op de link
klikt. Merk op dat ook de bestandsgrootte vermeld is.
Hoe moet het dan niet?
Dit is duidelijk een voorbeeld van hoe het niet moet, hier kan je een pdf downloaden maar
dit is niet correct aangegeven en ook de grootte is niet gekend.
Ook de link ‘Klik hier’ in de 2de
regel rode tekst heeft weinig betekenis en valt niet hard op in
het geheel.
4.2 Pagina titel
Het onderstaande voorbeeld van de stad Mechelen heeft geen goede naamgeving omdat je
niet goed kan lezen op welke pagina men zich bevindt.
De website van JIM is veel duidelijker omdat hier eerst de paginatitel is vermeld met daarop
volgend de websitenaam
24
4.3 CSS Positionering
Een voorbeeld van een niet zo goed toegankelijke website is de Seat website. Als de
gebruiker zijn tekstgrootte aanpast treed er vervorming op en gaat de Nederlandse knop van
de taalselectie uit beeld.
4.4 Zonder muis
Van navigeren zonder muis kunnen we niet echt een voorbeeld geven. Maar we raden u aan
wel eens te gaan kijken naar andere websites en te testen hoe gebruiksvriendelijk deze zijn
als u enkel het toetsenbord gebruikt.
Test bijvoorbeeld:
• De website van je eigen school
• http://www.khm.be
• http://delijn.be/
• http://hln.be/
5 De Narrator tool
De Narrator tool van Microsoft
van ondermeer Microsoft Word,
voor te laten lezen door de computer met behulp van
Spraaksynthese technologie.
Deze tool werd ontwikkeld om blinden en slechtzienden de kans te
geven digitale informatie gemakkelijk en snel voor hen beschikbaar
te stellen. Zonder enige kennis van
Handy Tech Braille toetsenbord
Gebruik van de tools:
Narrator is enkel beschikbaar voor Microsoft Windows
wordt gratis aangeboden en ziet ondermeer vooraf geïnstalleerd in
De applicatie kan geopend worden
alsook via Start -> Bureau Accessoires
- Tip
Microsoft biedt de mogelijkheid om informatie
van ondermeer Microsoft Word, Excel, MSN alsook webpagina’s
voor te laten lezen door de computer met behulp van
Deze tool werd ontwikkeld om blinden en slechtzienden de kans te
gemakkelijk en snel voor hen beschikbaar
. Zonder enige kennis van geavanceerde tools als het
Handy Tech Braille toetsenbord noodzakelijk is.
Narrator is enkel beschikbaar voor Microsoft Windows besturingssystemen
wordt gratis aangeboden en ziet ondermeer vooraf geïnstalleerd in Windows 7
applicatie kan geopend worden zowel via de toetsenbordcombinatie
Bureau Accessoires -> Toegankelijkheid -> Narrator.
Er wordt dan een venster geopend waarbij de
gebruiker de applicatie kan aanpassen aan zijn
wensen. Zo kan er gekozen worden om uitsluitend
teksten voor te laten lezen. Maar anderzijds kan er
ook geopteerd worden dat het programma alle
beschikbare informatie omzet in geluid
Windows functies, waarschuwingsberichten en het
aankondigen van vette of onderlijnde
document of webpagina.
25
besturingssystemen. Het pakket
Windows 7.
Er wordt dan een venster geopend waarbij de
gebruiker de applicatie kan aanpassen aan zijn
worden om uitsluitend
. Maar anderzijds kan er
geopteerd worden dat het programma alle
beschikbare informatie omzet in geluid. Zoals tekst,
functies, waarschuwingsberichten en het
aankondigen van vette of onderlijnde tekst in een
26
6 Conclusie
Tijdens deze uitwerking van het AnyKid project hebben we leren werken met technieken om
websites toegankelijker te maken en deze te schikken volgens de gedefinieerde AnySurfer
richtlijnen.
Een goede raad die we u als lezer nog willen meegeven is als u een website maakt – bouw
deze dan volgens de webtoegankelijkheid richtlijnen welke u kunt terugvinden in onze
paper.
Aan de hand van deze paper werd het immers duidelijk hoe belangrijk deze richtlijnen zijn en
welke voordelen u ondermeer kan behalen. Hierbij denken we aan ondermeer dat website
ook toegankelijk worden voor mindervalide bevolkingsgroepen, de websites
browseronafhankelijkheid werken en ze tevens Search Engine Optimalisation worden –
zodat alle informatie die op de website aanwezig is ook voor de zoekmachines toegankelijk
worden. Hierdoor kan deze alle pagina’s van de website indexeren en op een gepaste wijze
ranken. |
|
Added on Jan 24, 2010 by
Johan
|
|
Rate Article
Rating: 10.00/10 (1 votes) 
|
|
