(De minimale score voor het toekennen van een certificaat is 70%)
Steekproef De audit die we uitvoeren gebeurt niet op de volledige website. Op voorhand wordt een steekproef van 25 pagina’s bepaald. Hierbij selecteren we in de eerste plaats de homepage en de pagina’s achter elk item in de hoofdnavigatie. De steekproef wordt vervolgens verder aangevuld met pagina’s die informatie of functionaliteiten bevatten die belangrijk zijn om mee te nemen in de audit (bv. invulformulieren, tabellen, video, etc.). Onderstaande pagina’s werden opgenomen in de steekproef: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.
Niet elke bezoeker van uw website maakt gebruik van dezelfde webbrowser (bv. Firefox, Chrome, Internet Explorer, etc.). Ga daarom na of uw website volledig toegankelijk, bruikbaar en leesbaar is via de webbrowsers die het vaakst gebruikt worden door uw doelpubliek. Ga zeker na of: o o o
alle tekst zichtbaar en leesbaar is; tabellen en afbeeldingen correct worden weergegeven; alle functionaliteiten van de website (bv. automatische foutmeldingen bij het invullen van een online formulier) correct werken.
Betrokken pagina’s: o 5: Firefox: de labels van het formulier worden niet correct weergegeven.
•
Niet elke bezoeker van uw website maakt gebruik van hetzelfde besturingssysteem (bv. Windows, Mac OS X, Linux, etc.). Ga daarom na of de website volledig toegankelijk, bruikbaar en leesbaar is via de besturingssystemen die het vaakst gebruikt worden door uw doelpubliek. Ga zeker na of: o o o
alle tekst zichtbaar en leesbaar is; tabellen en afbeeldingen correct worden weergegeven; en alle functionaliteiten van de website (bv. automatische foutmeldingen bij het invullen van een online formulier) correct werken.
Hou bij het testen van uw website op Windows ook rekening met de verschillende versies van dit besturingssysteem (Windows 8, Windows 7, Windows Vista, etc.). Test uw website zeker uit op Windows XP. Hoewel dit een sterk verouderde versie is, wordt het nog steeds door een grote groep mensen gebruikt. Betrokken pagina’s: Windows XP/Windows Vista: de tekst van de navigatiebalk is onvoldoende leesbaar.
Paginalay-‐out •
•
•
Het is belangrijk om voldoende stil te staan bij de lengte van een webpagina. Korte pagina’s vergemakkelijken het ‘scannen’ van de pagina en geven gebruikers een duidelijk overzicht. Hou daarom de homepage, navigatiepagina’s en pagina’s met grote grafieken kort. Bij voorkeur niet langer dan 1 schermlengte (rekening houdend met de schermresoluties die het vaakst gebruikt worden door uw doelpubliek). Betrokken pagina’s: 1: De homepage is te lang. Wanneer een webpagina meer informatie bevat dan wat er op de eerste schermlengte te zien is (meer informatie below the fold), verschijnt er rechts van de webpagina een scroll-‐balk. Echter, gebruikers merken deze vaak niet op. Daarom is het belangrijk dat het voor een gebruiker meteen duidelijk is dat de informatie die hij te zien krijgt niet volledig is (bv. omdat afbeeldingen of tekst onderaan wordt afgekapt). Te veel witruimte of een grote afbeelding die bijna de hele eerste schermlengte inneemt kunnen een gebruiker onterecht het idee geven dat er verder geen informatie meer beschikbaar is. Betrokken pagina’s: 1, 2, 3, 5, 6, 8, 14, 15, 16, 22, 23, 24: Er wordt te veel witruimte voorzien, waardoor het lijkt alsof er geen informatie meer “below the fold” zit. Een correct gebruik van witruimte verhoogt de scanbaarheid van een webpagina. Maak daarom gebruik van witruimte om elementen (bv. knoppen) te groeperen en de paragrafen in een tekst te onderscheiden van elkaar. Pas wel op voor teveel witruimte. Dat zorgt immers voor onnodig scrollen. Betrokken pagina’s: 1, 3, 22, 25: Te veel witruimte zorgt voor onnodig scrollen.
Tekst lay-‐out •
Veel mensen ondervinden moeilijkheden bij het lezen van tekst op een scherm. Zorg daarom voor voldoende contrast tussen de tekst en de achtergrond. Voor bodytekst is een contrastratio van 5:1 aan te raden. Voor grotere tekst (minimaal 18pt of 14pt bold) is een contrastratio van 3:1 voldoende. Vermijd te allen tijde de volgende combinaties: o o o o o
•
Blauw en zwart; Lichte kleuren en wit; Rood en groen; Rood en blauw; Rood en zwart.
Betrokken pagina’s: o Bv. 1, 2: wit op blauw (navigatie) o Bv. 1, 12, 20: oranje op wit, groen op wit Veel mensen ondervinden moeilijkheden bij het lezen van tekst op een scherm. Zorg daarom voor voldoende contrast tussen de tekst en de achtergrond. Een niet-‐egale achtergrond (bv. met een afbeelding of een afleidend patroon) kan de leesbaarheid verminderen. Vermijd dus een drukke achtergrond of afbeelding achter de tekst op uw website.
Veel mensen ondervinden moeilijkheden bij het lezen van tekst op een scherm. Een optie om de tekst op een webpagina te vergroten kan helpen. Zorg er daarom voor dat alle tekst tot 150% schaalbaar is. Het schalen van de tekst mag geen overlap veroorzaken tussen de verschillende elementen van de webpagina. Betrokken pagina’s: 3
Schrijven voor het web •
Een gebruiker wil kunnen inschatten hoe accuraat de informatie is die wordt aangeboden op uw website. Het internet bevat immers heel wat verouderde en achterhaalde informatie. Laat bezoekers daarom steeds weten wanneer de informatie op uw website voor het laatst werd geüpdatet. Voorzie op elke pagina met informatie de datum van de laatste update. Indien uw website nieuws en/of andere tijdsafhankelijke informatie bevat, voeg dan zeker de publicatiedatum en (indien mogelijk) het uur van publiceren toe. Betrokken pagina’s: alle pagina’s
•
Bezoekers van uw website die nieuw zijn binnen uw vakgebied, zijn vaak niet bekend met gangbare acroniemen en afkortingen. Leg daarom duidelijk uit wat acroniemen en afkortingen precies betekenen. Hou er ook rekening mee dat niet alle bezoekers via de homepage op uw website terechtkomen. De betekenis van acroniemen en afkortingen moet dus vanop elke pagina duidelijk zijn. Betrokken pagina’s: o 2 (bv. CRM) o 20 (bv. SEO, SEA)
Links •
•
•
Hyperlinks in een tekst moeten goed te herkennen zijn. Het moet voor een gebruiker in één oogopslag duidelijk zijn waar hij kan klikken, zonder dat hij moet gokken of de muis over de pagina hoeft te bewegen om hyperlinks te ontdekken. Het gebruik van kleur is een eerste stap in de goede richting. Dit is echter niet voldoende. Geef tekstuele hyperlinks een aparte kleur én onderlijn ze. Zo kunnen ook mensen met kleurenblindheid de hyperlinks herkennen. Betrokken pagina’s: alle pagina’s Het moet voor een gebruiker in één oogopslag duidelijk zijn waar hij wel en niet kan klikken. Vermijd daarom elementen (zowel tekstlinks als afbeeldingen) op de website die er aanklikbaar uitzien, maar het toch niet zijn. Dit kan een gebruiker verwarren en leidt uiteindelijk tot frustratie. Betrokken pagina’s: 2: de foto’s van de teamleden zien er aanklikbaar uit. De navigatiestructuur van een website is vaak niet voor elke gebruiker even duidelijk. Door hem feedback te geven rond reeds uitgevoerde acties kan u
•
voorkomen dat een gebruiker binnen de website in een kringetje blijven rond navigeren. Geef daarom hyperlinks die reeds bezocht werden automatisch een andere kleur. Geef niet-‐bezochte hyperlinks een levendige kleur en bezochte hyperlinks eerder een doffe kleur. Let op: dit geldt niet voor de links in een (navigatie)menu. Betrokken pagina’s: alle pagina’s Een gebruiker wil steeds weten wat hij kan verwachten bij het klikken op een hyperlink. Wanneer hij op voorhand goed weet wat er zal gebeuren kan hij beter inschatten of dat echt is wat hij wil. In de meeste gevallen zal een gebruiker verwachten dat een hyperlink hem naar een andere pagina van de website brengt. Wanneer de hyperlink echter een andere website, een e-‐mailbericht, een audio-‐ of videobestand of een andere applicatie opent, laat dat dan duidelijk weten aan de gebruiker. De linktekst moet dit duidelijk maken. Betrokken pagina’s: o 1 (link naar een externe website) o 3 (grafische link naar een externe website)
•
Wanneer de linktekst van een hyperlink en de titel op de bestemmingspagina waar de hyperlink naar verwijst overeenkomen, geeft dat een gebruiker duidelijk de feedback dat hij de gewenste pagina bereikt heeft. Een groot verschil tussen beiden kan een gebruiker verwarren. Zorg er daarom steeds voor dat de linktekst van een hyperlink en de titel op de bestemmingspagina hetzelfde zijn. Betrokken pagina’s: o bv. "schrijf je in" en “Onze workshops”
•
Consistentie is één van de belangrijkste begrippen binnen web usability. Het zorgt voor een betrouwbare uitstraling en helpt gebruikers sneller te begrijpen hoe een website in elkaar zit. Wees daarom consistent in het bepalen van linkteksten. Hyperlinks met eenzelfde doel (bv. het contactformulier) krijgen steeds dezelfde linktekst (bv. ‘contact’). Betrokken pagina’s: o Bv. “Geef ons dan een seintje”, “contact”
Online formulieren •
Bij het invullen van een online formulier moet het voor een gebruiker duidelijk zijn wat hij waar dient in te vullen. Elk invulveld moet voorzien zijn van een duidelijk label. Onduidelijke labels kunnen een gebruiker verwarren. Let op: plaats het label niet in het invulveld zelf. In dat geval kan een gebruiker achteraf niet meer nagaan of hij de juiste informatie in het juiste invulveld geplaatst heeft. Betrokken pagina’s: 5
•
•
•
Bij het invullen van een online formulier moet het voor elke gebruiker duidelijk zijn wat hij waar dient in te vullen, ook voor gebruikers die gebruik maken van assistieve technologie. Zorg er daarom voor dat het ook in de HTML-‐code duidelijk is welk label bij welk invulveld hoort. Zo kan een screen reader bij elk invulveld het label correct voorlezen. Voorzie het volgende in de broncode: o o
unieke id-‐attributen voor invulvelden, en een labelelement (
