Quickscan 2007

In het belang van de kwaliteit van de testresultaten is de keuze van pagina's die je screent van groot belang. De meest geschikte pagina's zijn Home, Contact, Sitemap, de zoekpagina en een typische inhoudspagina.

Inhoudsopgave

  1. Heeft iedere pagina een betekenisvolle titel?
  2. Is de website bruikbaar zonder muis?
  3. Zijn hyperlinks duidelijk te onderscheiden van andere tekst?
  4. Is het klikgebied van hyperlinks minstens 15 bij 15 pixels groot?
  5. Is de tekst eenvoudig te vergroten?
  6. Treden bij vergroting geen overlappingen op?
  7. Contrasteert de tekstkleur voldoende met de achtergrond?
  8. Hebben alle afbeeldingen een alternatieve beschrijving?
  9. Is gesproken tekst in audio- en videofragmenten ook tekstueel beschikbaar?
  10. Zijn formulieren gemarkeerd met de hiervoor bestemde HTML-tags?
  11. Zijn gegevenstabellen gemarkeerd met de hiervoor bestemde HTML-tags?
  12. Zijn koppen gemarkeerd met de hiervoor bestemde HTML-tags?
  13. Zijn lijsten gemarkeerd met de hiervoor bestemde HTML-tags?
  14. Zijn er alternatieven voor belangrijke paginaonderdelen in Flash?
  15. Extra: Voldoet de website strikt aan de HTML-versie die aangegeven staat in de broncode?
  16. Extra: biedt de website een toegankelijkheidsverklaring?
  17. Extra: hoeveel tijd heb je nodig gehad om deze screening uit te voeren?
  18. Extra: is de site beschikbaar in verschillende talen? Indien ja, welke?

1. Heeft iedere pagina een betekenisvolle titel?

De paginatitel is de tekst bovenaan in het browservenster (blauwe balk), net boven de menubalk.

'Betekenisvol' wil zeggen:

  • Paginatitel vermeldt op welke pagina binnen de site men zich bevindt.
  • Paginatitel vermeldt ook op welke site men zich bevindt.
  • Paginatitel is verschillend op elke pagina van de site.

Voorbeelden

Niet goed

  • 'Untitled document'
  • 'Stad Leuven' (er ontbreekt een verwijzing naar de inhoud van de specifieke pagina)
  • 'Openingsuren' (vermeldt niet op welke site deze pagina staat)

Wel goed

  • 'Contact - Vlaanderen.be'
  • 'Openingsuren Stadhuis Leuven'

Hoe testen?

  1. Open de homepage en kies een vijftal andere pagina's uit.
  2. Ga na of de paginatitel verandert en aan de bovenvermelde criteria voldoet. Als u dit via de broncode wil nakijken, moet u op de title-tag letten.

Deze test kan uitgevoerd worden in om het even welke browser. Geschatte tijd: 5 minuten.

2. Is de website bruikbaar zonder muis?

Deze test gaat na of de site bedienbaar is als men enkel het toetsenbord kan hanteren. Met de tabtoets springt de cursor van link naar link en enter activeert een link.

De website is bruikbaar zonder muis als je met de tabtoets elke link kunt bereiken en als dit in een logische volgorde gebeurt.

Vaak voorkomende problemen

  • Besteed speciale aandacht aan uitklapmenu's: als de cursor op een bepaalde link staat, opent er een submenu dat eerst niet zichtbaar was. Vaak zijn de links in zulke submenu's enkel bruikbaar met de muis en dus niet bereikbaar via het toetsenbord. Voorbeeld: www.geel.be.
  • Dropdownlijsten: keuzemenu dat opent als de cursor erop terechtkomt. Als er bij deze lijsten geen knop is om de keuze te bevestigen, zal je merken dat het met het toetsenbord zeer moeilijk is een optie te selecteren. Gebruik hiervoor de pijltjestoetsen. Voorbeeld: www.apple.com.

