Issues:
Deelonderzoek content digitale toegankelijkheid website Design in government

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: De iconen van het klokje, het euroteken en de kalender op onder andere pagina conference.gebruikercentraal.nl/events/international-webinar-… en de homepage hebben geen alternatieve tekst. Deze iconen zeggen iets over hoe de tekst die er naast staat geïnterpreteerd moet worden en deze informatie is nu niet beschikbaar voor screenreadergebruikers.

Bevinding 2: De afbeelding van Thomas Hoholm op pagina conference.gebruikercentraal.nl/looking-back-at-the-… heeft wel een alternatieve tekst, maar deze beschrijft de afbeelding niet (goed). Voeg extra context toe, bijvoorbeeld het onderwerp van de slide en de naam van het evenement, om de tekst beschrijvender te maken voor blinden. Dit geldt ook voor de afbeelding 'A design approach' van Policy Lab op dezelfde pagina en andere screenshots op de pagina.

Bevinding 3: In de footer staat een logo van de International Design in Government Community. Een logo moet altijd het woord 'Logo', plus de naam van de organisatie en eventuele andere tekst op de afbeelding bevatten in de alternatieve tekst. Daarnaast is deze afbeelding een link en moet de alternatieve tekst dus ook het linkdoel beschrijven. Het logo in het artikel op pagina conference.gebruikercentraal.nl/looking-back-at-the-… mist in het geheel een alternatieve tekst.

Bevinding 4: De afbeelding van de vier gele post-its op pagina conference.gebruikercentraal.nl/looking-back-at-the-… heeft wel een alternatieve tekst, maar deze beschrijft de afbeelding niet. Zorg ervoor dat de informatie op de afbeelding ook beschikbaar is voor gebruikers van hulpsoftware.

Bevinding 5: Op pagina conference.gebruikercentraal.nl/looking-back-at-the-… staat een link naar een vorig blog. Op die pagina staan twee links, één naar een vorig blog en één naar een volgend blog. De pijliconen geven aan of het om de vorige of de volgende blog gaan. De iconen hebben geen alternatieve tekst, dus deze informatie wordt doorgegeven aan screenreadergebruikers.

Bevinding 6: De groene iconen op pagina conference.gebruikercentraal.nl/speaker/whats-next-audrey-… hebben geen alternatieve tekst. Twee van de iconen zijn decoratief, maar het icoon van het vierkant met de pijl betekent universeel dat de bezoeker weg wordt geleid van de website en naar een externe pagina gaat. Deze informatie is nu niet beschikbaar voor screenreadergebruikers. Dit komt op meerdere pagina's voor, waaronder op conference.gebruikercentraal.nl/sessions/.

Bevinding 7: De afbeeldingen in de pdf op pagina conference.gebruikercentraal.nl/wp-content/uploads/sites/20/… hebben geen alternatieve tekst en zijn niet gecodeerd als decoratief. Zie ook 1.3.1.

Advies: Sommige profielfoto's op pagina conference.gebruikercentraal.nl/speakers/ hebben geen alternatieve tekst en sommige wel. Het is een best practice om bij profielfoto's de naam van de persoon op te nemen in de alternatieve tekst, zodat een bezoeker de foto eventueel kan laten beschrijven door iemand anders. Tevens maak je het gebruik van alternatieve tekst consistenter bij de profielfoto's. Dit geldt ook voor de foto's op pagina conference.gebruikercentraal.nl/session/building-a-design-….

1.2 Op tijd gebaseerde media

1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)

Bevinding 8: Niet aanwezig.

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Bevinding 9: De video op conference.gebruikercentraal.nl/recapping-the-international-… bevat geen audiodescriptie of media-alternatief, terwijl er regelmatig tekst in beeld is (bijvoorbeeld aan het begin en de namen van de sprekers). Er ontbreekt uitgeschreven tekst en er is ook geen voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van een screenreader niet weten wat er word getoond in de video. Zet deze en andere informatie in een transcript. Of maak gebruik van een extra audiospoor om ook te voldoen aan SC 1.3.5. Dit geldt ook voor de video op conference.gebruikercentraal.nl/looking-back-at-the-….

1.2.4 Ondertitels voor doven en slechthorenden (live) (Niveau AA)

Informatie over succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)

