Rapport:
Audit digitale toegankelijkheid website Fundament Losser

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website, in het secundaire menu, na de link “Contact”, staat het logo “Losserdoet!” dat als link functioneert. Het img-element gebruikt het title-attribuut in plaats van het vereiste alt-attribuut. Het title-attribuut biedt geen toegankelijke tekstalternatief en wordt niet betrouwbaar aangekondigd door schermlezers. Voeg een betekenisvol alt-attribuut toe dat de zichtbare tekst van de afbeelding bevat en het doel van de link beschrijft.
Zie pagina https://www.fundamentlosser.nl.

In de header van de website staat een afbeelding met ingesloten tekst: “Muziek en dans”, “Bibliotheek”, “Sociaal werk”. Deze afbeelding is geplaatst als achtergrondafbeelding en heeft geen tekstalternatief. Deze afbeelding wordt daardoor genegeerd door hulpsoftware. Afbeeldingen met tekst zijn in principe altijd informatief en moeten een tekstalternatief krijgen. Voeg een tekstalternatief toe dat de zichtbare tekst bevat. Zie ook succescriterium 1.4.5.
Zie pagina https://www.fundamentlosser.nl.

Op alle pagina’s van de website staat in de footer een logo zonder tekstalternatief. Het alt-attribuut ontbreekt. Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is. Zo weten bezoekers die de afbeelding niet kunnen zien, ook wat er staat. Voeg een alt-tekst toe die de volledige tekst van het logo bevat: “Logo CBCT gecertificeerd”.
Zie pagina https://www.fundamentlosser.nl.

Op pagina https://www.fundamentlosser.nl/agenda/ zijn agenda-items met afbeeldingen aanwezig. De tekstalternatieven van deze afbeeldingen dupliceren de koppen die ernaast staan. De schermlezer leest nu dezelfde informatie twee keer voor. Laat de alt-attributen leeg om herhaling van de tekst te voorkomen.

Op pagina https://www.fundamentlosser.nl/cursussen/de-overstap/ staan twee afbeeldingen van contactpersonen zonder alt-attribuut. Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, moet dit attribuut leeg blijven (alt=""). Bij een informatieve afbeelding moet het alt-attribuut een duidelijke beschrijving van de afbeelding bevatten.
Hetzelfde probleem komt voor op de pagina’s https://www.fundamentlosser.nl/historie/bibliotheek/ en https://www.fundamentlosser.nl/historie/post-timeline/hoe-het-begon-na-de-hoogmis/ bij de afbeelding van de QR-code.

Op alle pagina’s van https://www.fundamentlosser.nl staan in de header drie links, bijvoorbeeld “Lees website voor.” Naast deze links staan decoratieve iconen. Deze iconen hebben een tekstalternatief, bijvoorbeeld “hearing”.
Deze iconen zijn puur decoratief en voegen geen informatie toe aan de pagina. Toch worden ze door schermlezers voorgelezen, wat leidt tot onnodige en verwarrende informatie voor blinde en slechtziende bezoekers. Decoratieve iconen moeten worden verborgen voor hulpsoftware, zodat deze bezoekers niet worden afgeleid door betekenisloze content. Verberg de decoratieve iconen voor hulpsoftware, bijvoorbeeld door het attribuut aria-hidden met de waarde true toe te voegen of door het element de rol presentation te geven.
Dit probleem komt ook voor bij het “X”-icoon in de aanvullende inhoud die door deze links wordt geopend.

Op pagina https://www.fundamentlosser.nl/contact/ staat een CAPTCHA zonder een tekstalternatief. Ons advies is om helemaal geen captcha te gebruiken, omdat het altijd een drempel vormt. Bekijk de Engelstalige pagina https://www.w3.org/TR/turingtest/ voor meer informatie en eventuele alternatieven.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.fundamentlosser.nl/nieuws/muziekinstrumenten-uitleen-in-de-spotlights/ staan twee audiofragmenten zonder transcript. Er moet een alternatief zijn voor mensen die het geluid niet kunnen horen: de volledig uitgeschreven tekst (transcriptie). Dit is bijvoorbeeld belangrijk voor mensen die doof of slechthorend zijn. Deze tekst kan op verschillende manieren worden geplaatst. Eén manier is om de tekst direct bij het audiofragment te zetten, eventueel visueel verborgen, waarbij de bezoeker de tekst met een link zichtbaar kan maken. De tekst mag ook op een aparte pagina of in een toegankelijke pdf staan, als de link naar de pagina of pdf direct bij het audiofragment staat.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.fundamentlosser.nl/nieuws/muziekinstrumenten-uitleen-in-de-spotlights/ staat een video met gesproken tekst, maar ondertiteling ontbreekt. Voeg ondertiteling toe aan de video. Zo krijgen bezoekers die de video niet (goed) kunnen horen ook alle informatie.

Uitkomst: Onvoldoende

Bevindingen: Op https://www.fundamentlosser.nl/nieuws/muziekinstrumenten-uitleen-in-de-spotlights/ wordt een video getoond. In de video verschijnt op bepaalde momenten tekst in beeld, bijvoorbeeld de namen en functies van sprekers (rond 0:14 en 1:18). Er wordt echter geen media-alternatief of audiodescriptie aangeboden. Deze visuele informatie is daardoor niet toegankelijk voor blinde gebruikers. Voor succescriterium 1.2.3 kan dit worden opgelost met een geschreven tekst (media-alternatief). Voor succescriterium 1.2.5 is dat echter niet genoeg. Hiervoor moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Audiobeschrijving moet alleen op de plekken worden toegevoegd waar de ruimte voor is.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De video op pagina https://www.fundamentlosser.nl/nieuws/muziekinstrumenten-uitleen-in-de-spotlights/ voldoet niet aan succescriterium 1.2.5, waarin audiodescriptie voor video’s vereist is. Audiodescriptie is hier noodzakelijk, omdat er voldoende ruimte is binnen de bestaande audiotrack. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien. Audiobeschrijving moet alleen op de plekken worden toegevoegd waar de ruimte voor is. Zie ook succescriterium 1.2.3.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.fundamentlosser.nl is in de header en footer een groep links aanwezig die visueel als één geheel wordt getoond. In de header gaat het om het topmenu met de links "Lees website voor", "Tekstgrootte" en "Zoeken". Deze groepering is niet terug te zien in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Plaats de elementen in een nav-element of een ul-element met meerdere li-elementen.

