Voorbeeld WCAG-onderzoek

Volledig onderzoek van de website Voorbeeldwebsite van Voorbeeldorganisatie (https://voorbeeld.nl).

  • Opdrachtgever: Voorbeeldorganisatie
  • Onderzoeker: Niek Derksen, WCAG.nl
  • Datum: 1 januari 2022
  • Soort onderzoek: Volledig onderzoek website
  • Norm: WCAG 2.1 niveau AA
  • Versie van het onderzoek: 1.0

Inhoudsopgave

  1. Samenvatting
  2. Gegevens
  3. Resultaten
  4. Schermafbeeldingen
  5. Steekproef
  6. Technologieën
  7. Onderbouwing
  8. Uitvoering
  9. Referenties

Samenvatting

In dit rapport staan de resultaten van het onderzoek naar de toegankelijkheid van de website Voorbeeldwebsite van Voorbeeldorganisatie. De resultaten laten zien aan welke eisen van de Web Content Accessibility Guidelines (WCAG) wordt voldaan. Op het moment van onderzoeken voldoet de steekproef aan 46 van de 50 succescriteria.

Veel onderdelen van de website zijn goed toegankelijk:

  • filmpjes hebben goede ondertitels;
  • tekst kan goed worden herschaald;
  • alle functionaliteit is goed te bedienen met het toetsenbord;
  • webpagina’s hebben een goede paginatitel;
  • links hebben goede linkteksten;
  • en de taal van de website is goed ingesteld.

Maar er zijn er ook verbeterpunten gevonden:

  • niet-tekstuele content heeft nog niet overal goede tekstalternatieven;
  • er wordt nog niet overal genoeg contrast gebruikt;
  • herhalende blokken met content kunnen nog niet worden overgeslagen;
  • en de code wordt nog niet overal gebruikt volgens de specificatie.

Het onderzoek is afgerond op 1 januari 2022 en is handmatig uitgevoerd door een ervaren onderzoeker. Omdat het onderzoek een momentopname is, kan het zijn dat de website in de tussentijd is veranderd. Hierdoor kunnen mogelijk nieuwe problemen zijn ontstaan.

Het onderzoek is uitgevoerd op een steekproef van alle webpagina’s. Deze steekproef is representatief voor alle content. Omdat het onderzoek uit een steekproef bestaat, kan het zijn dat niet alle problemen op de website zijn gevonden. Een volgend onderzoek kan dus anders wordt beoordeeld.

De technische termen en ingewikkelde woorden die worden gebruikt in dit rapport worden uitgelegd in de begrippenlijst.

Gegevens

Website naam

Voorbeeldwebsite

Scope

In de scope:

  • Alle content op https://www.voorbeeld.nl/.

Niet in de scope:

  • Content op het subdomein https://afspraak.voorbeeld.nl/.
  • Content die valt onder kantoorbestandsformaten en die valt onder de wettelijke uitzondering.
  • Content die valt onder vooraf opgenomen of live uitgezonden, op tijd gebaseerde media en die valt onder de wettelijke uitzondering.
  • Content die valt onder onlinekaarten en onlinekarteringsdiensten en die valt onder de wettelijke uitzondering.

Conformiteit

De website is onderzocht op conformiteit aan WCAG 2.1 niveau AA.

Uitzonderingen

Afwijkingen die vallen onder de uitzonderingen in het Tijdelijk besluit digitale toegankelijkheid overheid worden niet opgenomen in de bevindingen van dit rapport.

Lees meer over de uitzonderingen

Ondersteuning

De website is onderzocht op ondersteuning voor gangbare browsers en hulptechnologieën.

Vereisten

  • De website is onderzocht volgens de evaluatiemethode WCAG-EM.
  • In het rapport wordt een volledige lijst van de gevonden problemen opgenomen, in plaats van slechts enkele voorbeelden.
  • In het rapport wordt een omschrijving van de verbeterpunten gegeven, samen met maatregelen voor het oplossen van de verbeterpunten.

Resultaten

In dit rapport wordt gerapporteerd over alle 50 succescriteria van een volledig onderzoek website op WCAG 2.1 niveau AA. Resultaten van het onderzoek:

  • 39 voldoende
  • 4 onvoldoende
  • 7 niet van toepassing
  • 0 niet getoetst

Principe 1: Waarneembaar

Richtlijn 1.1 Tekstalternatieven

Succescriterium 1.1.1 Niet-tekstuele content

Resultaat: Onvoldoende

Bevindingen voor de webpagina Beginpagina
  1. Op de pagina staat een infographic in het onderdeel ”Richtlijnen voor toegankelijkheid van webcontent”. Dit is een complexe afbeelding. Deze afbeelding heeft geen tekstalternatief.
    • Gevolg: Deze content is minder toegankelijk voor mensen die gebruik maken van een schermlezer, zoals voorleessoftware of een brailleleesregel.
    • Maatregel: Beschrijf de afbeelding beknopt in het tekstalternatief. Geef ook een uitgebreide beschrijving in de omringende tekst of eventueel op een aparte pagina. Beschrijf alle tekst en informatie van de afbeelding.
    • Verantwoordelijke: Redacteur
  2. Op de pagina staan 3 logo’s in het onderdeel ”Wet digitale overheid”. Dit zijn informatieve afbeeldingen. Deze afbeeldingen hebben geen tekstalternatief. Het <img>-element heeft geen alt-attribuut.
    • Code: <img src="logo.jpg" ... >
    • Schermafbeelding: Figuur 1: Logo’s zonder tekstalternatief.
    • Gevolg: Deze content is minder toegankelijk voor mensen die gebruik maken van een schermlezer, zoals voorleessoftware of een brailleleesregel.
    • Maatregel: Een tekstalternatief voor een <img>-element wordt toegevoegd met het alt-attribuut. Beschrijf in het tekstalternatief alle tekst van het logo.
    • Verantwoordelijke: Redacteur

Lees meer over tekstalternatieven


Richtlijn 1.2 Op tijd gebaseerde media

Succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)

