Toegankelijkheidsonderzoek 2020

Onderzoek uitgevoerd op 20-08-2020

Dit rapport beschrijft compliance van www.rli.nl met W3C’s Web Content Accessibility Guidelines (WCAG)
We concluderen op basis van deze evaluatie dat www.rli.nl grotendeels voldoet aan WCAG 2.1, Conformance Level AA.
Dit onderzoek omvat alle 50 eisen van WCAG 2.1 niveau A en AA.
Afwijkingen worden hieronder genoemd.
Daarna volgt een overzicht van de evaluatie.

Methode

https://www.w3.org/TR/WCAG-EM/

Uitvoerder

Egbert Bleyenburg, Overboord webprojecten, https://www.overboord.nl
Overboord ontwikkelt online communicatie en cultuur. We ontwikkelen en realiseren concepten, websites, API-interfaces en interactieve applicaties.

Scope

Alle pagina's vallen onder domein https://www.rli.nl

Conformance target
WCAG 2.1 AA

Accessibility Support Baseline
Browsers: Google Chrome[80+], Mozilla Firefox[68+], Microsoft Internet Explorer (IE)[11.0.7 +], Microsoft Edge[79+], Safari[14+].
Technologie: HTML 5, CSS, Javascript, DOM, PDF
PDF's: externe leverancies
PDF/A of versie 1.7 als richtlijn.

Gebruikte webadressen en applicaties

https://www.w3.org/TR/WCAG21
https://webaim.org/standards/wcag/checklist

https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&levels=aaa
https://www.w3.org/WAI/ER/tools/?q=wcag-21-w3c-web-content-accessibility-guidelines-21

https://pa11y.org/
https://open-indy.github.io/Koa11y/
https://www.totalvalidator.com/validator/PurchaseForm
https://www.w3cag.org/

Sample

https://www.rli.nl/
https://www.rli.nl/toegankelijkheid
https://www.rli.nl/publicaties
https://www.rli.nl/presentatie-advies-toegang-tot-de-stad
https://www.rli.nl/alle-publicaties
https://www.rli.nl/publicaties/2020/advies/stop-bodemdaling-in-veenweidegebieden-het-groene-hart-als-voorbeeld
https://www.rli.nl/pers/2020/kabinet-moet-bodemdaling-in-veenweidegebieden-tegengaan
https://en.rli.nl/events/online-debate-session-a-grip-on-hazardous-substances-eu-perspective
https://www.rli.nl/in-voorbereiding
https://www.rli.nl/over-de-raad
https://www.rli.nl/werkwijze
https://www.rli.nl/raadsleden
https://www.rli.nl/publicaties/2020/advies/toegang-tot-de-stad-hoe-publieke-voorzieningen-wonen-en-vervoer-de-sleutel-voor-burgers-vormen
https://www.rli.nl/publicaties/2020/advies/groen-uit-de-crisis
https://www.rli.nl/publicaties/2019/jaarverslag/jaarverslag-2018
https://www.rli.nl/video/samenvatting-op-advies-greep-op-gevaarlijke-stoffen
https://www.rli.nl/ccus-en-waterstof-in-vlaanderen-en-nederland-in-het-perspectief-van-een-industriele-transitie-0
https://www.rli.nl/nieuws/2020/rli-brengt-advies-uit-over-de-toegang-tot-de-stad
https://www.rli.nl/in-voorbereiding/waterstofbeleid

Afwijkingen

1.2.3 - Audiodescriptie of media-alternatief (vooraf opgenomen) [niveau A]

Er wordt een alternatief geleverd voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen videocontent voor gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.

Oorzaak

Tijdens conferenties kunnen er embedded media in i-frames zijn geplaatst ter ondersteuning van die conferentie. Deze media zijn grotendeels niet conform de richtlijnen 2.1.  Het gaat om live streams en chatboxen.
Verder hebben we een deel van onze video's aangepast zodat ze voldoen aan de richtlijnen, enkele video's voldoen niet aan de richtlijnen en staan buiten de site.