Hoe testen?

  1. Open de homepage, leg de muis aan de kant en navigeer van link naar link met de tabtoets.
  2. Test vooral de eventueel aanwezige uitklapmenu's en dropdownlijsten.
  3. Open een willekeurige link en probeer hetzelfde.

Deze test kan enkel uitgevoerd worden in Internet Explorer. Geschatte tijd: 15 minuten.

3. Zijn hyperlinks duidelijk te onderscheiden van andere tekst?

De vorige test behandelde alle navigatieonderdelen; hier beperken we ons tot de links in doorlopende tekst.

Hyperlinks zijn duidelijk te onderscheiden als ze onderlijnd zijn of bijvoorbeeld vet zijn weergegeven. Een afwijkende kleur volstaat niet voor kleurenblinden. Onderstreping bij 'mouse-over' is ook niet voldoende.

Hoe testen?

  1. Zoek een drietal pagina's die links bevatten die voorkomen in doorlopende tekst./li>
  2. Het resultaat van de test is oké als de links duidelijk te onderscheiden zijn (bvb. door onderstreping). Als de links niet of enkel met een afwijkende kleur aangegeven zijn, is de test negatief.

Deze test kan uitgevoerd worden in om het even welke browser. Geschatte tijd: 7 minuten.

4. Is het klikgebied van hyperlinks minstens 15 bij 15 pixels groot?

Met het klikgebied bedoelen we de oppervlakte waarop men moet klikken om de link te activeren. We onderzoeken dus kleine icoontjes en andere grafische links.

Het criterium ligt op 15 pixels breed en hoog. Als je links tegenkomt met een kleiner klikbaar oppervlak is deze test niet ok. Als er geen grafische links zijn of ze zijn allemaal groot genoeg, dan is de test positief.

Hoe testen?

Bekijk de homepage en enkele andere pagina's. Zoek naar icoontjes, knoppen en andere kleine grafische links zoals een envelopje dat leidt naar de contactpagina. Deze test kan enkel uitgevoerd worden in Mozilla Firefox. Je kan deze browser gratis downloaden op mozilla-europe.org.

Gebruik de Web Developer Toolbar voor Firefox om te meten of het klikgebied minstens 15 bij 15 pixels groot is. Deze toolbar is gratis te downloaden op mozilla.org.

In de categorie 'Miscellaneous' vind je de optie 'Display ruler'. Hierdoor verandert je muis in een kruisje waarmee je rechthoeken kunt trekken. In de toolbar komt automatisch de breedte en hoogte van je rechthoek te staan. Wanneer je een rechthoek maakt ter grootte van het icoontje dat je wil meten, mag de breedte en hoogte niet minder dan 15 pixels bedragen.

Screenshot van de Web Developer Toolbar

Geschatte tijd: 10 minuten.

5. Is de tekst eenvoudig te vergroten?

Browsers hebben een ingebouwde vergrotingsfunctie. In Internet Explorer werkt deze enkel als de lettergroottes correct zijn gedefinieerd. Daarom heb je Internet Explorer nodig om deze test te kunnen uitvoeren.

Hoe testen?

  1. Open de site met Internet Explorer.
  2. Kies Beeld > Tekengrootte > Extra groot.
  3. Ga na of alle tekst (exclusief de grafische tekst) op de pagina groter is geworden. Indien er niets verandert of als er slechts een gedeelte van de tekst vergroot, is het testresultaat negatief.
  4. Schakel de tekengrootte terug naar Normaal en herhaal deze test op een willekeurige andere pagina van de site.

Let op: tekst in afbeeldingen zal nooit mee vergroten, dus houd enkel rekening met de "gewone" tekst. Dat is tekst die je letter per letter met de muis kan selecteren.

Screenshot van het menu 'Tekengrootte' in Internet Explorer

Geschatte tijd: 7 minuten.

6. Treden bij vergroting geen overlappingen op?

