Quickscan

Laatst gewijzigd op 22/04/2024

De quickscan is een selectie van 15 tests waarmee je de basistoegankelijkheid van een website kan nagaan. De QuickScan vervangt geen volledige audit en kan niet garanderen dat een website toegankelijk is.

1. Zijn de paginatitels betekenisvol?

Controleer of de pagina's van de website een betekenisvolle titel hebben. De paginatitel moet de naam van de pagina en de naam van de website bevatten, bijvoorbeeld 'Contact - AnySurfer' of 'Openingsuren zwembad - Stad Leuven'.

Hoe de paginatitels controleren

Open 5 pagina's van de website in aparte tabs.
Zoek paginatitels:
- Ofwel in de tabs van de browser: beweeg met de muis over de tab van de browser om de hele titel te zien.
- Ofwel in de broncode: zoek het element <title> dat zich bevindt in de <head>.
Controleer de inhoud van elke titel. Een titel is niet OK
- Als hij niet de naam van de website bevat (bijvoorbeeld <title>Contact</title>)
- Als hij niet de naam van de pagina bevat (bijvoorbeeld <title>Stad Leuven</title>)
- Als hij niet uniek is: meerdere pagina's hebben dezelfde titel

Als alle titels OK zijn, is de test OK. Als minstens één van de titels niet OK is, is de test "niet OK".

2. Is de taal van de pagina's correct aangeduid?

Controleer of de taal van de pagina's correct is aangeduid, bijvoorbeeld lang="nl".

Hoe de taal van de pagina's controleren

Open een pagina van de website in een browser naar keuze.
Bekijk de broncode van de pagina met Ctrl+U (option+cmd+U op MacOS).
Zoek de html-tag helemaal bovenaan in de broncode en controleer of die een lang-attribuut bevat en of de waarde correct is.
```
<html lang="nl">
```
- Als er geen lang-attribuut in de html-tag staat, is het resultaat van de test "niet OK";
- Als er een lang-attribuut staat met een verkeerde waarde (bijvoorbeeld lang="en" op een pagina in het Nederlands), is het resultaat van de test "niet OK";
- Als er een lang-attribuut is en het is juist (bijvoorbeeld lang="nl" of lang="nl-be" of lang="nl-nl" op een pagina in het Nederlands), is het resultaat van de test OK voor deze pagina.
Als de website in meerdere talen bestaat, herhaal de test voor een pagina in alle talen van de website.

Als het resultaat "OK" is voor alle geteste pagina's, is het resultaat voor dit criterium OK. Als je minstens één fout hebt gevonden, is het resultaat van de test "niet OK".

3. Is de focus zichtbaar tijdens het tabben

Controleer of de focus zichtbaar is tijdens het tabben door de website.

Hoe de zichtbaarheid van de focus controleren

Mac-gebruikers moeten eerst de functie 'Volledige toetsenbordtoegang' activeren. Je vindt deze instelling via Systeeminstellingen > Toegankelijkheid > Toetsenbord > Schakel de optie Volledige toetsenbordtoegang in.

Open de startpagina.
Overloop de pagina met de tabtoets van het toetsenbord. Gebruik de muis (of het trackpad) helemaal niet. Gebruik enkel TAB om vooruit te gaan of Shift+TAB om terug te keren.
Bekijk wat er gebeurt:
- Als je de indruk hebt dat er niets gebeurt en dat je niet kan zien op welke link de focus zich bevindt, dan is de focus niet zichtbaar.
- Als de website goed is gemaakt, moet je duidelijk zien welk interactief element (link, knop, formulierveld) je selecteert met TAB. In Firefox wordt het meestal aangeduid met een blauwe rand rond een link, in Chrome is het een zwarte en witte rand.
  
  Soms heeft de webdesigner de focus nog beter zichtbaar gemaakt. Dat maakt niet uit, zolang je bij elke TAB kan zien naar waar de focus zich verplaatst.
Herhaal de test op een of twee pagina's en op een formulier.

Als de focus niet zichtbaar is op alle interactieve elementen van de pagina, is het resultaat van de test "niet OK". Als de focus altijd zichtbaar is bij elke TAB, is het resultaat van de test OK.