Gevolg

De toespraken of lezingen kunnen door visueel of auditief gehandicapten maar gedeeltelijk worden gevolgd.
Omdat de online events events zijn waar men zich vooraf in moet schrijven kunnen we van te voren prima inschatten of er behoefte is aan accessible alternatieven.

Maatregel

Omdat men zich van te voren voor deze events in moet schrijven, kunnen we op dat moment bepalen of er alternatieve media (live streams met ondertitel bijvoorbeeld, of chatboxen voor blinden) moeten worden ingezet.
Verder onderzoeken we nog of we met de huidige maatregelen m.b.t. tot de niet validerende video's alsnog kunnen voldoen aan de webrichtlijnen.


3.1.2 - Taal van de onderdelen [niveau AA]

De menselijke taal van elke passage of zin in de content kan door software bepaald worden, behalve waar het gaat om eigennamen, technische termen, woorden uit een onbepaalde taal en woorden of zinsdelen die deel zijn gaan uitmaken van het jargon van de onmiddellijk omringende tekst.

Oorzaak

Het gebruikte systeem Drupal 7 heeft geen interface voor het toevoegen van language attributes aan menu links of automatische gegenereerde links in views. Wanneer een download bijvoorbeeld een engelse tekst heeft, of er wordt gerefereerd aan een engelstalige webpagina (of extern of op de engelse versie van de site) kunnen daar vanuit het CMS geen language attributes omheen worden gezet.

Gevolg

Er kunnen engelstalige links in de website staan zonder language attributes.

Maatregel/planning

Module ontwikkelen die dit wel mogelijk maakt, er is een verzoek hiervoor uitgezet in de Drupal community.
De verwachting is dat er ergens in 2021 een oplossing voor dit probleem zal komen.

Onevenredige last

Aangezien er zelfs in de nieuwe versie van Drupal (8 en 9) geen module voor is ontwikkeld in de community geeft dit wel aan dat het - vanuit de architectuur van dit CMS gezien - geen eenvoudige opgave zal zijn. De inschatting is dat er met het zelf programmeren van een oplossing een uur of 300 mee gemoeid zal zijn. De verwachting is echter dat er vanuit de community binnenkort ook een oplossing zal worden aangedragen.
 

EVALUATIE en uitgevoerde aanpassingen

Hieronder beschrijven we de evaluatie per punt van fouten en waarschuwingen uit een handmatige en een geautomatiseerde test van de website.
Wanneer nodig beschrijven we ook de uitgevoerde aanpassingen.


HOMEPAGE

1. Missende alternatieve text

Probleem
Bij sommige afbeeldingen die vanuit de vormgevng werden geladen mist de alt attribute.

Referentie
Decoratieve afbeeldingen moeten een lege alt en geen titel hebben.

Oplossing
In voorkomende gevallen zijn de templates aangepast.

2. Waarschuwing over het contrast van sommige stukken tekst

Probleem
Er wordt gewaarschuwd dat de witte text op blauwe achtergrond misschien niet voldoet.

Referentie
https://webaim.org/standards/wcag/checklist#sc1.4.3

Evaluatie
Gezien de fontgrootte is het minimale contrast wat we nodig hebben 3:1. In deze gevallen is het contrast groter dan 4:1. Dus voldoen deze teksten aan de richtlijnen.

3.  Inhoudelijke waarschuwingen

3.1 Long alternative text

Probleem
Alt teksten moeten beknopt en beschrijvend zijn en zijn niet bedoeld om hele paragrafen in op te nemen.

Evaluatie
In voorkomende gevallen is de misschien wat langere tekst nodig om de inhoude correct te beschrijven.

Oplossing
In de redactionele richtlijnen is een extra toelichting op de alt teksten opgenomen.

3.2 Waarschuwing: Redundant link

Probleem
De koppen in het hoofdmenu gaan naar dezelfde pagina als de eerste onderliggende links.

Evaluatie
Dit is handig met berekking tot de usability, ev voldoet formeel aan de webrichtlijnen.