Op pagina https://www.fundamentlosser.nl/contact/ is de broodkruimelnavigatie geïmplementeerd als een verzameling links, maar de onderliggende structuur en relatie tussen deze links zijn niet semantisch gedefinieerd in de HTML. Dit kan worden opgelost door de links in een nav- of een ul-of ol-element met twee of meerdere li-elementen te plaatsen.
Hetzelfde probleem komt voor op alle andere pagina’s met een broodkruimelnavigatie.

Op pagina https://www.fundamentlosser.nl/contact/ staan kopjes in de zijkolom die niet als koppen zijn gemarkeerd: E-mail, Telefoon, Adres. Gebruik h3-elementen om ze als koppen te markeren.

Op pagina https://www.fundamentlosser.nl/contact/ staat een formulier. Alle Label-elementen zijn niet expliciet gekoppeld aan de bijbehorende invoervelden. De ID’s van de bijbehorende invoervelden ontbreken. De label-elementen moeten gekoppeld worden aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut komt het id van het invoerveld waar het label bij hoort. Door deze koppeling lezen schermlezers het label voor als een bezoeker direct naar het invoerveld navigeert. Andere oplossingen zijn ook mogelijk.

Op pagina https://www.fundamentlosser.nl/contact/ staat een formulier. Op de foutmeldingen is aria-hidden=”true” gebruikt. Deze code maakt ze ontoegankelijk voor bezoekers met schermlezers. Verwijder deze code.

Op pagina https://www.fundamentlosser.nl/agenda/ is de tekst “Filters” niet als kop gemarkeerd. Voor bezoekers die hulpsoftware gebruiken, is een tekst die er visueel uitziet als kop, maar niet als kop is gemarkeerd, niet bruikbaar. Deze bezoekers navigeren via koppen om de inhoud te scannen of snel naar een specifieke sectie te springen. Dit is alleen mogelijk wanneer de koppen ook in de code als kop zijn vastgelegd. Wanneer koppen uitsluitend visueel zijn vormgegeven (bijvoorbeeld door vetgedrukte tekst), wijkt bovendien de structuur van de informatie in de code af van de visuele structuur. Markeer deze kop met het juiste HTML-element, op het correcte kopniveau, bijvoorbeeld h2.
Een vergelijkbaar probleem doet zich voor op pagina https://www.fundamentlosser.nl/gaaf-dat-je-een-cursus-wilt-gaan-volgen-hieronder-kun-jij-je-inschrijven/?instrument=Akoestisch%20gitaar bij de tekst “Privacy”, en op pagina https://www.fundamentlosser.nl/?s=werk bij de koppen in de zoekresultaten.

Op pagina https://www.fundamentlosser.nl/agenda/ bevatten de select-elementen “Categorie” en “Locatie” selectievakjes. Deze selectievakjes zijn voor schermlezers verborgen met “display:none”. Verberg native selectievakjes niet met “display:none” of vergelijkbare technieken die ze uit de toegankelijkheidsboom verwijderen. Zie ook succescriterium 4.1.2.

Op pagina https://www.fundamentlosser.nl/nieuws/muziekinstrumenten-uitleen-in-de-spotlights/ wordt in de zin die begint met “Een blauwe maandag…” het strong-element onjuist gebruikt voor opmaakdoeleinden. De volledige zin is in een strong-element geplaatst om deze vet weer te geven. Het strong-element heeft een semantische betekenis: het geeft aan dat tekst extra nadruk krijgt. Gebruik dit element daarom niet uitsluitend voor een visueel effect (vetgedrukte tekst).
Hetzelfde probleem komt voor op pagina https://www.fundamentlosser.nl/cursussen/de-overstap/ bij de alinea die begint met “De overstap van de basisschool…”.

Op pagina https://www.fundamentlosser.nl/nieuws/samen-zaaien-samen-groeien/ zijn de volgende teksten koppen, maar ontbreken de kop-elementen. In plaats daarvan wordt het strong-element gebruikt om ze visueel als koppen weer te geven. Dit betreft “Heb jij nog iets over?” en “Doe je mee?”. Het strong-element is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis.
Hetzelfde probleem komt voor op de pagina https://www.fundamentlosser.nl/jaarverslagen-anbi/ bij de teksten “2022”, “2021”, “2020” en “2019”.

Op pagina https://www.fundamentlosser.nl/404 wordt een kop van niveau 1 direct gevolgd door een andere kop van hetzelfde niveau. Dit betreft “404” en “Oeps! Die pagina kon niet worden gevonden!”. Als twee kop-elementen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Dit kan bijvoorbeeld worden opgelost door deze twee koppen samen te voegen tot één kop. Andere oplossingen zijn ook mogelijk.

Het PDF-document op https://www.fundamentlosser.nl/download/6485/?tmstv=1750855634 mist structurele tags, waardoor de inhoud niet toegankelijk is voor schermlezers. Bovendien kunnen wij de PDF hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de PDF-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als dit wordt opgelost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.

