Quickscan 2011

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 enkele typische inhoudspagina's. Testtools vergemakkelijken het screenen.

Inhoudsopgave

  1. Heeft iedere pagina een betekenisvolle titel?
  2. Is de website bruikbaar zonder muis?
  3. Is de focus zichtbaar bij toetsenbordnavigatie?
  4. Zijn links duidelijk te onderscheiden van andere tekst?
  5. Zijn links betekenisvol?
  6. Kan bewegende inhoud worden stopgezet?
  7. Hebben alle afbeeldingen een alternatieve beschrijving?
  8. Is gesproken tekst in audio- en videofragmenten ook tekstueel beschikbaar?
  9. Zijn formulieren gemarkeerd met de hiervoor bestemde HTML-tags?
  10. Is er tekstuele hulp na het verkeerd invullen van een formulier?
  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.

Meer informatie

2. Is de website bruikbaar met het toetsenbord?

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.
    • Slecht voorbeeld: Predictor
    • Goed voorbeeld: W3C (landkeuze rechts boven)
  • Lightboxes: vergroot een afbeelding in een soort venster of pop-up zonder de pagina te vernieuwen. Kan je de Lightbox openen, sluiten en navigeren tussen de afbeeldingen met het toetsenbord?

Hoe testen?

Opgelet. Deze test dient uitgevoerd te worden in Internet Explorer. Als je wil testen met een browser in Mac OS, dien je eerst een instelling in de systeemvoorkeuren te veranderen. 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, dropdownlijsten, Lightboxes of andere Javascript-gebaseerde elementen.
  3. Open een willekeurige link en probeer hetzelfde.

Meer informatie

3. Is de focus zichtbaar bij toetsenbordnavigatie?

Wanneer een bezoeker doorheen een website navigeert met het toetsenbord, verplaats de focus zich van link naar link binnen de pagina. De browser plaatst standaard een kader (vb. Safari en Opera) of een stippellijn (vb. Internet Explorer en Firefox) rond het element dat de focus heeft. Het is mogelijk die aanduiding via CSS onzichtbaar te maken. Dat is niet toegelaten aangezien men zich dan niet langer kan oriënteren. Het is zelfs aangeraden de focus extra te benadrukken om het makkelijker te maken voor toetsenbordgebruikers.

Voorbeelden

Hoe testen?

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

  1. Doorloop de website met het toetsenbord (tab, shift-tab en enter).
  2. Als je op elk moment ziet welke link de focus heeft, is aan dit punt voldaan.

Meer informatie

4. 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

zelfde screenshot in grijswaarden

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.

Meer informatie

5. 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.

Meer informatie

6. 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

  • Slecht voorbeeld: NMBS (nieuwsbalk bovenaan de pagina)
  • Goed voorbeeld: Cunina

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.

Meer informatie

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

vrouw met koptelefoon

<img src="/backend/nl/pages/helpdesk.jpg" alt="" />

een penseel, printer en mannetje met vergrootglas bij teksten over diensten van een bedrijf

  • <img src="/backend/nl/pages/huisstijl.jpg" alt="" />
  • <img src="/backend/nl/pages/drukwerk.jpg" alt="" />
  • <img src="/backend/nl/pages/advies.jpg" alt="" />

Betekenisvolle afbeeldingen

Eddy Wally in een bontjas

<img src="/backend/nl/pages/eddy.jpg" alt="Eddy Wally in een bontjas" />

kaart van België met provinciegrenzen

Grafische tekst

Een vraagje? Bel gratis 1700, elke werkdag van 9 tot 19 uur

<img src="/backend/nl/pages/1700_logo.jpg" alt="Een vraagje? Bel gratis 1700, elke werkdag van 9 tot 19 uur" />

Vlaanderen.be uw startpagina voor de Vlaamse overheid

<img src="/backend/nl/pages/banner_vlaanderen.png" alt="Vlaanderen.be uw startpagina voor de Vlaamse overheid" />

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.

Meer informatie

8. 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.

Meer informatie

9. 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

Meer informatie

10. Is er tekstuele hulp na het verkeerd invullen van een formulier?

Wanneer de bezoeker een fout maakt bij het invullen van een formulier, moet de aard (vb, wachtwoord moet minstens 6 tekens bevatten) en de plaats van deze fout vermeld worden. Dit mag niet enkel visueel aangeduid zijn, bijvoorbeeld door dit veld in het rood te markeren.

Voorbeelden

Goed voorbeeld van tekstuele vermelding boven het formulier

screenshot opsomming van verkeerd invulde velden

Goed voorbeeld van tekstuele vermelding in het formulier

screenshot vermelding van fout veld in het formulier

Slecht voorbeeld met enkel een visuele markering

screenshot formulier met rood gemarkeerde velden

Hoe testen?

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

  1. Zoek een formulier, laat alle velden leeg of vul velden verkeerd in en verzend daarna het formulier.
  2. Als de fouten enkel visueel zijn gemarkeerd, is de website niet geslaagd. Bijvoorbeeld, de labels en/of velden zijn in het rood gezet.
  3. Als de fouten boven het formulier in tekst zijn opgesomd, is aan dit punt voldaan. Zowel de naam van het veld en de soort van fout moet vermeld worden. Een tekstuele vermelding bij de velden in plaats van boven het formulier is ook toegestaan. Een combinatie van beide is het meest toegankelijk en gebruiksvriendelijk.

Meer informatie

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 headersgebruiken.

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 de Lijn
  2. Niet goed: Autozine

Meer informatie

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

Meer informatie

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

    Lijst op provant.be

  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)

Meer informatie

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: stad Mechelen
  2. Niet goed: Ei.be

Meer informatie

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.

    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.

Meer informatie