3.3 Very small text

Probleem
Er wordt geklaagd over het hier in daar gebruikte kleine font (12px).

Referentie
https://accessibleweb.com/question-answer/minimum-font-size/

Evaluatie
De combinatie van font grootte en contrast geeft aan dat dat we bij deze tekstdelen nog binnen de normen blijven.

4. Features

Probleem
Afbeeldingen in Events op de homepage hebben geen alt tekst.

Oorzaak
Dat komt omdat je een event niet op de homepage kunt zetten, maar daar een banner voor aan moet maken. De alt teksten voor deze banner worden niet geladen.

Oplossing
Aangepast in de templates.

Vervolgprobleem
Soms was er geen alt tekst ingevoerd.

Oplossing
Alt tekst verplicht maken aan redactiezijde is technisch niet mogelijk. In de redactierichtlijnen opgenomen dat alt teksten verplicht zijn.
Rli heeft alle banners nagelopen en alt texten toegevoegd.

5. Waarschuwing: Missende heading levels op verschillende pagina's

Probleem
Er ontbrak een heading level h2 in het rijtje h1, h2, h3.

Oplossing
De templates zijn aangepast zodat de volgorde en nesting altijd correct zijn.

6. Fout: Dubbele h1

Probleem
Op zoekresultaatpagina's met filterblokken komen twee h1 tags voor.

Oplossing
Templates voor deze SOLR-filterblokken zijn aangepast.

PUBLICATIES

Bestaande problemen vergelijkbaar aan Homepage opgelost.

Alle publicaties

1. Waarschuwing: Suspicious link text

Probleem
Dit betreft de meer link in de facetten.

Referentie
Een link moet ook zonder de context te begrijpen zijn.

Oplossing
Het bereft hier geen link, ook al hebben we de a tag gebruikt, maar een interactie element. We hebben dat hieronder opgelost.

2. Aangeven wanneer je een DOM element voor een alternatieve functie gebruikt.

Probleem
De meer link is opgezet als een a tag, maar geen link naar buiten maar een interactie element op de pagina zelf die meer filters laadt. Dat moet je ergens aangeven.
Daarnaast is dit element niet bereikbaar voor de tabs, zodat je het zonder muis niet kunt gebruiken.

Referentie
https://www.w3.org/TR/WCAG20-TECHS/F84.html
https://stackoverflow.com/questions/59904544/accessibility-and-links-that-are-buttons-and-vice-versa)
https://www.w3.org/TR/wai-aria-practices-1.2/examples/button/button.html
"additional measures need to be taken to ensure that the controls provide important information to assistive technologies and allow themselves to be controlled by assistive technologies".

Oplossing
Attribute role = button aan link toegevoegd.
Toegankelijk gemaakt via de tabs.

3. Fout: Dubbele h1

Probleem
Op zoekresultaatpaginas met filterblokken komen twee h1 tags voor.

Oplossing
Templates voor deze SOLR-filterblokken zijn aangepast.

In voorbereiding

https://www.rli.nl/in-voorbereiding

1. Waarschuwing: Missende heading levels op verschillende pagina's

Probleem
Er ontbrak een heading level h2 in het rijtje h1, h2, h3.

Oplossing
Aangepast in de templates zodat deze volgorde en nesting altijd correct zijn.


Werkprogramma

https://www.rli.nl/publicaties/2019/werkprogramma/werkprogramma-2020-2021

1. Waarschuwing: Download links PDF document

Probleem
Bij sommige download links stond niet aangegeven dat het een download link was, en ook niet het type download, en hoe zwaar de download was.

Referentie
Additionally, inform the user that the link will open a PDF document.

Oplossing
Dit is in alle voorkomende gevallen aangepast: In PDF download links staat nu altijd het 'download' atribute, en in de link zelf staan type en gewicht beschreven.
Bijvoorbeeld: Ducument x (PDF, 12Mb).

2. Waarschuwing: Meerdere navigatie elementen moeten een uniek label hebben, tenzij ze exact hetzelfde zijn

