Toegankelijkheids­rapportRisk Factory Limburg-Noord

De video heeft geen audiodescriptie. Maak een audiotrack met een beschrijving van de essentiële visuele informatie die niet kan worden afgeleid uit de standaard audiotrack, en voeg de audiobeschrijving toe als alternatieve track (ervan uitgaande dat een audiospeler gebruikt wordt die dit ondersteunt, bv. Able Player) of voeg een link toe naar een alternatieve video met de audiobeschrijving.

Pagina “Begeleider worden“: Het h3-element met de tekst "Flyer werving begeleiders" is geen kop voor een sectie van de pagina; het lijkt erop dat het h3-element gebruikt werd om te tekst groter te maken.

Pagina “Risk Factory Limburg-Noord“: hetzelfde geldt voor de link “Risk Factory Twente“ en “Risk Factory Midden- en West-Brabant“.

De citaten van de stagiaire Isa zijn met het em-element opgemaakt, dat noch voor citaten, noch voor schuingedrukte tekst in het algemeen bedoeld is. Voor dergelijke lange citaat beschikt HTML over het blockquote-element.

(Het gebruik van lange stukken schuingedrukte tekst is omwille van de leesbaarheid voor personen met bepaalde visuele beperkingen niet aanbevolen.)

De link “ Veiligheidsregio Limburg-Noord“ onder de kop “De kracht van samen“ heeft een gele kleur (#efcd00) die met de witte achtergrond een contrastverhouding van slechts heeft 1,56685:1 (CSS-selector: .paragraph--type--text p a). De vereiste minimale contrastverhouding is 4,5:1.

Het contrast is eveneens te laag wanneer de link de toetsenbordfocus krijgt. Bij hover is het contrast wel voldoende (.paragraph--type--text p a:hover { color: #000; }).

Hier zou men de linkkleur gebruiken die elders op de site ook gebruikt wordt en die een contrastverhouding van 10,1 met wit heeft:

a {
  color: #1c3b90;
 (…)
  text-decoration: underline;
}

De cards gebruiken een gradiënt (op de CSS-selector .card--overview .card__info.has-image) waardoor de witte h3-koppen dikwijls op een te lichte achtergrond komen te liggen om een contrastverhouding van minstens 4,5:1 te garanderen.

Ofwel moet deze gradiënt hoger beginnen, zodat de gehele witte tekst zich op een voldoende ondoorzichtige achtergrond bevindt, ofwel gebruikt men dezelfde methode als bij de cards op de homepagina, waar de witte tekst zich volledig op een ondoorzichtige achtergrond zonder gradiënt bevindt.

Wanneer men met de TAB-toets door de cards navigeert, krijgt men bij cards een vreemd contrastprobleem, namelijk heel donkere tekst op een zwarte achtergrond. Op OpenSUSE Linux is dit probleem zowel in Firefox als in op Chromium gebaseerde browsers te zien. Op Windows 10 zowel in Firefox als in Edge en Google Chrome. De screenshot hieronder komt uit Firefox, maar in Chromium en Opera is het effect identiek:

In de Firefox-Inspector is het effect bij focus-within te zien; de relevante CSS-code is dan:

.listing-overview > li .card:focus-within {
  -webkit-box-shadow: 0 0.625rem 1.25rem -0.625rem rgba(0,29,49,0.5);
  box-shadow: 0 0.625rem 1.25rem -0.625rem rgba(0,29,49,0.5);
}

Hier kan men overwegen om bij focus-within dezelfde stijlregel als bij hover te gebruiken.

De layout past zich niet volledig aan het scherm aan wanneer men de volgende tests uitvoert:

• de viewport instellen op een breedte van 320 CSS-pixels en controleren dat (a) er geen informatie of functionaliteit verloren gaat en (b) er geen verticaal scrollen nodig is;

• de viewport instellen op een hoogte van 256 CSS-pixels en controleren dat (a) er geen informatie of functionaliteit verloren gaat en (b) er geen horizontaal scrollen nodig is.

Bij een breedte van 320 CSS-pixels wordt een stukje van de tekst bovenaan onleesbaar.

In principe is dit probleem oplosbaar met een zogenaamde “soft hyphen” (­) en de CSS-property word-break. Bijvoorbeeld:

<h1 class="node__head-title">Basisonder&shy;wijs</h1>

.node__head-title { word-break: break-word; }

De videospeler van YouTube biedt diverse functionaliteiten die men kan activeren met lettertoetsen. Zo kan men de video met een druk op f schermvullend weergeven. Met m kan men het geluid dempen. Deze sneltoetsen zijn weliswaar handig, maar kunnen conflicten veroorzaken met spraakcommando’s en/of met sommige sneltoetsen van screenreaders.

Om deze reden staat WCAG sneltoetsen op basis van één toets alleen toe wanneer men de gebruiker ook een instelling biedt om ze uit te schakelen. (Sneltoetsen op basis van toetscombinaties zijn uiteraard wel toegestaan.)

Voeg disablekb="1" toe aan de code voor het YouTube-filmpje:

<iframe width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen disablekb="1"></iframe>

De page bevat een carrousel. Bezoekers moeten een carrousel of slideshow kunnen stoppen, pauzeren of verbergen wanneer de animaties langer dan 5 seconden blijven duren. Dat is hier niet het geval: de slideshow start automatisch opnieuw nadat de laatste slide getoond is.

Voeg onder, boven of naast de carrousel een knop toe om de animatie te pauzeren. (Nog beter is het om de animatie pas te laten beginnen wanneer de gebruiker op een startknop drukt.)

De titel van de pagina is momenteel <title>Risk Factory Limburg-Noord | Risk Factory Limburg-Noord</title>. Voor blinde gebruikers die via een zoekopdracht op de site terechtkomen is het niet onmiddellijk duidelijk of ze zich nu op de homepagina bevinden of op de “Over ons”-pagina. Hier zou een titel zoals <title>Over ons | Risk Factory Limburg-Noord</title> of <title>Over Risk Factory Limburg-Noord | Risk Factory Limburg-Noord</title> zinvoller zijn.

Boven de kop <h2>Ervaringen in de risk factory</h2> staat een leeg h2-element.

Naast de selectielijst om de nieuwsitems te filteren staat het visuele label “Filter op”, dat echter niet als label-element opgemaakt is. De selectielijst krijgt zijn toegankelijke naam van een onzichtbaar label-element (met de tekst “Facet risico’s“) waarnaar verwezen wordt met het attribuut aria-labelledby. Gebruikers van spraakherkenningssoftware zullen de zichtbare naam uitspreken (“Filter op”), maar de software zoekt dan een toegankelijke naam die daarmee overeenstemt en vindt niets.

Men kan dit probleem oplossen door het label-element te gebruiken zoals het eigenlijk bedoeld is:

<label for="facet_news_risks">Fiter op</label>
<select … class="…" … id="facet_news_risks">

Het verborgen label-element en het attribuut aria-labelledby zijn dan overbodig.

De twee kleine knopjes onder de carrousel om tussen de slides te kiezen hebben een Engelstalig aria-label-attribuut:

<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1" aria-current="true"></span>

Ofwel moeten deze elementen een lang=”en”-attribuut krijgen, ofwel moet men de aria-label-attributen naar het Nederlands vertalen. De laatste optie heeft de voorkeur.

Hetzelfde geldt voor de attributen aria-label="Previous slide" en aria-label="Next slide" voor de pijltjes onder de carrousel.

De skiplink staat in een div-element dat als volgt opgemaakt is:

<div class="skip-link-container" role="navigation" aria-label="Overslaan en naar de inhoud gaan">
  <a href="#main-content" class="visually-hidden focusable skip-link">
    Overslaan en naar de inhoud gaan
  </a>
</div>

Als gevolg hiervan wordt de tekst “Overslaan en naar de inhoud gaan” tweemaal gelezen: eenmaal voor het div-element en eenmaal als linktekst. Dit kan men vermijden door de attributen role="navigation" en aria-label="Overslaan en naar de inhoud gaan" te verwijderen.