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) 2.1 niveau AA 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;
• content kan goed worden herschaald;
• functionaliteit is goed te bedienen met het toetsenbord;
• webpagina’s hebben een goede paginatitel;
• links hebben goede een goede linktekst;
• 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;
• tekst heeft nog niet overal genoeg contrast;
• 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

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 niet-tekstuele content

---

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.

Lees meer over contrast (minimum)

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 blokken omzeilen

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 Foutidentificatie

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.

Lees meer over parsen

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.
  • Code: <button alt="icoon" ... >Verstuur</button>
  • Schermafbeelding: Figuur 2: <button>-element met een alt-attribuut.
  • 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.

Lees meer over parsen

Succescriterium 4.1.2 Naam, rol, waarde

Resultaat: Voldoende

Succescriterium 4.1.3 Statusberichten

Resultaat: Niet van toepassing

Schermafbeeldingen

Steekproef

De onderzochte pagina’s van de website:

De onderzochte documenten van de website:

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:

• Markup Validation Service (Engelstalig)

Uitvoering

Referenties

• Web Content Accessibility Guidelines (WCAG) Overview (Engelstalig)
• Web Content Accessibility Guidelines (WCAG) 2.1 (Engelstalig)
• Website Accessibility Conformance Evaluation Methodology (Engelstalig)
• Accessibility Evaluation Resources (Engelstalig)