Probleem
We laden op alle paginas zowel de mobiele versie van het menu als de desktop versie van het menu, en verbergen een van beide afhankelijk van de context. Maar beide zijn niet helemaal hetzelfde, bij de mobiele versie zitten wat extra links bijvoorbeeld, dus hebben ze een apart label nodig.

Referentie
https://www.w3.org/TR/wai-aria-practices-1.2/examples/landmarks/navigation.html
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role
The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.

Oplossing
Aria-labeled by attributes toegevoegd aan beide menu's.

3. Fout: Mobiele menu knop is een div die we gebruiken als button

Probleem
Wanneer je een dom element 'oneigelijk' gebruikt als interactief element moet je dat aangeven in de html.

Oplossing

Role="button" aria-haspopup="true" attributes toegevoegd aan de mobiele menu knop, en gezorgd dat deze via de tabs te bereiken is.
 

Nieuws

https://www.rli.nl/nieuws

1. Fout: Dubbele h1

Probleem
Op zoekresultaatpagina's met filterblokken komen twee h1 tags voor.

Oplossing
Templates voor deze SOLR-filterblokken zijn aangepast.

2. Waarschuwing: Meerdere 'header' tags

Referentie
While the <header> tag may be used several times in a web page, role="banner" should only be used once per web page.

Evaluatie
Het gebruik van de header tags voldoet aan de webrichtlijnen
 

Pers

https://www.rli.nl/pers

1. Fout: Dubbele h1

Probleem
Op zoekresultaatpagina's met filterblokken komen twee h1 tags voor.

Oplossing
Templates voor deze SOLR-filterblokken zijn aangepast.
 

Events

https://www.rli.nl/pers

1. Waarschuwing: Missende heading levels op verschillende pagina's

Probleem
Er ontbrak een heading level h2 in het rijtje h1, h2, h3.

Oplossing
Aangepast in de templates zodat deze volgorde en nesting altijd correct is


DE RAAD

https://www.rli.nl/over-de-raad

https://www.rli.nl/werkwijze

https://www.rli.nl/raadsleden

Geen problemen aangetroffen.
 

CONTENTTYPE: Advies

https://www.rli.nl/publicaties/2020/advies/groen-uit-de-crisis
https://www.rli.nl/publicaties/2020/advies/stop-bodemdaling-in-veenweidegebieden-het-groene-hart-als-voorbeeld
https://www.rli.nl/publicaties/2020/advies/toegang-tot-de-stad-hoe-publieke-voorzieningen-wonen-en-vervoer-de-sleutel-voor-burgers-vormen

1. Waarschuwing: Kleur van links in lopende tekst

Probleem
We moeten testen of de kleur van de links in de lopende tekst wel voldoen aan de webrichtlijnen.

Referentie
Color alone is not used to distinguish links from surrounding text unless the contrast ratio between the link and the surrounding text is at least 3:1 and an additional distinction (e.g., it becomes underlined) is provided when the link is hovered over and receives focus.
https://www.w3.org/TR/WCAG20-TECHS/F73.html
Red and Pink are the same color (hue) but they have different lightness (which is not color ). So red and pink would pass the requirement for "not distinguished by color (hue) alone" since they differ by lightness (which is not color).

Evaluatie
Het minimale contrast verschil voor de links moet 3:1 zijn, en dat is op alle pagina's het geval.

Contentype: Video

Omdat het veel te duur is om alle video's van ondertitel en beeldbeschrijving etcetera te voorzien, hebben we de site aangepast zodat alle videos niet embedded worden getoond, maar worden als afbeelding getoond die naar het externe multimedia kanaal linken. Dit voldeed aan de webrichtlijnen 2. Er zijn een aantal video's bij de beeldbank van de overheid ondergebracht die wel aan alle webrichtlijnen kunnen voldoen. Onderzoek wordt gedaan op welke manier video's op een haalbare wijze in de site kunnen worden ge-embed om alsnog aan de webrichtlijnen te voldoen.