Als het in de vorige test gelukt is om de tekst op de website te vergroten, is het nu belangrijk om na te gaan of er hierbij geen overlappingen optreden en dat alle tekst leesbaar blijft. Voer deze test zowel in Internet Explorer als in Mozilla Firefox uit.

Mogelijke problemen die kunnen optreden

  • Na vergroting overlapt de tekst uit de ene kolom met tekst uit een andere kolom waardoor hij onleesbaar wordt.
  • Na vergroting schuift tekst over een achtergrondkleur en wordt hierdoor onleesbaar.
  • Bij het vergroten, wordt de tekst groter, maar blijft de ruimte tussen de regels even groot waardoor tekstregels in elkaar gaan lopen.

Homepage Telenet

Hoe testen?

Vergroot de tekst op de homepage en op een willekeurige andere pagina van de site. Dit kan op de manier zoals beschreven in de vorige test, maar je kunt in Firefox ook werken met de toetsencombinatie Ctrl + ‘-’ en Ctrl + ‘-’. Beperk je in dit geval wel tot 2 vergrotingsstappen, want na een zekere vergroting zullen er onvermijdelijk overlappingen ontstaan.

Geschatte tijd: 5 minuten.

7. Contrasteert de tekstkleur voldoende met de achtergrond?

De tekstkleur moet voldoende contrasteren met de achtergrondkleur om een goede leesbaarheid voor slechtzienden te verzekeren.

Hoe testen?

Open de homepage en enkele andere pagina’s. Met de Colour Contrast Analyser kan je aan de hand van een pipet een voor– en achtergrondkleur selecteren. De contrastverhouding tussen deze kleuren moet minstens 5:1 zijn.

Contrastverhouding meten

Geschatte tijd: 10 minuten

8. Hebben alle afbeeldingen een alternatieve beschrijving?

Beschrijvingen van afbeeldingen (alt-teksten) moeten een volwaardig alternatief bieden voor de afbeelding. Dit is soms subjectief, maar hier volgen een aantal richtlijnen:

  • Decoratieve afbeeldingen zoals pijltjes, opsommingtekens, lijntjes, hoekjes e.d. krijgen een beschrijving zonder inhoud, dit wil zeggen een lege alt-tekst (alt=””).
  • Alle andere afbeeldingen hebben een beschrijving nodig. Als deze hier en daar ontbreekt, is deze test negatief. Geef in het opmerkingenveld enkele voorbeelden van afbeeldingen zonder alt-tekst.
  • Als een afbeelding tekst bevat, ga dan na of de beschrijving dezelfde tekst bevat. Is dit niet het geval dan is het resultaat van deze test eveneens niet oké.

Voorbeelden

Decoratieve afbeeldingen

Voorbeelden van decoratieve afbeeldingen

Betekenisvolle afbeeldingen

Voorbeelden van betekenisvolle afbeeldingen

Grafische tekst

Voorbeelden van grafische tekst

Hoe testen?

Gebruik de Web Developer Toolbar voor Firefox om alle alt-teksten te tonen. Kies hiervoor Images > Display Alt Attributes.

Alt-attributen weergeven met de Web Developer Toolbar

Deze test kan enkel uitgevoerd worden in Firefox. Geschatte tijd: 10 minuten.

9. Is gesproken tekst in audio- en videofragmenten ook tekstueel beschikbaar?

Als de website geen audio- of videofragmenten bevat, hoef je deze test niet uit te voeren.

Ga na of de video- en audiofragmenten ondertiteld zijn, of er een transcript aanwezig is of minstens een uitgebreide samenvatting van de gesproken informatie. Als dit het geval is, is het resultaat van deze test oké. Als een alternatief ontbreekt, is het resultaat negatief.

Voorbeelden

Hoe testen?

Deze test kan uitgevoerd worden in om het even welke browser. Geschatte tijd: 10 minuten

10. Zijn formulieren gemarkeerd met de hiervoor bestemde HTML-tags?