Het PDF-document op https://www.fundamentlosser.nl/download/2039 is wel getagd, maar hier zijn meerdere problemen mee. Hier volgen enkele voorbeelden. Zo zijn de kopteksten "Contactgegevens", "Statutair bestuur van de instelling" etc. niet getagd als kopteksten, bijvoorbeeld H3. Ook zijn de invoervelden niet getagd en niet gekoppeld aan de zichtbare labels, waardoor de relatie tussen deze content niet bepaald kan worden. Verder zijn de instructies over optionele en verplichte velden onderaan de pagina's niet getagd. Er kunnen meer problemen zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.fundamentlosser.nl/contact/ staat een formulier. De invoervelden voor persoonsgegevens (“Naam”, “E-mailadres”, “Telefoonnummer”) missen het autocomplete-attribuut. Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres en telefoonnummer moeten het autocomplete-attribuut met de juiste waarde hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
Hetzelfde probleem doet zich voor bij de invoervelden op de pagina https://www.fundamentlosser.nl/gaaf-dat-je-een-cursus-wilt-gaan-volgen-hieronder-kun-jij-je-inschrijven/?instrument=Akoestisch%20gitaar.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.fundamentlosser.nl/contact/ bevat de alinea een link met de tekst “klik hier”. Kleur is het enige verschil tussen de link en de omliggende statische tekst. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dan niet dat er een link in de tekst staat. Zorg ervoor dat deze link in de tekst op zijn minst op één andere manier te herkennen is, bijvoorbeeld door deze te onderstrepen of door een kader toe te voegen.
Hetzelfde probleem doet zich voor bij de links “RTV Oost”, “Kijk op de website…” en “Hier het artikel over…” op pagina https://www.fundamentlosser.nl/nieuws/muziekinstrumenten-uitleen-in-de-spotlights/, bij “privacyregeling” en “algemene voorwaarden” op pagina https://www.fundamentlosser.nl/gaaf-dat-je-een-cursus-wilt-gaan-volgen-hieronder-kun-jij-je-inschrijven/?instrument=Akoestisch%20gitaar en op andere pagina’s.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.fundamentlosser.nl hebben links in het submenu (“Agenda”, “Nieuws” en “Contact”) en in de footer (“Privacystatement”, “Klachtenregeling” en “Locaties en openingstijden”) een te laag contrast in de hovertoestand. De links worden grijs (HEX #8E8E8E) op een witte achtergrond, waardoor de contrastratio 3,3:1 is. Omdat deze tekst kleiner is dan 19px, moet het contrast minimaal 4,5:1 zijn.
Een vergelijkbaar contrastprobleem doet zich voor bij sommige links in de hoverstatus, bijvoorbeeld “klik hier” op pagina https://www.fundamentlosser.nl/contact/, “RTV Oost”, links op pagina https://www.fundamentlosser.nl/nieuws/muziekinstrumenten-uitleen-in-de-spotlights/, alle links op de pagina https://www.fundamentlosser.nl/?s=werk en vergelijkbare links op andere pagina’s van de website.

Wanneer pagina https://www.fundamentlosser.nl/ op een klein scherm wordt bekeken, verschijnt er een knop “Menu” om het mobiele navigatiemenu te openen. De witte tekst op een groene (HEX #1EC456) achtergrond heeft een contrastverhouding van 2,3:1. Verhoog het contrast tot minimaal 4,5:1.

Op pagina https://www.fundamentlosser.nl/contact/ is de tekst “Anti spam vraag” grijs (HEX #7F7F7F) op een witte achtergrond. De kleurcontrastverhouding is onvoldoende: 4,0:1. Tekst moet minimaal een contrast van 4,5:1 hebben met de achtergrond.

Op pagina https://www.fundamentlosser.nl/agenda/ hebben de select-elementen “Categorie”, “Datum” en “Locatie” grijze (HEX #808080) teksten op een lichte (HEX #F6F5FC) achtergrond. De contrastverhouding is te laag: 3,6:1. Zorg ervoor dat de teksten minimaal een contrastverhouding van 4,5:1 hebben.

Op pagina https://www.fundamentlosser.nl/agenda/ bevat de knop “wis” grijze (HEX #808080) tekst op een witte achtergrond. De contrastverhouding is 3,9:1. Wanneer minimaal één optie in de filters is geselecteerd, wordt de tekst op de knop “wis” rood (HEX #FF0000) op een witte achtergrond. De kleurcontrastverhouding is dan 3,7:1. Beide waarden liggen onder het vereiste minimum voor tekst van deze grootte.

Op pagina https://www.fundamentlosser.nl/agenda/ is in het element “Datum” de huidige datum weergegeven als een wit cijfer op een roze (HEX #F67280) achtergrond, met een contrastverhouding van 2,8:1. Een vergelijkbaar contrastprobleem doet zich voor bij de data van de vorige en volgende maanden: deze worden weergegeven als grijze (HEX #CCCCCC) cijfers op een witte achtergrond met een contrastverhouding van 1,6:1. Dit is lager dan het vereiste minimum van 4,5:1.

Op pagina https://www.fundamentlosser.nl/gaaf-dat-je-een-cursus-wilt-gaan-volgen-hieronder-kun-jij-je-inschrijven/?instrument=Akoestisch%20gitaar staat een formulier. Wanneer velden met select-elementen toetsenbordfocus krijgen, verandert de labeltekst naar paars (HEX #4E5CAA) op een grijze (HEX #DBDBDB) achtergrond, waardoor de contrastverhouding 4,4:1 wordt. Zorg ervoor dat deze minimaal 4,5:1 bedraagt.

Op pagina https://www.fundamentlosser.nl/historie/bibliotheek/ hebben de lichtpaarse (HEX #D9D6F1) links, zoals “Timeline Bibliotheek” en “Timeline Muziek en dans”, op een paarse (HEX #685BC7) achtergrond een contrastverhouding van 3,8:1, wat te laag is. Op dezelfde pagina zijn de datums, zoals “1 January, 1915” en “1915”, oranje (HEX #E87722) op een witte achtergrond en hebben zij ook een onvoldoende contrast (2,9:1). Verhoog de contrastverhouding tot minimaal 3,0:1 voor tekst die groter is dan 19 px en vetgedrukt of 24 px. En tot minimaal 4,5:1 voor tekst die kleiner is dan deze waarden.