4. Is de website bruikbaar met het toetsenbord?

Controleer of de website bruikbaar is met het toetsenbord. Alles wat met de muis kan, moet ook mogelijk zijn met het toetsenbord.

Hoe toegankelijkheid met het toetsenbord controleren

Als de toetsenbordfocus visueel helemaal niet aangeduid is, kan je deze test niet uitvoeren en dan is het resultaat "niet OK". Als de toetsenbordfocus zichtbaar is tijdens het tabben, minstens bij een deel van de links, ga dan verder als volgt te werk:

Open de startpagina.
Ontkoppel de muis (of gebruik ze niet) en navigeer van link naar link met de tabtoets. Probeer de hele pagina te overlopen.
Controleer in het bijzonder de volgende punten:
- Als de website een uitklapmenu heeft, kan je de submenu's laten verschijnen met het toetsenbord (TAB en/of ENTER)?
- Werken alle klikbare elementen (knoppen, links) met ENTER,
- Lijkt de tabvolgorde logisch?
- Als er tooltips zijn die verschijnen als de muis erover beweegt, is het mogelijk om die informatie met het toetsenbord te laten verschijnen?

Als je met het toetsenbord bepaalde inhoud niet kan bereiken of sommige acties niet kan uitvoeren, is het resultaat van de test "niet OK". Het is OK als je alles kan doen met het toetsenbord.

5. Kan je animaties stoppen?

Controleer of alles wat beweegt, gestopt kan worden: slideshows, achtergrondvideo's, animated gifs of andere.

Hoe de animaties controleren

Overloop de website om animaties te vinden: slideshow, lichtkrant, video, animated gif, ... Deze komen het vaakst voor op de startpagina.
Controleer voor elke gevonden animatie of je ze kan stoppen of verbergen:
- Als het antwoord Ja is voor alle animaties, is het resultaat van de test OK.
- Als het antwoord Nee is voor minstens een animatie, is het resultaat van de test "niet OK".
- Als je geen bewegend element hebt gevonden, is het resultaat van de test "niet van toepassing"

6. Zijn links gemakkelijk herkenbaar?

Controleer of de links in doorlopende tekst zich goed onderscheiden van de rest van de tekst, anders dan door de kleur. Het volstaat niet een verschillende kleur te gebruiken voor de links.

Hoe de zichtbaarheid van links controleren

Zoek een pagina met links die midden in de tekst staan. Deze test gaat niet over links in navigatiemenu's. Als je geen links in doorlopende tekst vindt, is het resultaat van de test "Niet van toepassing"
Bekijk hoe de links zich onderscheiden van de rest van de tekst:
- Als ze enkel een verschillende kleur hebben, is het niet OK (zie voorbeeld hieronder)
- Het is Ok als ze onderlijnd zijn, gemarkeerd zijn, of als ze zich op een andere manier van de tekst onderscheiden dan met een afwijkende kleur.

7. Zijn linkteksten betekenisvol?

Controleer of linkteksten betekenisvol zijn. Dat betekent dat ze de bestemming van de link aangeven.

Hoe linkteksten controleren

Open meerdere pagina's van de website.
Bekijk de linkteksten:
- Als je de bestemming van de link kan afleiden buiten zijn context (bijvoorbeeld 'Contact' of 'openingsuren van het zwembad'), is het resultaat van de test 'OK'.
- Als je een linktekst vindt die de bestemming van de link niet aangeeft (bijvoorbeeld 'Klik hier' of 'Download'), is het resultaat van de test 'niet OK'.

8. Hebben afbeeldingen een tekstalternatief?

Controleer of afbeeldingen een correct tekstalternatief hebben. Je moet de inhoud van de pagina kunnen begrijpen als je de afbeelding vervangt door het tekstalternatief.

Hoe tekstalternatieven van afbeeldingen controleren