Als de website geen formulieren bevat, hoef je deze test niet uit te voeren.

Tip: vaak kan je een formulier vinden op de contactpagina, op aanmeld- en bestelpagina's, zoekpagina's, enquêtes, poll's of een digitaal loket.

Hoe testen?

  1. Zoek op de site naar één of meerdere formulieren.
  2. Klik met de muis op de instructietekst die bij een formulierveld hoort. Bijvoorbeeld: Naam: (invoerveld).
  3. Het resultaat van deze test is oké als de cursor in het invoerveld terechtkomt. Hetzelfde geldt voor keuzerondjes en aankruisvakjes. Normaalgezien zou je op het vinkje klikken, maar op een toegankelijke site kan je ook op de tekst klikken om het vinkje in of uit te schakelen. Gebeurt er niets als je op de instructietekst klikt, dan is het resultaat van deze test niet oké.

Deze test kan uitgevoerd worden in om het even welke browser, uitgezonderd Safari 2 op het Mac-platform. Geschatte tijd: 12 minuten.

Voorbeelden

11. Zijn gegevenstabellen gemarkeerd met de hiervoor bestemde HTML-tags?

De meeste tabellen op websites zijn geen gegevenstabellen, maar opmaaktabellen die worden gebruikt om de pagina vorm te geven. Een tabel in de strikte zin van het woord is een matrix met informatie die een of meer celrijen of kolommen met hoofdingen bevat. Om de hoofdingen te markeren, moet een webdesigner TH tags gebruiken.

Als de site geen gegevenstabellen bevat, hoef je deze test niet uit te voeren.

Hoe testen?

  1. Installeer de Firefox-extensie Firebug
  2. Open Firebug via Extra > Firebug > Open Firebug.

    Firebug starten

  3. Hierdoor wordt een venster onderaan je scherm geopend waarin de broncode getoond wordt. In de optiebalk van Firebug kies je voor 'inspect'. Wanneer je nu je muis op een element in de pagina plaatst, krijg je automatisch de broncode ervan te zien.

  4. Als de hoofdingen van een tabel aangeduid zijn met een td-tag, is het resultaat van deze test niet oké. Als alle hoofdingen een th-tag hebben (zowel horizontaal als verticaal), is het wel goed.

Deze test kan het eenvoudigst uitgevoerd worden in Firefox. Geschatte tijd: 10 minuten

Voorbeelden

  1. Goed: Tarieven webhosting
  2. Goed: Tarieven vakantiehuisjes
  3. Niet goed: Hypotheekrente

12. Zijn koppen gemarkeerd met de hiervoor bestemde HTML-tags?

Om hypertekst toegankelijk te maken, volstaat het voor webdesigners niet om visueel aan te duiden wat een kop, een lijst of een citaat is. Men moet ook de bijbehorende structuurtags gebruiken die HTML hiervoor biedt. Voor koppen zijn dit de Hx tags (h1 t.e.m. H6).

Hoe testen?

  1. Open opnieuw Firebug en kies voor Inspect. Plaats de muis op de titels en tussentitels van enkele webpagina's.
  2. Als je een p-tag, een div-tag, een span-tag of iets anders ziet, is deze test negatief. Als je heading-tags ziet (h1, h2, h3, h4, h5 of h6), is het wel goed. Deze tags moeten elkaar ook op een logische manier opvolgen.

    Koppen bekijken met Firebug

  3. Voor een snel overzicht van alle koppen op een pagina kan je ook de Web Developer Toolbar gebruiken. Kies hiervoor Information > View Document Outline. In sommige gevallen zullen kopniveaus ontbreken ('Missing heading'), maar dat is geen reden om dit punt negatief te beoordelen; zolang de algemene structuur maar goed zit.

    Koppen bekijken met de Web Developer Toolbar

Deze test kan enkel uitgevoerd worden in Firefox. Geschatte tijd: 6 minuten.