Op pagina https://www.fundamentlosser.nl/jaarverslagen-anbi/ staat een documentviewer. De paginateller daarin, bijvoorbeeld “9/31”, is grijs (HEX #999999) op een witte (HEX #F7F7F7) achtergrond. De contrastverhouding is 2,7:1, wat lager is dan het vereiste minimum.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.fundamentlosser.nl zijn in het head-element van de HTML-code de attributen minimum-scale=1 en user-scalable=no aanwezig. Deze code zorgt ervoor dat een bezoeker niet kan inzoomen. Verwijder deze code.

Wanneer pagina https://www.fundamentlosser.nl/agenda/ wordt bekeken bij een schermresolutie van 1280 × 1024 pixels en ingezoomd tot 200%, zijn de teksten in de agenda-items niet zichtbaar en worden alleen de afbeeldingen weergegeven. Als een bezoeker inzoomt, moet alles nog werken.

Wanneer pagina https://www.fundamentlosser.nl/nieuws/muziekinstrumenten-uitleen-in-de-spotlights/ wordt bekeken bij een schermresolutie van 1280 × 1024 pixels en ingezoomd tot 200%, wordt de video niet mee geschaald en is deze gedeeltelijk niet zichtbaar. De functionaliteit moet blijven werken, ook wanneer een zoom wordt gebruikt.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website staat een afbeelding met ingesloten tekst: “Muziek en dans”, “Bibliotheek”, “Sociaal werk”. Als tekst als afbeelding wordt geplaatst, kunnen veel bezoekers er niets meer mee. Dit komt doordat ze de tekst in de afbeelding niet kunnen vergroten of aanpassen. Het is beter om deze tekst gewoon als normale tekst op de pagina te plaatsen. Op die manier kunnen mensen de grootte, kleur of het lettertype aanpassen zodat het voor hen leesbaarder wordt. Als de tekst in de afbeelding staat, kunnen ze dit niet doen.
Zie pagina https://www.fundamentlosser.nl.

Uitkomst: Onvoldoende

Bevindingen: Wanneer pagina https://www.fundamentlosser.nl/ wordt bekeken bij een schermresolutie van 1280 × 1024 pixels en ingezoomd tot 400%, gaat de volgende tekst in het adres verloren: “7581 AG Losser”. Zorg dat alles nog werkt en leesbaar is als je inzoomt.
Dit probleem komt ook voor bij de kop “Fundament laat je stralen” en de tekst daaronder.

Wanneer pagina https://www.fundamentlosser.nl/contact/ wordt bekeken bij een schermresolutie van 1280 × 1024 pixels en ingezoomd tot 400%, is de tekst in een van de velden gedeeltelijk niet zichtbaar: “In welke gemeente is Fundament actief?”. Alles moet zichtbaar blijven, ook bij een dergelijke zoom.
Hetzelfde probleem doet zich voor op de pagina https://www.fundamentlosser.nl/gaaf-dat-je-een-cursus-wilt-gaan-volgen-hieronder-kun-jij-je-inschrijven/?instrument=Akoestisch%20gitaar bij vergelijkbare velden.

Wanneer pagina https://www.fundamentlosser.nl/agenda/ wordt bekeken bij een schermresolutie van 1280 × 1024 pixels en ingezoomd tot 400%, zijn de teksten in de agenda-items niet zichtbaar en worden alleen de afbeeldingen weergegeven. Als een bezoeker inzoomt, moet alles nog werken.

Wanneer pagina https://www.fundamentlosser.nl/nieuws/muziekinstrumenten-uitleen-in-de-spotlights/ wordt bekeken bij een schermresolutie van 1280 × 1024 pixels en ingezoomd tot 400%, wordt de video niet mee geschaald en is deze gedeeltelijk niet zichtbaar. De functionaliteit moet blijven werken, ook wanneer een grote zoom wordt gebruikt.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.fundamentlosser.nl/agenda/ bevatten de select-elementen “Categorie” en “Locatie” selectievakjes met een grijze (HEX #ADB5BD) rand op een witte achtergrond, wat resulteert in een contrastverhouding van 2,1:1. Het kleurcontrast tussen de randkleur en de achtergrondkleur van interactieve elementen zoals deze filteropties moet minimaal 3,0:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers de pagina https://www.fundamentlosser.nl/agenda/ openen bij een standaard desktop-viewportbreedte (bijvoorbeeld 1280 pixels) en de tekstafstand toepassen zoals beschreven in dit succescriterium, worden alle links “Lees meer” gedeeltelijk onzichtbaar en onleesbaar. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven. Dit kan opgelost worden door de hoogte en breedte van de containers van de tekst responsief te maken.

Op pagina https://www.fundamentlosser.nl/jaarverslagen-anbi/ zijn, als de tekstafstanden worden aangepast volgens dit succescriterium, de teksten “Standaardform anbi alg. bibliotheek 2024”, “Standaardform anbi alg. muziek & dans 2024” en “Standaardform anbi alg. welzijn 2024” gedeeltelijk niet zichtbaar. Zorg ervoor dat alle informatie zichtbaar blijft wanneer grotere tekstafstanden worden toegepast.

Op pagina https://www.fundamentlosser.nl/historie/bibliotheek/ wordt bij het toepassen van extra tekstafstand meer tekst afgekapt dan bij standaard tekstafstand. Zie bijvoorbeeld de tekst onder de kop “Hoe het begon na de hoogmis” en andere vergelijkbare teksten. Vermijd vaste hoogtes en overflow-beperkingen, zodat tekst kan uitrekken zonder te worden afgekapt wanneer de tekstafstand wordt vergroot.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.fundamentlosser.nl/agenda/ toont het filterelement “Categorie” bij hover extra content (“Filter op categorie”) dat andere pagina-elementen overlapt, zoals de kop eronder (bijvoorbeeld “Vandaag (donderdag)”). Zorg dat bezoekers de extra content makkelijk kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen. Bijvoorbeeld door de Escape-toets in te drukken.