Bevinding 10: Niet aanwezig

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Bevinding 11: Op de pagina conference.gebruikercentraal.nl/recapping-the-international-… is een video. De audiodesciptie ontbreekt in deze video. Audiodescriptie is een (extra) audiospoor waarin verteld wordt wat er in beeld te zien is. Zie ook 1.2.3. Dit geldt ook voor de video conference.gebruikercentraal.nl/looking-back-at-the-….

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 12: De tekst 'Head of Department and Associate Professor at Dept Strategy and Entrepreneurship, at the BI Norwegian Business School in Norway' op pagina conference.gebruikercentraal.nl/looking-back-at-the-… is opgemaakt met het em-element. Het em-element geeft nadruk aan woorden of korte zinnen en heeft een semantische waarde. Gebruik het daarom nooit puur voor opmaak. Gebruik het i-element of CSS om een vergelijkbaar visueel effect te creëren. Dit komt op meerdere plekken voor, waaronder op dezelfde pagina.

Bevinding 13: Op pagina conference.gebruikercentraal.nl/events/international-webinar-… zijn de afbeeldingen van de keynotespeakers met het alt-attribuut de eigen naam opgenomen in de h3-kop. Dit kan verwarrend zijn voor screenreadergebruikers omdat de naam nu 2x genoemd wordt. Plaats de afbeeldingen naast de kop of laat de alt-tekst leeg om dit probleem op te lossen. Lees ook het advies bij SC 1.1.1.

Bevinding 14: De pdf op pagina conference.gebruikercentraal.nl/wp-content/uploads/sites/20/… is niet gecodeerd en daardoor is er voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat codes ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag zoals semantische koppen en alt-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Bevinding 15: De tekst “Failure is success training” op pagina conference.gebruikercentraal.nl/looking-back-at-the-… is opgemaakt in een aside, maar een blockquote is hier logischer voor gebruikers van hulpsoftware, omdat andere quotes op de pagina wel zijn opgemaakt met het blockquote-element. Dit komt op meerdere plaatsen voor, onder andere bij de tekst “The road to systemic change starts with better collaboration.” op dezelfde pagina.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 16: De pdf op pagina conference.gebruikercentraal.nl/wp-content/uploads/sites/20/… is niet gecodeerd en voldoet daarom niet aan de eisen van dit succescriterium.

1.4 Onderscheidbaar

1.4.2 Geluidsbediening (Niveau A)

Informatie over succescriterium 1.4.2 Geluidsbediening

Bevinding 17: Niet aanwezig.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 18: Het contrast van de linktekst 'blog' op de homepage is te laag als de link de hover-status (mouseOver) heeft. De contrastratio is dan 3,9:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 19: Het contrast van onder andere de tekst 'Esther Bodil Huyer' in de pdf op pagina conference.gebruikercentraal.nl/wp-content/uploads/sites/20/… is te laag. De contrastratio is hier 2,9:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 20: Het contrast van onder andere de tekst 'Ignacia Orellana, Will Harmer, Martin Jordan, Kuba Bartwicki' in de pdf op pagina conference.gebruikercentraal.nl/wp-content/uploads/sites/20/… heeft een te laag contrast. De contrastratio is hier 3,4:1 waar dat minimaal 4,5:1 moet zijn.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 21: Het contrast van de rand om het invoerveld op pagina conference.gebruikercentraal.nl/doesntexist heeft een te laag contrast als het invoerveld focus heeft. De contrastratio is hier 2,8:1, waar dat minimaal 3:1 moet zijn.

Bevinding 22: Het contrast van de randen van checkboxes op onder andere pagina conference.gebruikercentraal.nl/events/international-webinar-… is niet hoog genoeg als de rand focus heeft. De contrastratio is hier 2,4:1 met de donkerblauwe achtergrond, waar dat minimaal 3:1 moet zijn.

Bevinding 23: Het contrast van de groene knop op de donkerblauwe achtergrond op pagina conference.gebruikercentraal.nl/events/international-webinar-… is te laag. De contrastratio is hier 1,8:1, waar dat minimaal 3:1 moet zijn.

Bevinding 24: Het contrast van de groene knop op de donkerblauwe achtergrond op pagina conference.gebruikercentraal.nl/events/international-webinar-… is te laag als de knop focus/hover heeft. De contrastratio is hier 1,3:1, waar dat minimaal 3:1 moet zijn.

Bevinding 25: Het contrast van de groene iconen op pagina conference.gebruikercentraal.nl/speaker/whats-next-audrey-… is te laag. De contrastratio is hier 2,7:1, waar dat minimaal 3:1 moet zijn. Twee van de iconen zijn decoratief, maar het tweede icoon betekent universeel dat de bezoeker van de huidige website weg wordt geleid en naar een externe website gaat. Dit komt op meerdere pagina's voor, waaronder op conference.gebruikercentraal.nl/programme/tuesday/.

2. Bedienbaar

2.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Bevinding 26: Niet aanwezig.

2.3 Toevallen en fysieke reacties

2.3.1 Drie flitsen of beneden drempelwaarde (Niveau A)

Informatie over succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde

