Quickscan 2012

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. Installeer Firefox en de web developer add-on vooraleer je begint.

Inhoud

  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. Contrasteert de tekstkleur voldoende met de achtergrond?
  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

Pagina's hebben een betekenisvolle titel

2. Is de website bruikbaar met het toetsenbord?

Deze test gaat na of de site bedienbaar is als men enkel het toetsenbord kan hanteren. Leg je muis aan de kant en gebruik de tabtoets om van link naar link te springen. Shift + tab om terug te springen. Met de entertoets activeer je een link.

Aan dit punt is voldaan als je met de tabtoets elke link kunt bereiken en 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.
  • Keuzelijsten die gebruikmaken van een onchange-event zijn problematisch voor wie met het toetsenbord navigeert. De actie die aan het event gekoppeld is (het laden van een nieuwe pagina), wordt in Internet Explorer al bij de eerste toetsaanslag uitgevoerd. Hierdoor is het niet mogelijk om de volledige lijst te doorlopen met de pijltjestoetsen. Het toevoegen van een verzendknop (en het weghalen van de events) is een afdoende oplossing voor dit probleem. Controleer of keuzelijsten een bevestigingsknop hebben.
  • 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?

Als je wil testen met een browser in Mac OS, dien je eerst een instelling in de systeemvoorkeuren te veranderen. Het probleem met de keuzelijsten doet zich enkel voor 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, dropdownlijsten, Lightboxes of andere Javascript-gebaseerde elementen.
  3. Open enkele willekeurige links en probeer hetzelfde.

Meer informatie

Website is bruikbaar met het toetsenbord

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 omdat een toetsenbordgebruiker zich dan niet langer kan oriënteren. Het is zelfs aangeraden de focus extra te benadrukken om het navigeren makkelijker te maken.

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

Website is bruikbaar met het toetsenbord

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

Links zijn zichtbaar te onderscheiden

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

Linkteksten zijn betekenisvol

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

Beweging kan gestopt worden

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="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="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="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="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 webdeveloper add-on voor Firefox om alle alt-teksten te tonen. Kies hiervoor Images > Display Alt Attributes. Of kijk in de broncode om de alt-tekst 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

Labels en formuliervelden zijn verbonden

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

Bij het valideren wordt foutieve invoer gemarkeerd en tekstueel toegelicht

11. Contrasteert de tekstkleur voldoende met de achtergrond?

De tekstkleur moet voldoende contrasteren met de achtergrondkleur om een goede leesbaarheid 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 (zoals in Photoshop) een voor- en achtergrondkleur selecteren. De contrastverhouding tussen deze kleuren moet minstens 4,5:1 zijn. Het contrastratio vind je onder 'luminosity' of 'lichtsterkte'.

Slecht voorbeeld (www.esn.org)

Contrastverhouding meten

Meer informatie

Kleurcontrast is voldoende

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

Om teksten 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 heading-elementen (h1 t.e.m. h6).

Hoe testen?

Deze test voer je best uit in Firefox. Geschatte tijd: 6 minuten.

  • Voor een snel overzicht van alle koppen op een pagina gebruik je de Web developer add-on. Kies Outline > Outline Headings en vink ook 'Show Element Names When Outlining' aan.

    outline van koppen op w3c website

  • Een andere makkelijke manier om de semantische structuur van een pagina te testen, is de CSS uitschakelen. Kies CSS > Disable Styles > All Styles in de Web developer add-on. De browser toont de pagina dan zonder opmaak waardoor het duidelijk wordt of er koppen en lijsten zijn gebruikt.
  • Worden koppen op een hiërarchische manier gemarkeerd, dan is dit aan dit ijkpunt voldaan. Wanneer er geen koppen worden gebruikt of wanneer er geen logica in de volgorde van koppen zit, is dit ijkpunt niet oké.

Voorbeelden

  • Goed voorbeeld: De Morgen
  • Slecht voorbeeld: Wired (geen hiërarchische volgorde) en Bozar (geen koppen aanwezig)

Meer informatie

Pagina's zijn semantisch gestructureerd

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

Om makkelijk te checken of een lijst correct gemarkeerd is, kies je Outline > Outline Custom Elements… van de web developer add-on.

outline > dialoogvenster waarin je de elementen opgeeft die een outline moeten krijgen

Als je lijsten vindt zonder markering mag je dit ijkpunt afkeuren. Denk eraan dat navigatie-menu's ook altijd als een lijst moeten gemarkeerd zijn.

Voorbeelden

Meer informatie

Pagina's zijn semantisch gestructureerd

14. Zijn er alternatieven voor belangrijke paginaonderdelen in Flash?

Flash is onder andere niet toegankelijk voor screenreaders die blinden gebruiken. Daarom is een toegankelijk alternatief noodzakelijk. Flash die decoratief gebruikt wordt (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 vermoedt 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.

contextueel menu van Flash player

Voorbeelden:

  1. Goed: geschiedenis stad Mechelen
  2. Niet goed: Ei.be

Meer informatie

Flash

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 je 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 één 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

Broncode voldoet aan de specificatie