Uitkomst: Onvoldoende

Bevindingen: In de header opent de knop “Lees website voor” een extra sectie met een knop “Lees voor”. Deze knop is niet toegankelijk met het toetsenbord. Zorg ervoor dat alle functionaliteit volledig met alleen het toetsenbord te bedienen is, zonder een muis te hoeven gebruiken. Zie pagina https://www.fundamentlosser.nl.
Hetzelfde probleem doet zich voor bij dezelfde knop op https://www.fundamentlosser.nl/historie/post-timeline/hoe-het-begon-na-de-hoogmis/.

Op alle pagina’s van https://www.fundamentlosser.nl is op een klein scherm een knop voor het mobiele menu aanwezig. Deze knop is niet met het toetsenbord te bedienen. Zorg ervoor dat alle functionaliteit volledig met alleen het toetsenbord kan worden bediend, zonder dat een muis nodig is.
Dit probleem komt ook voor bij de sluitknop in het mobiele menu.

Op alle pagina’s van https://www.fundamentlosser.nl staat bovenaan de pagina een logo dat als link functioneert. Deze link is niet met het toetsenbord te bedienen. Zorg ervoor dat alle functionaliteit volledig met alleen het toetsenbord kan worden bediend, zonder dat een muis nodig is.
Dit probleem komt ook voor op kleine schermen.

Op pagina https://www.fundamentlosser.nl/agenda/ zijn agenda-items niet toegankelijk met alleen het toetsenbord.
Hetzelfde probleem doet zich voor bij nieuwsitems op de pagina https://www.fundamentlosser.nl/nieuws/.

Op pagina https://www.fundamentlosser.nl/agenda/ tonen filterelementen extra inhoud met selectievakjes bij hover, bijvoorbeeld “Filter op categorie”, maar deze selectievakjes zijn niet beschikbaar voor toetsenbordgebruikers. Zorg ervoor dat alle functionaliteit volledig met alleen het toetsenbord te bedienen is, zonder een muis te hoeven gebruiken.

Op pagina https://www.fundamentlosser.nl/jaarverslagen-anbi/ staat een documentviewer. Alle knoppen daarin zijn niet toegankelijk met het toetsenbord, waaronder de knoppen voor vorige en volgende pagina, zoom, fullscreen en andere functies.

Wanneer op pagina https://www.fundamentlosser.nl/historie/post-timeline/hoe-het-begon-na-de-hoogmis/ op een van de twee afbeeldingslinks wordt geklikt, opent de afbeelding in een fullscreenweergave. De knoppen voor sluiten, volgende en vorige zijn niet toegankelijk met het toetsenbord. Zorg dat alle interactieve elementen met het toetsenbord te bedienen zijn.

Pagina https://www.fundamentlosser.nl/404 bevat de instructie: “Navigeer terug naar de homepagina of kies uit een van de links hieronder.”. Deze links zijn echter niet met het toetsenbord te bereiken en te bedienen. Zorg dat alle interactieve elementen met het toetsenbord te bedienen zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.fundamentlosser.nl/contact/ staat een formulier met de verificatiemethode reCAPTCHA. Wanneer het selectievakje is aangevinkt maar de verzendknop nog niet is ingedrukt, verschijnt na enige tijd de melding “Verificatie verlopen. Vink het selectievakje opnieuw aan.” Er is sprake van een tijdslimiet. Dit kan een probleem zijn voor bezoekers die meer tijd nodig hebben. Bezoekers moeten de tijdslimiet kunnen uitzetten, aanpassen of verlengen.
Hetzelfde probleem doet zich voor op de pagina https://www.fundamentlosser.nl/gaaf-dat-je-een-cursus-wilt-gaan-volgen-hieronder-kun-jij-je-inschrijven/?instrument=Akoestisch%20gitaar.

Als de website voor het eerst wordt bezocht, staat een cookiemelding in beeld. Deze melding verdwijnt vanzelf na enige tijd en hierdoor is er sprake van een tijdslimiet. Dit kan een probleem zijn voor bezoekers die meer tijd nodig hebben. Bezoekers moeten de tijdslimiet kunnen uitzetten, aanpassen of verlengen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website ontbreekt een skiplink. Met een skiplink kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij toetsenbordfocus krijgt. Zorg dat de skiplink de eerste link is op de pagina.

Uitkomst: Onvoldoende

Bevindingen: Het PDF-document https://www.fundamentlosser.nl/download/6485/?tmstv=1750855634 heeft geen titel ingesteld in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet in de PDF-instellingen ook een documenttitel worden ingesteld. Bij het openen van een PDF in een PDF-lezer (zoals Adobe Acrobat of een browser) wordt meestal de bestandsnaam bovenaan in de titelbalk getoond, bijvoorbeeld document123.pdf. Wanneer in de PDF-metadata echter een documenttitel is ingesteld, wordt deze titel in plaats van de bestandsnaam weergegeven. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen, omdat zij dan snel en gemakkelijk kunnen bepalen of het document relevant is.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.fundamentlosser.nl verschijnt op een klein scherm een menuknop die een mobiel menu opent. Op dit moment kan met het toetsenbord uit het mobiele menu worden genavigeerd. De toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het menu open blijft. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden totdat op de sluitknop is geklikt of op de ESC-toets is gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus het menu verlaat.

Op alle pagina’s van https://www.fundamentlosser.nl staan in de header drie links, bijvoorbeeld “Lees website voor”, die extra inhoud openen. De toetsenbordfocus gaat naar deze inhoud, maar na het laatste item verschuift de focus naar de hoofdpagina terwijl deze extra inhoud open blijft en een deel van de pagina bedekt. Dit is geen logische focusvolgorde. Dit kan worden opgelost door de focus binnen het venster te houden totdat op de sluitknop is geklikt of op de ESC-toets is gedrukt. Het is ook mogelijk om het venster automatisch te sluiten zodra de focus verloren gaat.