Bevinding 27: Niet aanwezig.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 28: De pdf op pagina conference.gebruikercentraal.nl/wp-content/uploads/sites/20/… heeft geen titel. Voeg een beschrijvende titel toe en kies onder 'Weergave bij openen' voor 'Documenttitel' om dit probleem op te lossen.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 29: In de linkteksten van de links bij de auteur op pagina conference.gebruikercentraal.nl/looking-back-at-the-… is met het title-attribuut extra informatie toegevoegd. Het title-attribuut wordt niet door alle browsers en hulpsoftware ondersteund, voeg deze informatie daarom op een andere manier toe. Dit gebeurt ook bij de link 'website' van het Action Team op pagina conference.gebruikercentraal.nl/author/actionteam/.

Bevinding 30: Advies: De linkteksten van de links onder 'Blog' op de homepage bestaan uit de datum, de kop én de hele introductie tekst. Dit is verwarrend voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader, zij krijgen álle tekst opgelezen. Daarnaast maakt het het navigeren voor bezoekers die gebruik maken van een linklijst ook ingewikkelder.

Bevinding 31: Advies: Zowel de tekst 'Wednesday 20 Nov' als de knop 'Wednesday programme' op pagina conference.gebruikercentraal.nl/programme/ gaan naar dezelfde pagina. Het is hier niet nodig en mogelijk zelfs verwarrend (de tekst is niet herkenbaar als link) om twee links te plaatsen. Dit geldt ook voor de andere data en knoppen op de pagina.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Bevinding 32: Er is geen taal ingesteld voor de pdf op pagina conference.gebruikercentraal.nl/wp-content/uploads/sites/20/…. Dit kan ertoe leiden dat screenreaders de pdf in de verkeerde taal voorlezen, bijvoorbeeld Nederlands, waardoor de tekst onverstaanbaar is.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 33: Op pagina conference.gebruikercentraal.nl/looking-back-at-the-… staat de tekst 'Communicatieadviseur en grafisch vormgever bij Gebruiker Centraal'. Deze tekst is niet in dezelfde taal als de hoofdtaal van de pagina (Engels). Vertaal de tekst, of geef een taalwissel aan.

Bevinding 34: De link 'Jessica Straetemans' op pagina conference.gebruikercentraal.nl/looking-back-at-the-… heeft een Nederlandse toegankelijke linktekst, namelijk 'Over Jessica Straetemans'. Zorg dat interactieve elementen in dezelfde taal worden aangeboden als de hoofdtaal van de pagina, in dit geval Engels. Dit geldt ook voor de linkteksten bij het Twitter- en LinkedIn-icoon.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 35: Het formulier op pagina conference.gebruikercentraal.nl/events/international-webinar-… bevat niet overal goede foutidentificatie. Wanneer een bezoeker bijvoorbeeld een veld niet heeft ingevuld, verschijnt de melding 'Please fill in the field: Name'. Dit is geen foutmelding maar een foutsuggestie. Een goede foutmelding vertelt de bezoeker wáár de fout is gemaakt én wélke fout is gemaakt.

3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (Niveau AA)

Informatie over succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)

Bevinding 36: Niet aanwezig.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

• Home:
  https://conference.gebruikercentraal.nl/
• Video:
  https://conference.gebruikercentraal.nl/recapping-the-international-design-in-government-conference-2019/
• Blogs:
  https://conference.gebruikercentraal.nl/category/blog/
• Blog:
  https://conference.gebruikercentraal.nl/looking-back-at-the-international-webinar-how-to-build-an-innovation-culture/
• Event:
  https://conference.gebruikercentraal.nl/events/international-webinar-design-and-ethics/
• Speakers:
  https://conference.gebruikercentraal.nl/speakers/
• Speaker:
  https://conference.gebruikercentraal.nl/speaker/whats-next-audrey-tang/
• Programme:
  https://conference.gebruikercentraal.nl/programme/
• Sessions:
  https://conference.gebruikercentraal.nl/sessions/
• 404:
  https://conference.gebruikercentraal.nl/doesntexist
• pdf:
  https://conference.gebruikercentraal.nl/wp-content/uploads/sites/20/2019/11/icd-18nov-monday-schedule.pdf
• Author:
  https://conference.gebruikercentraal.nl/author/actionteam/
• Session:
  https://conference.gebruikercentraal.nl/session/building-a-design-system-for-government/
• Keynotes:
  https://conference.gebruikercentraal.nl/programme/tuesday/

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• ECMAScript 5
• DOM
• SVG

Bronnen

• Evaluatiedocument WCAG 2.0
  www.drempelvrij.nl/over-het-waarmerk
• Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
  www.w3.org/Translations/WCAG20-nl
• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.