Resultaat: Niet van toepassing

Succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Resultaat: Voldoende

Succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Resultaat: Voldoende

Succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)

Resultaat: Niet van toepassing

Succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Resultaat: Voldoende


Richtlijn 1.3 Aanpasbaar

Succescriterium 1.3.1 Info en relaties

Resultaat: Voldoende

Succescriterium 1.3.2 Betekenisvolle volgorde

Resultaat: Voldoende

Succescriterium 1.3.3 Zintuiglijke eigenschappen

Resultaat: Voldoende

Succescriterium 1.3.4 Weergavestand

Resultaat: Voldoende

Succescriterium 1.3.5 Identificeer het doel van de input

Resultaat: Voldoende


Richtlijn 1.4 Onderscheidbaar

Succescriterium 1.4.1 Gebruik van kleur

Resultaat: Voldoende

Succescriterium 1.4.2 Geluidsbediening

Resultaat: Voldoende

Succescriterium 1.4.3 Contrast (minimum)

Resultaat: Onvoldoende

Bevindingen voor het document Algemene voorwaarden (PDF)
  • In het document staat op pagina 1 de tekst “23 september 2019”. Deze tekst heeft niet genoeg contrast. Contrastverhouding van 2.8:1 gemeten (#999999 op #FFFFFF (benadering)).
    • Gevolg: Deze content is minder toegankelijk voor mensen die slechtziend of kleurenblind zijn.
    • Maatregel: Gebruik een contrastverhouding van minimaal 4.5:1 voor tekst.
    • Verantwoordelijke: Redacteur of vormgever.
Succescriterium 1.4.4 Herschalen van tekst

Resultaat: Voldoende

Succescriterium 1.4.5 Afbeeldingen van tekst

Resultaat: Voldoende

Succescriterium 1.4.10 Reflow

Resultaat: Voldoende

Succescriterium 1.4.11 Contrast van niet-tekstuele content

Resultaat: Voldoende

Succescriterium 1.4.12 Tekstafstand

Resultaat: Voldoende

Succescriterium 1.4.13 Content bij hover of focus

Resultaat: Voldoende


Principe 2: Bedienbaar

Richtlijn 2.1 Toetsenbordtoegankelijk

Succescriterium 2.1.1 Toetsenbord

Resultaat: Voldoende

Succescriterium 2.1.2 Geen toetsenbordval

Resultaat: Voldoende

Succescriterium 2.1.4 Enkel teken sneltoetsen

Resultaat: Niet van toepassing


Richtlijn 2.2 Genoeg tijd

Succescriterium 2.2.1 Timing aanpasbaar

Resultaat: Niet van toepassing

Succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Resultaat: Voldoende


Richtlijn 2.3 Toevallen en fysieke reacties

Succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde

Resultaat: Voldoende


Richtlijn 2.4 Navigeerbaar

Succescriterium 2.4.1 Blokken omzeilen

Resultaat: Onvoldoende

Algemene bevindingen
  • Op de website is geen mechanisme beschikbaar om herhalende blokken content te omzeilen. Er worden geen skiplinks gebruikt.
    • Gevolg: Deze content is minder toegankelijk voor mensen die gebruik maken van het toetsenbord en mensen die gebruik maken van een schermlezer, zoals voorleessoftware of een brailleleesregel.
    • Maatregel: Voeg skiplinks toe aan alle pagina’s van de website.
    • Verantwoordelijke: Ontwikkelaar.

Lees meer over skiplinks

Succescriterium 2.4.2 Paginatitel

Resultaat: Voldoende

Succescriterium 2.4.3 Focus volgorde

Resultaat: Voldoende

Succescriterium 2.4.4 Linkdoel (in context)

Resultaat: Voldoende

Succescriterium 2.4.5 Meerdere manieren

Resultaat: Voldoende

Succescriterium 2.4.6 Koppen en labels

Resultaat: Voldoende

Succescriterium 2.4.7 Focus zichtbaar

Resultaat: Voldoende


Richtlijn 2.5 Input modaliteiten

Succescriterium 2.5.1 Aanwijzergebaren

Resultaat: Voldoende

Succescriterium 2.5.2 Aanwijzerannulering

Resultaat: Voldoende

Succescriterium 2.5.3 Label in naam

Resultaat: Voldoende

Succescriterium 2.5.4 Bewegingsactivering

Resultaat: Niet van toepassing


Principe 3. Begrijpelijk

Richtlijn 3.1 Leesbaar

Succescriterium 3.1.1 Taal van de pagina

Resultaat: Voldoende

Succescriterium 3.1.2 Taal van onderdelen

Resultaat: Voldoende


Richtlijn 3.2 Voorspelbaar

Succescriterium 3.2.1 Bij focus

Resultaat: Voldoende

Succescriterium 3.2.2 Bij input

Resultaat: Voldoende

Succescriterium 3.2.3 Consistente navigatie

Resultaat: Voldoende

Succescriterium 3.2.4 Consistente identificatie

Resultaat: Voldoende


Richtlijn 3.3 Assistentie bij invoer

Succescriterium 3.3.1 Fout identificatie

Resultaat: Voldoende

Succescriterium 3.3.2 Labels of instructies

Resultaat: Voldoende

Succescriterium 3.3.3 Foutsuggestie

Resultaat: Voldoende

Succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)