Zoek enkele pagina's die afbeeldingen bevatten. Denk aan foto's, maar ook aan iconen zoals het vergrootglas van de zoekknop of de logo's van sociale media.
Gebruik de web developer extension, selecteer afbeeldingen > toon alt-attributen.
Voor de afbeeldingen die een alt-attribuut hebben, verschijnt het alt-attribuut, bijvoorbeeld alt="" of alt="Facebook". Controleer of het alt-attribuut correct is. Stel de vraag of de pagina altijd begrijpbaar is als je de afbeeldingen vervangt door hun alt-attribuut.
- Het is OK als de afbeelding een alt-attribuut heeft en als zijn inhoud kan dienen als vervanging voor de afbeelding.
- Het is niet OK als een klikbare afbeelding een leeg alt-attribuut heeft.
- Het is niet OK als de inhoud van het alt-attribuut zinloos is.
- Bepaalde afbeeldingen hebben geen alt-attribuut, maar het is mogelijk dat ze een tekstalternatief hebben gekregen met een andere techniek. Ga naar het volgende punt.
Als een afbeelding geen alt-attribuut heeft, inspecteer de afbeelding in de devtools (klik rechts > inspecteren). Open dan de tab "toegankelijkheid" en zoek afbeelding in de 'accessibility tree.

9. Zijn video's ondertiteld?

Controleer of video's ondertiteld zijn en of de ondertitels juist zijn.

Hoe controleren of video's ondertiteld zijn

Overloop de website om video's te vinden. Als je geen video gevonden hebt, is het resultaat van de test "Niet van toepassing"
Start elke video en controleer of er ondertitels zijn. Als je geen ondertitels ziet voor de gesproken tekst, controleer of er geen optie is om de ondertitels te activeren (soms worden ze standaard niet getoond): in YouTube is er een knop om de ondertitels te (des)activeren. In de instellingen is er ook een knop om de taal van de ondertitels te selecteren. Selecteer de ondertitels in de taal van de video (bijvoorbeeld, Nederlands).
- Als er geen ondertitels zijn voor alle gesproken tekst, is het resultaat van de test "niet OK"
- Als de video enkel beelden bevat en geen geluid (behalve muziek), is het normaal dat er geen ondertitels zijn, en is het resultaat van de test OK.
- Als de video ondertitels heeft maar als ze niet overeenkomen met de tekst van de video, is het resultaat van de test "niet OK". Dit is vaak het geval bij automatische ondertitels.

10. Is het contrast tussen tekst en achtergrond voldoende?

Controleer of alle tekst voldoende contrasteert met de achtergrond.

Hoe contrasten controleren

Open de startpagina en enkele andere pagina's.
Meet de contrasten voor de verschillende kleurcombinaties van tekst en achtergrond met de Colour Contrast Analyser. Met het pipet kan je de kleur van de tekst selecteren en dan die van de achtergrond (zie voorbeeld hieronder).
Als je een tekst vindt waarvoor het contrast minder is dan 4,5, is het resultaat van de test "niet OK". Anders is het OK.

11. Zijn de titels met de juiste HTML-elementen gemarkeerd?

Controleer of de titels goed zijn aangeduid met elementen als h1, h2, h3 enz. en of de hiërarchie van de titels klopt.

Hoe controleren of titels goed gecodeerd zijn

Open de startpagina en enkele andere pagina's.
Bekijk elke pagina en focus op de titels in de inhoud
Voor elke titel, controleer of het in de broncode echt een titel is, via een van deze methodes:
- Inspecteer de broncode, bijvoorbeeld met de devtools van de browser: klik rechts op de titel en selecteer de optie "inspecteren".
- Gebruik de web developer extension: Outline > Outline Headings. Vink ook aan 'Outline > Show Element Tag Names. Nu zijn de titels omkaderd en is het titelniveau aangeduid.
Beoordeel het resultaat:
- Als je elementen vindt die visueel titels zijn, maar die in de broncode geen h1, h2, h3, h4, h5 of h6 element zijn, is het resultaat van de test "niet OK".
- Als de structuur van de titels niet juist is (bijvoorbeeld een hoofdtitel h2 en een ondertitel h1), is het resultaat van de test "niet OK"
- Als h1, h2, enz. elementen gebruikt zijn voor inhoud die geen titel is, is het resultaat van de test "niet OK"

12. Zijn lijsten met de juiste HTML-elementen gemarkeerd?

Hoe controleren of lijsten goed gecodeerd zijn