Wanneer op pagina https://www.fundamentlosser.nl/historie/post-timeline/hoe-het-begon-na-de-hoogmis/ op een van de twee afbeeldingslinks wordt geklikt, wordt een dialoogvenster geopend met een fullscreenweergave. Momenteel kan de toetsenbordfocus uit het geopende dialoogvenster ontsnappen en naar de onderliggende paginainhoud gaan. Bij dit soort dialoogvensters moet de toetsenbordfocus goed worden ingesteld. Wanneer het venster actief is, moet de toetsenbordfocus binnen het venster blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het venster te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het venster automatisch te sluiten zodra de focus eruit gaat.

Als de website voor het eerst wordt bezocht, staat een cookiemelding in beeld. Deze overlapt een deel van de content van de website en dan moet het mogelijk zijn om deze melding vooraf te sluiten. Deze cookiemelding komt echter pas aan het eind in de focusvolgorde. Zorg ervoor dat deze vooraan in de focusvolgorde komt.
Zie pagina https://www.fundamentlosser.nl/.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://www.fundamentlosser.nl staan bovenaan de footer twee links met de teksten “phone” en “location_on” die alleen voor hulpsoftware zichtbaar zijn. Deze teksten beschrijven niet voldoende wat de bestemming van de link is.
Dit probleem komt ook in de header van de website voor. De toegankelijkheidsknoppen "Lees website voor" en "Teksgrootte" en ook de link met "Zoeken" bevatten iconen met onnodige tekstalternatieven die worden voorgelezen, bijvoorbeeld: “hearing Lees website voor”.

Op pagina https://www.fundamentlosser.nl/?s=werk bevatten meerdere links dezelfde tekst “Bewerk dit”. Deze tekst beschrijft de bestemming van de links niet voldoende, wat tot verwarring leidt, vooral voor gebruikers met cognitieve beperkingen of voor gebruikers die afhankelijk zijn van schermlezers. Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn, geven de bezoeker geen duidelijke aanwijzingen over hun bestemming. Zorg ervoor dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als “Bewerk dit” aan te vullen met de paginatitel. Omdat visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.

Op pagina https://www.fundamentlosser.nl/onze-mensen/ bevatten meerdere links dezelfde tekst “Email”. Deze tekst beschrijft de bestemming van de links niet voldoende, wat tot verwarring leidt, vooral voor gebruikers met cognitieve beperkingen of voor gebruikers die afhankelijk zijn van schermlezers. Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn, geven de bezoeker geen duidelijke aanwijzingen over hun bestemming. Zorg ervoor dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als “Email” aan te vullen met de paginatitel. Omdat visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.

Op pagina https://www.fundamentlosser.nl/?s=werk hebben de pagineringslinks korte teksten zoals: 1, 2, 3. Deze teksten beschrijven niet goed waar de links naartoe verwijzen. Voor ziende bezoekers is het duidelijk, maar voor slechtziende bezoekers en bezoekers die een schermlezer gebruiken, is het niet altijd duidelijk dat dit links naar volgende pagina’s zijn. Dit kan verbeterd worden door de linkteksten aan te vullen met het visueel verborgen woord ‘pagina’. Maak deze teksten duidelijker, zodat bezoekers die een schermlezer gebruiken weten wat de bestemming van de link is.

Op pagina https://www.fundamentlosser.nl/historie/post-timeline/hoe-het-begon-na-de-hoogmis/ functioneren de twee afbeeldingen onder de tekst als links: wanneer erop wordt geklikt, openen ze een weergave op volledig scherm van de afbeelding. Deze informatie is niet aanwezig in de HTML-code. Daardoor is het voor een blinde bezoeker niet duidelijk dat dit een link is die een grote weergave van de afbeelding opent. Dit kan worden opgelost door verborgen tekst (“opent een grote weergave”) toe te voegen of gebruik te maken van het attribuut aria-haspopup.

Pagina https://www.fundamentlosser.nl/404 bevat de instructie: “Navigeer terug naar de homepagina of kies uit een van de links hieronder.”. De links waarnaar verwezen wordt, hebben geen zichtbare tekst. Dit zorgt voor misleidende instructies en kan verwarrend zijn voor gebruikers. Zorg ervoor dat de links duidelijk zichtbare en begrijpelijke linkteksten hebben.

Advies: de links in de header bevatten overbodige teksten zoals “hearing Lees website voor”, “format_size Tekstgrootte” en “search Zoeken”, wat misleidend kan zijn voor gebruikers van ondersteunende technologieën. Aangezien deze extra teksten geen nieuwe informatie toevoegen aan de linkteksten, kunnen ze beter worden weggelaten.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van deze website is de standaard toetsenbordfocusstijl verwijderd van interactieve elementen en is er geen aangepaste focusindicator als alternatief voorzien. Zie bijvoorbeeld de links in de header en footer op pagina https://www.fundamentlosser.nl/. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina zij zich bevinden. Implementeer een aangepaste focusindicator die voldoet aan de toegankelijkheidsnormen (voldoende contrast, duidelijke visuele aanduiding).
Dit probleem doet zich ook voor bij andere elementen op andere pagina’s.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In het secundaire menu staat na “Contact” een link met een afbeelding. Deze link bevat zichtbare tekst (“Losserdoet!”) die niet is opgenomen in de toegankelijke naam (“Vrijwilligerswerk in Losser”). Zie bijvoorbeeld de pagina https://www.fundamentlosser.nl/. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren. Dit kan opgelost worden door de zichtbare tekst toe te voegen aan de toegankelijke naam, bij voorkeur vooraan.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de metadata van de PDF op https://www.fundamentlosser.nl/download/6485/?tmstv=1750855634 is de taal niet ingesteld. Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen. Dit kan worden ingesteld via de bestandseigenschappen.
Dit probleem komt ook voor in het PDF-document op https://www.fundamentlosser.nl/download/2039.