Nieuwe regel met betrekking tot de richtlijnen

Inhoud van derde partijen op websites en mobiele applicaties van overheidsorganisaties hoeft niet toegankelijk te zijn als deze inhoud niet onder het gezag van de overheidsorganisatie staat en ook niet door deze organisatie wordt ontwikkeld of gefinancierd. Dat betekent dat video's door externen geproduceerd mogen worden ingesloten in de paginas, ook wanneer ze niet volledig voldoen aan de webrichtlijnen.

Vimeo kan aan AA voldoen!

Vimeo heeft sinds kort een player die aan alle AA richtlijnen voldoet, dus afgezien van de extra redactie bij video's, kunnen eigen video's ook via Vimeo worden ingesloten en zodoende aan de richtlijnen voldoen.
https://www.rli.nl/evenementen/online-debate-session-a-grip-on-hazardous-substances-eu-perspective

Actie

We doen momenteel onderzoek naar hoe we onze video's moeten inrichten.


LINKS

1. Algemeen waarschuwingen: Kleur & inhoud links

Probleem
Links moeten duidelijk beschrijven waar ze naar toe gaan, en links moeten duidelijk te onderscheiden zijn van niet linkende omringende tekst.

Referentie
A link (including alt text of linked images) contains the phrase "click here" or "click", or the link text is "click here", "here", "more", "more...", "details", "more details", "link", "this page", "continue", "continue reading", "read more", or "button".
https://www.w3.org/WAI/WCAG21/Techniques/general/G183.html

Evaluatie
De links in de site zijn midden-lichtblauw (# 3366CC) en de gewone tekst is zwart (# 000000). Omdat de blauwe tekst licht genoeg is, heeft deze een contrast van 3,9: 1 met de omringende tekst en kan deze worden geïdentificeerd als zijnde anders dan de omringende tekst door mensen met alle soorten kleurenblindheid, inclusief personen die helemaal geen kleur kunnen zien. Daarnaast waren de enige probleemmatische linkteksten de eerder genoemde interactie button elementen.
 

Taalswitch

1. Waarschuwing: Elke taalverandering moeten worden aangegevens in de code met een lang attribute

Probleem
Voor sommige onderdelen in de site kan geen language tag gedefinieerd worden, het gaat dan enkel om contextuele links in de rechterbalk en om menu-items.

Referentie
https://www.rli.nl/evenementen/online-debate-session-a-grip-on-hazardous-substances-eu-perspective

Evaluatie
Er is geen werkende technische oplossing voor dir probleem binnen het door ons gebruikte content management systeem (Drupal). Het is wel mogelijk er iets voor te laten programmeren maar dat wordt "exorbitant" duur. Mogelijk komt er vanuit de source drupal community zelf een dezer dagen een oplossing voor. In bijna alle onderelden van de site kunnen kan deze lang atribute overigens prima worden toegevoegd, dus het gaat maar om een sporadisch voorkomende probleem. We gaan hier een explain voor opnemen.
 

Volgorde HTML: algemene eisen

Referentie
When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order.

Evaluatie
Deze voorwaarde is bij het opzetten van de site meegenomen, en er wordt op alle pagina's in de site aan voldaan.
 

1.4.13 Content on Hover or Focus

Probleem
Er zijn een aantal interactieve elementen in de site waarbij een user interactie wordt gevraagd om extra informatie op de pagina te laden. Bijvoorbeeld bij de h2 koppen in events. Deze elementen moeten ook via de tabs te bereiken zijn.

Referentie
https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html
Level AA(Added in 2.1)
https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR29.html
https://www.456bereastreet.com/archive/201302/making_elements_keyboard_focusable_and_clickable/

Oplossing
Gerepareerd voor mobile devices, en er zijn ook de bijbehorende attributes bij geplaatst.

2.5.3 Label in Name

Probleem
Hier en daar ontbrak de name attribute.

Referentie
https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html

Oplossing
Aangepast in voorkomende gevallen.