13. Zijn lijsten gemarkeerd met de hiervoor bestemde HTML-tags?

Deze test is gebaseerd op dezelde filosofie als de test over koppen.

Hoe testen?

  1. Gebruik opnieuw Firebug ('Inspect'). Plaats de muis op een item in een lijst. Het kan zowel gaan om lijsten in de navigatie als om lijsten in de tekst (horizontaal of verticaal) Als je een li-tag ziet, is het resultaat van deze test oké. Als er geen li-tag te bespeuren is in de broncode, is het niet goed. Onderstaand voorbeelden zijn dus in orde.

    Lijsten bekijken met Firebug

  2. Een andere manier om snel te checken of een lijst correct gestructureerd is, is het tijdelijk uitschakelen van CSS. Dit kan je in de Web Developer Toolbar doen via CSS > Disable styles > All styles.

Voorbeelden

  1. Goed: Provincie Oost-Vlaanderen
  2. Goed: Logitech
  3. Niet goed: LCP Net

Deze test kan enkel uitgevoerd worden in Firefox. Geschatte tijd: 5 minuten

14. Zijn er alternatieven voor belangrijke paginaonderdelen in Flash?

Flash is ontoegankelijk voor blinden en sommige slechtzienden en mensen met andere beperkingen. Daarom is een toegankelijk alternatief noodzakelijk. Flash die decoratief gebruikt is (of als advertentie) is niet-betekenisvol en laten we daarom buiten beschouwing. Het gaat om essentiële functies of informatie die niet op een andere manier aangeboden wordt. Voorbeeld: het alternatief voor een liggingsplan in Flash kan bestaan uit een tekstuele routebeschrijving.

Hoe testen?

  1. Zoek Flash-objecten op de site. Je kan dit makkelijk achterhalen door rechts te klikken op zo’n animatie als je vermoed dat het om Flash gaat.
  2. Als ze er niet zijn of als het gaat om niet-essentiële onderdelen is deze test niet van toepassing. Als ze er zijn en ze hebben een goed alternatief, dan is deze test positief. Als er flash-objecten zijn zonder alternatief dan is deze test niet ok.

Deze test kan uitgevoerd worden in om het even welke browser. Geschatte tijd: 8 minuten.

Voorbeelden:

  1. Goed: 'In de kijker' op VRT.be
  2. Niet goed: Digitale Regio Kortrijk

15. Voldoet de website strikt aan de HTML-versie die aangegeven staat in de broncode?

Hoe testen?

  1. Gebruik de Web Developer Toolbar om de HTML-code te valideren. Kies voor Tools > Validate HTML. Deze optie opent een nieuwe pagina waarin u het resultaat van de test te zien krijgt.

    HTML valideren met de Web Developer Toolbar

  2. Voer deze test uit op de homepage en op een willekeurige andere pagina. Is het resultaat op een van deze pagina's 'Failed validation', dan is het resultaat van de test niet oké. Is het resultaat 'Passed validation', dan is het wel goed.

Deze test kan het eenvoudigst worden uitgevoerd worden in Firefox. Geschatte tijd: 5 minuten

16. Extra: biedt de website een toegankelijkheidsverklaring?

Bekijk de footer van de pagina, doorzoek de rubriek help of kijk bij ‘Over de site’ of 'Disclaimer' om te zien of er iets vermeld wordt over de toegankelijkheid (of 'accessibility') voor bezoekers met een handicap

Voorbeelden

  1. Toegankelijkheidsverklaring VDAB
  2. Accessibility statement op Druppels.be

17. Extra: hoeveel tijd heb je nodig gehad om deze screening uit te voeren?

Vermeld de tijd in het aantal minuten.

18. Extra: is de site beschikbaar in verschillende talen? Indien ja, welke?

Indien ja, dan is het resultaat van deze test oké. Vermeld in het veld voor opmerkingen in welke talen de website beschikbaar is.