Uitkomst: Onvoldoende

Bevindingen: De primaire taal van de pagina https://www.fundamentlosser.nl/ is Nederlands (lang="nl-NL"), maar de pictogrammen voor telefoon en locatie hebben tekstalternatieven in het Engels: “phone” en “location_on”. Aangezien de pictogrammen als links functioneren, zijn hun toegankelijke namen eveneens in het Engels. Deze iconen zijn decoratief. De oplossing is hierboven al beschreven, zie 1.1.1.

Wanneer de website op een klein scherm wordt bekeken, hebben de knoppen in de header toegankelijke namen in het Engels: “hearing”, “format_size” en “search”. Deze labels worden voorgelezen door schermlezers volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Dit zorgt voor een onnatuurlijke uitspraak en vermindert de begrijpelijkheid voor gebruikers van schermlezers. Vertaal de teksten van de toegankelijke namen van de knoppen naar het Nederlands.
Dit probleem komt ook voor op de homepagina, onder de kop “Fundament laat je stralen”, bij links met telefoon- en locatie-iconen. De toegankelijke namen van deze links zijn “phone” en “location_on”.
Zie pagina https://www.fundamentlosser.nl.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.fundamentlosser.nl/contact/ staat een formulier. Op de foutmeldingen is aria-hidden=”true” gebruikt. Deze code maakt ze ontoegankelijk voor bezoekers met schermlezers. Verwijder deze code. Zie ook succescriterium 1.3.1.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.fundamentlosser.nl/gaaf-dat-je-een-cursus-wilt-gaan-volgen-hieronder-kun-jij-je-inschrijven/?instrument=Akoestisch%20gitaar is een formulier aanwezig. Sommige velden zijn verplicht en bevatten een asterisk (*-symbool) in het label. Er wordt echter niet uitgelegd wat dit symbool betekent. Een toelichting hierop is nuttig voor bezoekers met cognitieve beperkingen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.fundamentlosser.nl/contact/ worden in het formulier foutmeldingen weergegeven met de tekst “Het veld is verplicht”. In deze foutmelding wordt niet uitgelegd hoe de fout kan worden hersteld. Een goede foutmelding maakt duidelijk wat je moet doen. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld".
Hetzelfde probleem doet zich voor op pagina https://www.fundamentlosser.nl/gaaf-dat-je-een-cursus-wilt-gaan-volgen-hieronder-kun-jij-je-inschrijven/?instrument=Akoestisch%20gitaar.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header openen de knoppen “Lees website voor”, “Tekstgrootte” en “Zoeken” aanvullende inhoudssecties, maar in de code wordt niet aangegeven of deze secties geopend of gesloten zijn. Als een knop extra inhoud kan tonen en verbergen, dan moet hulpsoftware de staat van deze inhoud (zichtbaar of verborgen) kunnen bepalen. Daarvoor kan het aria-expanded-attribuut gebruikt worden. Hierdoor kunnen schermlezers gebruikers correct informeren over de huidige staat van de bijbehorende inhoudssecties. Zie bijvoorbeeld de pagina https://www.fundamentlosser.nl/.

In de header opent de knop “Lees website voor” een sectie met een interactief element met het label “Lees voor”. Dit element gedraagt zich als een knop, maar heeft niet de juiste toegankelijke rol. Hierdoor kunnen schermlezers niet doorgeven dat het om een knop gaat. Blinde bezoekers weten dus niet dat op dit element geklikt kan worden. Het gevolg is dat alle content die met deze knop kan worden geopend, ook niet toegankelijk is. Zorg dat de knop de juiste toegankelijke rol heeft.
Hetzelfde probleem doet zich voor bij dezelfde knop op pagina https://www.fundamentlosser.nl/historie/post-timeline/hoe-het-begon-na-de-hoogmis/.

Op de homepagina staat een link “Nieuwsbrief” die als een link fungeert, maar in de HTML is een button-element gebruikt dat met Javascript het gedrag van een link heeft gekregen. De rol van een button is hier niet juist gebruikt. Vervang het button-element door een a-element.

Op alle pagina’s van https://www.fundamentlosser.nl is op een klein scherm een knop voor het mobiele menu aanwezig. Dit element gedraagt zich als een knop, maar heeft niet de juiste toegankelijke rol. Hierdoor kunnen schermlezers niet doorgeven dat het om een knop gaat. Blinde bezoekers weten dus niet dat op dit element geklikt kan worden. Zorg dat de knop de juiste toegankelijke rol heeft.
Dit probleem komt ook voor bij de sluitknop in het mobiele menu.

Op alle pagina’s van https://www.fundamentlosser.nl staat bovenaan de pagina een logo dat als link functioneert. Deze link heeft niet de juiste toegankelijke rol.
Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet. Zorg ervoor dat dit element de juiste toegankelijke rol heeft. De beste oplossing is het gebruik maken van standaard HTML-elementen.
Dit probleem komt ook voor op kleine schermen en op andere plaatsen, bijvoorbeeld de links op pagina https://www.fundamentlosser.nl/404.

Op alle pagina's van https://www.fundamentlosser.nl staan bovenaan twee navigatie-elementen zonder toegankelijke namen. Dit kan gebruikers van schermlezers in verwarring brengen over welke navigatie waarvoor dient. Dit kan worden opgelost door deze navigatie-elementen toegankelijke namen te geven, bijvoorbeeld door een aria-label-attribuut met beschrijvende tekst toe te voegen.

Op alle pagina’s van https://www.fundamentlosser.nl is op een klein scherm een knop voor het mobiele menu aanwezig. Deze knop geeft echter geen informatie over de status van het menu (geopend of gesloten) aan bezoekers die dit niet kunnen zien, zoals gebruikers van schermlezers. Dit kan bijvoorbeeld opgelost worden door een tekstuele uitleg (ingeklapt/uitgeklapt) toe te voegen die voor ziende bezoekers met CSS wordt verborgen. Een andere optie is om het aria-expanded-attribuut te gebruiken op de menuknop. Dit attribuut moet de waarde “true” krijgen als het menu getoond wordt, en “false” als het menu verborgen is.