Controleer of alle navigatiemenu's en lijsten in de inhoud gecodeerd zijn met HTML-lijsten.

Open de startpagina en zoek één of twee pagina's die lijsten bevatten in de inhoud.
Inspecteer de code van de verschillende navigatiemenu's
- Als elk element van het menu in een li-tag staat, en als de li's goed zijn genest in een ul, is het resultaat van de test OK. Zie voorbeeld hieronder.
- Als de links van het menu geen li-elementen hebben, is het resultaat van de test "niet OK".
Inspecteer op dezelfde manier de code van de lijsten in de inhoud:
- Als elk lijstelement in een li-tag staat, en als de li's goed genest zijn in een ul, is het resultaat van de test OK.
- Als je lijsten in de inhoud vindt die niet gecodeerd zijn met li-tags, is het resultaat van de test "niet OK".

13. Zijn formuliervelden verbonden met hun label?

Controleer of alle formuliervelden goed verbonden zijn met hun instructie.

Hoe controleren of de velden goed gelabeld zijn

Zoek één of meer formulieren in de website. Als je er geen vindt, is het resultaat van de test "Niet van toepassing".
Als het formulierveld geen label heeft of geen tekst die uitlegt wat je moet invullen in het veld (voorbeeld: enkel een placeholder), dan is het resultaat van de test 'niet OK.
Voor elk formulierveld, controleer of het goed is verbonden met zijn label, met één van de methodes hieronder
- Klik op het zichtbare label van het veld: als de cursor naar het veld verplaatst, is het label goed verbonden met het veld.
- Inspecteer de code: een label is enkel goed verbonden met zijn formulierveld als het label een for-attribuut bevat waarvan de waarde gelijk is aan die van het id-attribuut van het veld. Voorbeeld:
```
<label for="naam">naam</label>
<input type="text" id="naam"/>
```

Als je minstens één formulierveld vindt dat niet goed is verbonden met zijn label, is het resultaat van de test "niet OK".

14. Zijn de resultaten van de formuliervalidatie uitgelegd in tekst?

Controleer bij de formuliervalidatie of de fouten goed zijn beschreven .

Hoe formuliervalidatie controleren

Zoek een pagina met een formulier. Klik om het formulier te verzenden zonder de verplichte velden in te vullen of met ongeldige gegevens.
Controleer de resultaten:
- Als de fouten enkel visueel zijn aangeduid, is het resultaat van de test negatief (bijvoorbeeld, tekst of rode rand).
- Als de fouten zijn opgesomd in tekst bovenaan het formulier (of in de buurt van het veld), met verwijzing naar de naam van elk veld en de aard van de fout, is het resultaat van de test OK.

15. Past de inhoud van de pagina zich aan aan de breedte van het venster?

Slechtzienden kunnen de pagina inzoomen via een ingebouwde functie van de browser. Bij een hoog vergrotingpercentage moet de inhoud zich herschikken in één kolom, zonder dat er een horizontale schuifbalk verschijnt. Zonder deze herschikking of reflow moet de gebruiker horizontaal scrollen, wat de leessnelheid aanzienlijk verlaagt.

Hoe de reflow controleren

Maximaliseer het browservenster.
Gebruik de ingebouwde functie van de browser om de inhoud te vergroten. Ctrl + in Windows of Cmd + in macOS.
Zoom tot 400%, Chrome toont het percentage in de adresbalk.
Als alle inhoud leesbaar is (geen overlap) en er geen enkele horizontale scrollbalk verschijnt bij 400% zoom, is dit punt in orde. Als je het scherm naar links of rechts moet scrollen om de inhoud te lezen of als de tekst overlapt of verdwijnt, is dit punt niet in orde.
Voer deze test uit op de startpagina en op 2-3 andere pagina's.

Voorbeeld pagina Accessibility Inspector van het Mozilla Developper Network met een zoom van 100% en een zoom van 400%.

Met een zoom van 400% is er geen overlap. Alles is leesbaar en herschikt in een kolom zonder horizontale scroll. Deze pagina is dus OK.

Meer informatie Understanding Succescriterium 1.4.10: Reflow

Reacties

Reageer als eerste