Quickscan 2010

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.

Inhoud

  1. Heeft iedere pagina een betekenisvolle titel?
  2. Is de website bruikbaar zonder muis?
  3. Zijn links duidelijk te onderscheiden van andere tekst?
  4. Zijn links betekenisvol?
  5. Kan bewegende inhoud worden stopgezet?
  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. Voldoet de website strikt aan de HTML-versie die aangegeven staat in de broncode?

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'

Voorbeelden op het web

Hoe testen?

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

  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.

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 u 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.
  • 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.

Hoe testen?

Opgelet. Deze test dient uitgevoerd te worden in Internet Explorer. Geschatte tijd: 15 minuten.

  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.

3. Zijn links 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.

Slecht voorbeeld

screenshot paragraaf met rode links in doorlopende zwarte tekst

Hoe testen?

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

  1. Zoek een drietal pagina's die links bevatten die voorkomen in doorlopende tekst.
  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.

4. Zijn linkteksten betekenisvol?

Links moeten betekenisvol of informatiedragend zijn. Ze moeten ondubbelzinnig weergeven wat de bestemming van een link is.

Voorbeelden van onbetekenisvolle links

Toegestane uitzondering

Bij korte nieuwsberichten hoort vaak een 'Lees verder' link. Op zichzelf is de linktekst 'Lees verder' niet informatiedragend, maar als op dezelfde pagina ook een tweede, duidelijke link met hetzelfde doel aanwezig is, zijn dergelijke links toch toegestaan. Dat is vaak het geval wanneer de titel van het bericht naar dezelde pagina leidt als de 'Lees verder' link.

Hoe testen?

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

  1. Overloop de linkteksten op een vijftal willekeurige pagina's en stel jezelf telkens de vraag: Wat is de bestemming van deze link?
  2. Als je de links buiten de context van de pagina plaatst en je weet nog steeds waar ze naartoe leiden, is de test geslaagd.

5. Kan bewegende inhoud worden stopgezet?

Animaties of andere inhoud op een webpagina die start zonder toestemming van de gebruiker en langer duurt dan drie seconden moet kunnen stopgezet worden. Dit kan bijvoorbeeld een lichtkrant zijn, een animated gif, een flashmovie of een slideshow.

Toegestane uitzondering

Een uitzondering op dit ijkpunt is toegestaan voor animaties die afkomstig zijn van adverteerders.

Voorbeelden

Hoe testen?

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

  1. Zoek bewegende inhoud op de site.
  2. Wanneer bewegende inhoud binnen de drie seconden stopt, is aan deze richtlijn voldaan.
  3. Wanneer ze langer dan drie seconden duurt (bijvoorbeeld in een oneindige lus), moet de gebruiker in staat zijn de beweging stop de zetten of te verbergen.

6. Treden bij vergroting geen overlappingen op?

Wanneer een bezoeker de tekengrootte aanpast met behulp van de ingebouwde voorzieningen van de browser, mogen er geen overlappingen ontstaan die de leesbaarheid verminderen.

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.

Voorbeelden

screenshot overlappende navigatie op lommel.be

Hoe testen?

Opgelet. Deze test dient uitgevoerd te worden in Firefox. Zet eerst de optie "Beeld > Zoomen > Alleen tekst zoomen" in de menubalk aan. Geschatte tijd: 5 minuten.

  1. Vergroot de tekst op de homepage en op een willekeurige andere pagina van de site via de browservoorzieningen van Firefox (ctrl ++ voor Windows, cmd ++ op Mac).
  2. Als deze vergroting overlappingen veroorzaakt die de leesbaarheid in het gedrang brengen, is aan deze richtlijn niet voldaan.

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?

Deze test kan uitgevoerd worden in eender welke browser. Geschatte tijd: 10 minuten

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 4,5:1 zijn.

Contrastverhouding meten

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 het alt-attribuut 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?

Deze test wordt bij voorkeur uitgevoerd in Firefox. Geschatte tijd: 10 minuten.

Gebruik de Web Developer Toolbar voor Firefox om alle alt-teksten te tonen. Kies hiervoor Images > Display Alt Attributes. Of gebruik Firebug om de alt-tekst in de broncode op te zoeken.

Alt-attributen weergeven met de Web Developer Toolbar

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

De inhoud van audio- en videofragmenten moet ook als tekst beschikbaar zijn. Mensen die het geluid niet horen of de video niet zien, krijgen zo toegang tot dezelfde informatie. Als de website geen audio- of videofragmenten bevat, hoef je deze test niet uit te voeren.

Voorbeelden

Hoe testen?

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

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

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

Formulieren op internet bestaan enerzijds uit formuliervelden (zoals invoervelden, keuzerondjes, aankruisvakjes en keuzelijsten) en anderzijds uit instructies of labels, die informatie geven bij een formulierveld. Het volstaat niet om labels in de buurt van een veld te plaatsen; ze moeten ook expliciet verbonden zijn met behulp van het label-element. Als de website geen formulieren bevat, hoef je deze test niet uit te voeren.

Hoe testen?

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

  1. Zoek op de site naar één of meerdere formulieren. Vaak kan je een formulier vinden op de contactpagina, op aanmeld- en bestelpagina's, zoekpagina's, enquêtes, poll's of een digitaal loket.
  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é.

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 table headers gebruiken.

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

Hoe testen?

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

  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.

    tabelhoofding inspecteren met firebug

  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.

Voorbeelden

  1. Goed: Tarieven webhosting
  2. Niet goed: Autozine

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 Headingtags (h1 t.e.m. H6).

Hoe testen?

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

  1. Open opnieuw Firebug en kies voor Inspecteren. 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

Voorbeelden

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

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

Hoe testen?

Deze test wordt bij voorkeur uitgevoerd in Firefox. Geschatte tijd: 5 minuten

  1. Gebruik opnieuw Firebug ('Inspecteren'). 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. Onderstaande 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: Rotselaar (het menu is niet opgemaakt als een geneste lijst)

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?

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

  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.

screenshot rock werchter

Voorbeelden:

  1. Goed: Digitale Regio Kortrijk en nieuws.be
  2. Niet goed: Ei.be

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

Hoe testen?

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

  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.

    screenshot web developer toolbar, optie validate HTML

    voorbeeld geslaagd validatierapport van het W3C

  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.