Toegankelijkheidsonderzoek

Issues:
Rapportage van Fronteers

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Fronteers
Datum 11 juni 2023
Scope van de website - fronteers.nl (op dit moment nog beta: https://fronteers-beta.netlify.app/)
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 17

1. Waarneembaar

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 1: Advies of eis? In de footer hebben de 2 social-media teksten een vettere tekst dan de onderliggende tekst. Dit zou je als koppen kunnen beschouwen en dan zouden de 3 socialmedia-namen als h3 gemarkeerd moeten worden.

Bevinding 2: Op pagina https://fronteers-beta.netlify.app/en/blog/ is 'Latest blog' als kopniveau 3 opgemaakt. De kop bevat geen content omdat deze direct wordt opgevolgd door de kop ('Blog 3') van hetzelfde niveau 3. Bezoekers die gebruikmaken van schermlezersoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Daarom is het belangrijk om een goed lopende koppenstructuur te gebruiken. Een goede koppenstructuur begint bij een kopniveau 1 voor de titel van de pagina, kopniveau 2 voor de koppen, kopniveau 3 voor de tussenkoppen, etcetera.

Bevinding 3: Koppenstructuur op https://fronteers-beta.netlify.app/nl/blog/2016/12/16-03-2009.html luidt:

Laat de H1 op 'true' weg. Alleen op de homepage is het interessant om op de naam van het logo een H1 te zetten.

Zet een H1 op 'Notulen bestuursvergadering 16 maart 2009'

Plaats de andere koppen in de content een niveau dieper, dus H1 wordt H2, etc.

Bevinding 4: Op pagina https://fronteers-beta.netlify.app/nl/blog/2016/12/16-03-2009.html
wordt gebruik gemaakt van een tabel 'Portefeuilleverdeling en doelen'. De koppen zijn goed gemarkeerd met een th-element. Echter, hulpsoftware kan de relatie tussen deze kop- en datacellen niet bepalen. De koppen moeten geassocieerd worden met de onderliggende cellen. Zorg dat de cellen een relatie hebben met de koppen. Dit kan bijvoorbeeld door het scope-attribuut in het th-element te plaatsen.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 5: In de pagina https://fronteers-beta.netlify.app/nl/word-lid/code-of-conduct/ in de submenu's (desktop) heeft de huidige pagina een afwijkende kleur. Slechtzienden en kleurenblinden kunnen hierdoor mogelijk niet herkennen dat om de huidige pagina gaat. Zorg ervoor dat deze informatie niet van kleur afhankelijk is, maar bijvoorbeeld ook door vorm.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 6: Op de homepage is een call-to-action button "WORD OOK LID" met witte tekst op een oranje achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 2.5:1 waar dit 4,5:1 moet zijn.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 7: Wanneer bij een schermgrootte van 1280px breed ingezoomd wordt tot 200% dan verdwijnt op elke pagina de call-to-action-knop in de header 'Wordt lid'. Er is ook geen alternatief te vinden, bijvoorbeeld in de navigatie of in de footer. Zorg ervoor dat alle content bereikbaar is in elke resolutie van het scherm.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 8: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op de homepage tekst. Het gaat om de blokken onder 'Binnenkort'. Zorg ervoor dat deze teksten in beeld blijven staan zonder een scrollbalk in de leesrichting (horizontaal) te krijgen.
Dit geldt ook voor andere blokken.

2. Bedienbaar

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 9: Als je in de desktopversie door de pagina navigeert met de tabtoets kom je bij de navigatie aan: 'Over Fronteers'. De navigatie klapt automatisch uit en de focus verdwijnt als je met de tabtoets door navigeert; vervolgens sta je weer bovenaan de pagina. De rest van de pagina is daardoor onbereikbaar.

Bevinding 10: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan wordt de navigatie in de header vervangen door een knop. Als je het menu opent of sluit ben je even de navigatie kwijt. Zorg dat de navigatie op de knop blijft. Eventueel mag bij openen de focus ook op het eerste menu geplaatst worden, maar de eerste suggestie werkt het prettigst.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 11: Op de homepage komen links voor met meerdere keren dezelfde linktekst 'Meld je aan'. Zorg dat links naar verschillende doelen unieke linkteksten hebben, door bijvoorbeeld de tekst aan te vullen met de titel van het bericht of pagina waarnaar gelinkt wordt. Deze aanvullende tekst hoeft niet visueel getoond te worden (zie bijvoorbeeld de links 'Lees meer'.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 12: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan wordt de navigatie in de header vervangen door een knop. Deze knop heet 'Navigation'. De focus op deze knop is niet zichtbaar. Zorg dat visueel duidelijk is dat de focus op deze knop staat.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 13: Taal staat op nl, onzichtbare tekst is Engels: "Current language"
<li lang="nl">
<span><span class="visually-hidden">Current language:</span>NL</span>
</li>
Dit geldt ook voor:
<li lang="en">
<a class="c-lggnav__link" href="/en/"><span class="visually-hidden">Schakel naar</span>EN</a>
</li>

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Voldoende

Bevinding 14: Advies: Op de homepage komen dubbele id's voor, namelijk id="Icon_menu". Dit kon vroeger problemen opleveren met hulpsoftware. Zorg dat id's unieke waarden hebben op een pagina. Overigens komt dit succescriterium in WCAG 2.2 te vervallen.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 15: In de header van elke pagina is een manier om van taal te wisselen. In het Engels krijg je bij focus dit via schermvoorleessoftware teruf: "SWITCH TONL link " en omgekeerd " SCHAKEL NAAREN link". Voeg een spatie in de span zodat deze niet tegen het volgende woord wordt aangeplakt.
<span class="visually-hidden">Schakel naar</span>EN wordt dan:
<span class="visually-hidden">Schakel naar </span>EN

Bevinding 16: Onderaan de pagina kan je via een bladerfunctie navigeren. De huidige pagina is onderstreept. Zorg dat deze informatie ook voor hulpsoftware beschikbaar is, bijvoorbeeld via aria-current.

Bevinding 17: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan wordt de navigatie in de header vervangen door een knop. Deze knop heet 'Navigation'. Met deze knop kan je het menu aansturen. Zo is er ook een aparte knop voor het sluiten van ditzelfde menu. Maak hier één knop van die 'Navigatie' heet (en 'Navigation' in de Engelse site). Zet op de knop aria-expanded; door middel van true en false krijgt hulpsoftware het bericht of content is in- of uitgevouwen.

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

Ondersteunende technieken

Bronnen

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

Geprint: 2026-04-05 14:09:03 v2.4-011