Op pagina https://www.fundamentlosser.nl/contact/ staat een formulier. Alle invoervelden in het formulier hebben geen toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef de invoervelden dus toegankelijke namen, bijvoorbeeld door label-elementen aan de velden te koppelen (vervang het name-attribuut door het id-attribuut op de input-elementen).
Hetzelfde probleem doet zich ook voor bij de invoervelden op pagina https://www.fundamentlosser.nl/gaaf-dat-je-een-cursus-wilt-gaan-volgen-hieronder-kun-jij-je-inschrijven/?instrument=Akoestisch%20gitaar.

Op pagina https://www.fundamentlosser.nl/agenda/ hebben onder “Filters” de select-elementen “Categorie”, “Datum” en “Locatie” niet de juiste toegankelijke rollen. Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet. De beste oplossing is het gebruik maken van standaard HTML-elementen, in dit geval een select-element. Als het gebruik van een native element niet mogelijk is, gebruik dan de ARIA-rol listbox.

Op pagina https://www.fundamentlosser.nl/agenda/ hebben de agenda-items niet de juiste rol: ze functioneren als links, maar hebben niet de juiste toegankelijke rol. Gebruik een native a-element om het volledige agenda-item te omwikkelen, zodat het correcte link-semantiek en ingebouwde toetsenbordondersteuning heeft. Vermijd het gebruik van een div-element voor interactief linkgedrag. Als herstructureren niet mogelijk is, zorg dan dat correcte link-semantiek en volledige toetsenbordtoegankelijkheid worden geboden.
Hetzelfde probleem doet zich voor bij nieuwsitems op pagina https://www.fundamentlosser.nl/nieuws/.

Op pagina https://www.fundamentlosser.nl/agenda/ bevatten de select-elementen “Categorie” en “Locatie” selectievakjes met correcte rollen, maar de daadwerkelijke checkbox-inputs lijken visueel verborgen te zijn (bijvoorbeeld met display: none). Daardoor wordt de aangevinkte status niet correct doorgegeven aan ondersteunende technologieën en worden gebruikers niet geïnformeerd of een optie is geselecteerd. Verberg native checkbox-inputs niet met “display:none” of vergelijkbare technieken die ze uit de toegankelijkheidsboom verwijderen. Zorg ervoor dat de checkbox toegankelijk blijft voor ondersteunende technologieën en dat de aangevinkte status programmatisch bepaalbaar is.

Pagina https://www.fundamentlosser.nl/nieuws/muziekinstrumenten-uitleen-in-de-spotlights/ bevat een iframe zonder een beschrijving die zichtbaar is voor ondersteunende technologieën. Het title-attribuut ontbreekt. Iframes moeten een goede beschrijving hebben, meestal via het title-attribuut. Daarin moet worden aangegeven welk type inhoud wordt weergegeven (bijvoorbeeld een podcast of video) en waar die inhoud over gaat. De beschrijving moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware bepalen of het de moeite waard is om de inhoud van het iframe te verkennen.
Een vergelijkbaar probleem doet zich voor op pagina https://www.fundamentlosser.nl/locaties-en-openingstijden/ bij iframes met kaarten.

Op pagina https://www.fundamentlosser.nl/historie/post-timeline/hoe-het-begon-na-de-hoogmis/ functioneren de twee afbeeldingen onder de tekst als links die bij aanklikken een weergave op volledig scherm openen. Deze links hebben geen toegankelijke naam. Hierdoor is voor gebruikers van een schermlezer onduidelijk wat de bestemming of de functie van de links is. Dit probleem hangt ook samen met succescriterium 2.4.4.

Wanneer op pagina https://www.fundamentlosser.nl/historie/post-timeline/hoe-het-begon-na-de-hoogmis/ op een van de twee afbeeldingslinks wordt geklikt, opent de afbeelding in een weergave op volledig scherm. De links voor sluiten, volgende en vorige hebben geen toegankelijke naam. Voorzie deze links van beschrijvende toegankelijke namen.

Wanneer op pagina https://www.fundamentlosser.nl/historie/post-timeline/hoe-het-begon-na-de-hoogmis/ op een van de twee afbeeldingslinks wordt geklikt, wordt een dialoogvenster geopend met de weergave op volledig scherm. Dit dialoogvenster mist zowel een correcte rol als een toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is. Voeg role="dialog" toe met aria-label of aria-labelledby voor de toegankelijke naam.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.fundamentlosser.nl/contact/ staat een formulier met reCAPTCHA. Wanneer het selectievakje is aangevinkt maar de verzendknop nog niet is ingedrukt, verschijnt na enige tijd de melding “Verificatie verlopen. Vink het selectievakje opnieuw aan.” Deze melding wordt niet aangekondigd door een schermlezer. Voeg daarom aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.
Hetzelfde probleem doet zich ook voor op pagina https://www.fundamentlosser.nl/gaaf-dat-je-een-cursus-wilt-gaan-volgen-hieronder-kun-jij-je-inschrijven/?instrument=Akoestisch%20gitaar.

Op pagina https://www.fundamentlosser.nl/agenda/ tonen de select-elementen “Categorie” en “Locatie” het aantal geselecteerde selectievakjes. Dit aantal is een statusmelding die automatisch door schermlezers moet worden aangekondigd wanneer deze verandert. De benodigde code om deze functionaliteit mogelijk te maken ontbreekt echter. Statusberichten moeten automatisch voorgelezen worden door schermlezers zodra ze verschijnen of veranderen. Voeg hiervoor aria-live-attribuut of role="status" aan de melding toe. Zorg dat de tekst duidelijk is, bijvoorbeeld “4 opties geselecteerd”.