Resultaat: Niet van toepassing


Principe 4. Robuust

Richtlijn 4.1 Compatibel

Succescriterium 4.1.1 Parsen

Resultaat: Onvoldoende

Bevindingen voor de webpagina Beginpagina
  1. De elementen in de code zijn niet genest volgens de specificatie. Een <h2>-element mag niet worden gebruikt als onderliggend element van een <button>-element.
    • Code: <button><h2>...</h2></button>
    • Gevolg: Deze content is mogelijk minder toegankelijk voor mensen die gebruik maken van hulptechnologieën, zoals voorleessoftware of een brailleleesregel.
    • Maatregel: Zorg dat elementen op een geldige plek in de code staan.
    • Verantwoordelijke: Ontwikkelaar
  2. De code wordt niet toegepast volgens de specificatie. Er wordt een <span>-element geopend maar niet gesloten.
    • Code: <p><span class="opmaak">...</p>
    • Gevolg: Deze content is mogelijk minder toegankelijk voor mensen die gebruik maken van hulptechnologieën, zoals voorleessoftware of een brailleleesregel.
    • Maatregel: Gebruik volledige begin- en eindtags.
    • Verantwoordelijke: Ontwikkelaar.
Bevindingen voor de webpagina Niet gevonden
  • De elementen in de code zijn niet genest volgens de specificatie. Het alt-attribuut mag niet worden gebruikt op een <button>-element.
    • Gevolg: Deze content is mogelijk minder toegankelijk voor mensen die gebruik maken van hulptechnologieën, zoals voorleessoftware of een brailleleesregel.
    • Maatregel: Zorg dat elementen op een geldige plek in de code staan.
    • Verantwoordelijke: Ontwikkelaar.
Succescriterium 4.1.2 Naam, rol, waarde

Resultaat: Voldoende

Succescriterium 4.1.3 Statusberichten

Resultaat: Niet van toepassing

Schermafbeeldingen

Logo's zonder tekstalternatief
Figuur 1: Logo’s zonder tekstalternatief
<button>-element met een alt-attribuut
Figuur 2: <button>-element met een alt-attribuut

Steekproef

De onderzochte pagina’s van de website:

  1. Beginpagina
    https://voorbeeld.nl/
  2. Niet gevonden
    https://voorbeeld.nl/niet-gevonden
  3. Sitemap
    https://voorbeeld.nl/sitemap

De onderzochte documenten van de website:

  1. Algemene voorwaarden (PDF)
    https://voorbeeld.nl/algemene-voorwaarden.pdf
  2. Privacybeleid (PDF)
    https://voorbeeld.nl/privacybeleid.pdf

Technologieën

De gebruikte technologieën van de onderzochte website:

  • HTML
  • CSS
  • WAI-ARIA
  • Javascript
  • SVG
  • PDF

Onderbouwing

De gebruikte besturingssystemen tijdens het onderzoek:

  • Apple macOS, versie 12.1
  • Microsoft Windows, versie 10

De gebruikte browsers tijdens het onderzoek:

  • Apple Safari, versie 15.2
  • Google Chrome, versie 97
  • Microsoft Edge, versie 96
  • Mozilla Firefox, versie 96

De gebruikte software tijdens het onderzoek:

  • Adobe Acrobat Pro DC, versie 2022.001.200805
  • Colour Contrast Analyser (CCA), versie 3.1.2
  • NonVisual Desktop Access (NVDA), versie 2021.3
  • VoiceOver, versie 7.0

De gebruikte websites tijdens het onderzoek:

Uitvoering

Fictief bedrijfslogo

Dit onderzoek is uitgevoerd door Niek Derksen van WCAG.nl, specialist op het gebied van digitale toegankelijkheid. Wij delen kennis rondom digitale toegankelijkheid en doen WCAG-onderzoeken voor Rijksoverheid, provincies, gemeenten, waterschappen en commerciële partijen.

Heb je naar aanleiding van dit rapport nog vragen of opmerkingen? Neem dan contact op via niek@wcag.nl.

Referenties