Rapport:
Systeemonderzoek digitale toegankelijkheid website Tintengroep en Sociaal werk de Kear

Uitkomst: Onvoldoende

Bevindingen: Op de homepage van https://www.tintengroep.nl, onder de kop "Ons laatste nieuws", staan drie nieuwsartikelen met afbeeldingen. Elke afbeelding is geplaatst binnen een link. De tekstalternatieven van de afbeeldingen herhalen de tekst van de link. Bijvoorbeeld: "Voorvertoningsafbeelding: Carrefour tekent voor maatschappelijk werk in NOP". Deze afbeeldingen voegen geen extra informatie toe die niet al in de linktekst aanwezig is. Daarom kunnen ze als decoratief worden beschouwd. Om herhaling te voorkomen, is het nodig het alt-attribuut leeg te laten. Ditzelfde probleem doet zich voor op de volgende pagina's: https://www.tintengroep.nl/zoeken/?q=wer, https://www.tintengroep.nl/nieuws/, https://www.tintengroep.nl/nieuws/carrefour-tekent-voor-maatschappelijk-werk-in-nop/ (onder de kop "Ons laatste nieuws"). Daarnaast kan dit probleem zich ook voordoen op andere pagina's van de website.

Op de pagina https://www.tintengroep.nl/zoeken/?q=wer, onder de header en boven de footer, staat een decoratieve afbeelding met de betekenisloze alt-tekst "Alt test". Voor dergelijke decoratieve afbeeldingen is het beter het alt-attribuut leeg te laten (alt=""). Hetzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/agenda/ en op de pagina https://www.tintengroep.nl/privacyverklaring-en-cookiebeleid/. Om de toegankelijkheid te verbeteren, is het nodig om voor decoratieve afbeeldingen altijd een leeg alt-attribuut te gebruiken, zodat schermlezers ze kunnen negeren.

Op de pagina https://www.tintengroep.nl/nieuws/carrefour-tekent-voor-maatschappelijk-werk-in-nop/, naast de kop "Carrefour tekent voor maatschappelijk werk in NOP", staat een logo. Het alt-attribuut is leeg. Als het alt-attribuut van een afbeelding leeg is (alt=""), negeren schermlezers de afbeelding. Een lege alt-tekst betekent: deze afbeelding is puur decoratief, geeft geen informatie. Er wordt dan dus niets voorgelezen. Daarom moeten informatieve afbeeldingen altijd een alt-tekst krijgen. Voeg een alt-tekst toe die de volledige tekst van het logo bevat. Hetzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/vacatures/outreachend-jongerenwerker-3/ onder de tekst "Informatie".

Op de pagina https://www.tintengroep.nl/vacatures/, onder de kop "Vacature overzicht", worden vacatures getoond met logo's. Elk logo bevat alternatieve tekst die de zichtbare tekst van het kopje eronder herhaalt, maar de zichtbare tekst in het logo zelf ontbreekt. Bijvoorbeeld: het logo toont de tekst "sociaal werk de kear", maar de alternatieve tekst luidt: "Voorvertonings afbeelding: Outreachend Jongerenwerker". In het tekstalternatief ontbreekt dus een deel van de informatie die in het logo zichtbaar is. Dit moet worden aangevuld, zodat ook bezoekers die de afbeelding niet kunnen zien precies weten wat er staat. Voeg een alt-tekst toe die de volledige tekst uit het logo bevat. Ditzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/vacatures/outreachend-jongerenwerker-3/ onder de kop "Misschien ook interessant:".

Op de pagina https://www.tintengroep.nl/kennisdossiers/het-geheim-van-sociaal-werk/, onder de kop "Het geheim van sociaal werk", staan links naar PDF-bestanden met iconen. Deze iconen geven aan dat het om PDF-bestanden gaat, maar ze zijn als achtergrondafbeeldingen toegevoegd zonder tekstalternatief. Een afbeelding die als achtergrond is toegevoegd, is ontoegankelijk voor schermlezers. Blinde bezoekers krijgen de informatie uit deze iconen niet door. Zorg ervoor dat de informatie beschikbaar wordt gemaakt via een tekstalternatief. Dit kan door de informatie zichtbaar op de pagina te plaatsen of door de afbeelding via het <img>-element toe te voegen en de informatie in de alt-tekst op te nemen. Ditzelfde probleem doet zich ook voor op de pagina https://www.tintengroep.nl/over-ons/ onder het kopje "Klokkenluidersregeling".

Op de pagina https://www.tintengroep.nl/kennisdossiers/het-geheim-van-sociaal-werk/, binnen de sectie onder "Het geheim van sociaal werk", staat een complexe afbeelding met het bijschrift "Dit zijn de tien kernelementen van sociaal werk:". Complexe afbeeldingen zoals infographics en schema’s bevatten veel informatie die niet binnen de 150 karakters van de alt-tekst past. Deze informatie kan toegankelijk gemaakt worden door twee tekstalternatieven te bieden: een korte en een lange beschrijving. De korte beschrijving, meestal de alt-tekst, moet de locatie van de lange beschrijving aangeven. De lange beschrijving kan als tekst op de pagina zelf geplaatst worden, maar deze mag ook op een andere pagina of in een downloadbaar bestand staan.

Op de pagina https://www.tintengroep.nl/kennisdossiers/het-geheim-van-sociaal-werk/ staan twee afbeeldingen die YouTube-video’s openen. Beide afbeeldingen hebben dezelfde alternatieve tekst: “YouTube video”. Dit is onvoldoende om de inhoud te beschrijven. Voeg het onderwerp van de video toe.

In de footer op https://www.tintengroep.nl/contact/ komt een link voor met het logo voor NC-websites. Het logo is een SVG. Deze SVG heeft geen alt-tekst. Het is een informatieve afbeelding, dus het heeft alt-tekst nodig. Verzorg alt-tekst dat duidelijk maakt dat het een logo betreft van NC-websites en verwijst naar de website van dat bedrijf, bv. "Logo NC-websites, bezoek website".

In de footer en bijvoorbeeld op https://www.tintengroep.nl/contact/ worden pictogrammen gebruikt. Deze pictogrammen worden als icon font ingeladen. Dit gebeurt via de CSS- pseudo-elementen ::before en ::after, die het gewenste pictogram laten zien. Tekst die via CSS wordt toegevoegd komt in de accessibility tree. Screenreaders spreken dat karakter dus uit, en niet het pictogram. Als het gebruikte karakter een andere betekenis heeft dan het pictogram, kan dat verwarrend zijn voor gebruikers. Daarom is het belangrijk dergelijke karakters te verwijderen uit de accessibility tree. Gebruik een aria-hidden="true" op het <i>-element dat ze inlaadt.

Op elke pagina van https://www.sociaalwerkdekear.nl/ staat in de linkerbovenhoek een logo met de zichtbare tekst "sociaal werk de kear". De huidige tekstalternatief van het logo is "Logo De Kear". Dit is onvolledig, omdat niet alle zichtbare tekst uit het logo wordt vermeld. De alt-tekst moet worden aangepast zodat deze de volledige tekst van het logo bevat. Zo weten bezoekers die de afbeelding niet kunnen zien precies wat er staat. Daarnaast staat op elke pagina, in de footer onder de tekst "Sociaal werk De Kear is onderdeel van Tinten", een logo met de zichtbare tekst "Tinten". De tekstalternatief van dit logo is eveneens "Logo De Kear", wat niet overeenkomt met de zichtbare tekst. De alt-tekst moet worden aangepast zodat deze de daadwerkelijke zichtbare tekst van het logo bevat.

Op https://www.sociaalwerkdekear.nl/teams/ is er geen toegankelijk alternatief aanwezig voor de kaart waar je kiest voor Team Zuid of Team Noord. De gemeenten die zichtbaar zijn op de kaart worden nergens gemeld. Beschrijf in de tekst op de pagina welke gemeenten onder welk team vallen om een toegankelijk alternatief te voorzien.

Uitkomst: Niet aanwezig

Bevindingen: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

Uitkomst: Niet aanwezig

Bevindingen: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

Uitkomst: Niet aanwezig

Bevindingen: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Bevindingen: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

Uitkomst: Onvoldoende

Bevindingen: In de footer op alle pagina's van https://www.tintengroep.nl zijn de volgende teksten niet gemarkeerd als koppen: "Tintengroep", "Over ons" en "Contact opnemen".
Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Zijn koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast. Ditzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/contact/ met de teksten "Contactgegevens", "Informatie" en "Neem contact met ons op". Zie ook https://www.sociaalwerkdekear.nl.

Op de pagina https://www.tintengroep.nl/contact/ staat een formulier. Wanneer het formulier wordt ingediend, verschijnt een dialoogvenster met de tekst "Inzending succesvol ontvangen". Deze tekst is een kop, maar is niet gemarkeerd als een kop.
Hetzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/vacatures/outreachend-jongerenwerker-3/ met de tekst "Informatie".

Onderstaande bevindingen hebben betrekking op de content van de pagina.
Op de pagina https://www.tintengroep.nl/toegankelijkheidsverklaring/ zijn de volgende koppen gemarkeerd met een strong-element: "Klachtenfunctionaris", "Klachtencommissie" en "Met wie neem je contact op als je niet tevreden bent?".
Het element strong 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. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel.
Hetzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/vacatures/outreachend-jongerenwerker-3/ en in de accordions op de pagina https://www.tintengroep.nl/privacyverklaring-en-cookiebeleid/.

Onderstaande bevinding heeft betrekking op de content van de pagina.
Op de pagina https://www.tintengroep.nl/vacatures/outreachend-jongerenwerker-3/, onder de link "Direct solliciteren", staan 4 alinea's tekst. In de HTML zijn deze alinea's gemarkeerd als één div-element. HTML-elementen dragen een bepaalde betekenis over. Voor alinea’s wordt bijvoorbeeld het p-element gebruikt. Door HTML-elementen op de juiste manier te gebruiken, blijft de visuele structuur van de informatie gelijk aan de structuur in de code. Daardoor wordt deze structuur goed doorgegeven aan voorleessoftware. Gebruik in deze tekst vier p-elementen.

Onderstaande bevinding heeft betrekking op de content van de pagina. Op pagina https://www.tintengroep.nl/kennisdossiers/het-geheim-van-sociaal-werk/, onder de video staat tekst die in een strong- en em-element is opgenomen: “geheim van het sociaal werk ?”. Dit is geen correct gebruik van deze semantische elementen. Gebruik CSS om tekst opvallend te stijlen.

Op de pagina https://www.tintengroep.nl/privacyverklaring-en-cookiebeleid/, onder de kop "Privacyverklaring en cookiebeleid", staan secties met ingeklapt inhoud (de zogenaamde accordions). De teksten die de verborgen secties openen en sluiten missen de rol van koppen. De teksten waarmee je delen van een accordion kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Zet de knop in een heading-element.

Op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/ staat een formulier. De volgende teksten zijn koppen, maar zijn niet als zodanig gemarkeerd: "Jouw gegevens:" en "Gegevens zorgsituatie:". Gebruik headings-element in deze teksten. Een alternatieve oplossing is om de invoervelden die bij deze gropeslabels horen in het fieldset-element te plaatsen en de tekst in het legend-element te zetten om deze groep te benoemen.

Op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/ staat een formulier. Wanneer het formulier wordt ingediend met lege velden of onjuiste gegevens, kleuren de randen van de invoervelden rood om aan te geven dat hier een fout is gemaakt. Visueel is te zien dat hier een fout is gemaakt. De schermlezer krijgt deze informatie niet. Dit kan worden opgelost door tekst of een aria-attribuut toe te voegen aan de velden.

Uitkomst: Onvoldoende

Bevindingen: Op de homepage https://www.tintengroep.nl, onder de kop "Ons laatste nieuws", is de volgorde van de HTML-elementen in de nieuwsartikelen momenteel: afbeelding, kop, tekst. Als deze artikelen van boven naar beneden worden voorlezen door een schermlezer, is niet duidelijk welke afbeeldingen bij welk artikel horen. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken. Dit kan worden opgelost door alle inhoud (afbeeldingen en tekst) die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken. Een alternatieve oplossing is om alle afbeeldingen bij de artikelen als decoratief te markeren. Laat hiervoor de alt-tekst leeg (alt="" op het img-element). Dan wordt de afbeelding onzichtbaar voor de schermlezer. De leesvolgorde is dan: koptekst - inhoud. Hetzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/zoeken/?q=wer, op de pagina https://www.tintengroep.nl/nieuws/, op de pagina https://www.tintengroep.nl/nieuws/carrefour-tekent-voor-maatschappelijk-werk-in-nop/ onder de kop "Lees meer nieuws" en andere pagina's. Zie ook de pagina https://www.sociaalwerkdekear.nl/.

Uitkomst: Niet aanwezig

Bevindingen: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.tintengroep.nl/inloggen/ staat een formulier met invoervelden die persoonlijke informatie verzamelen: "e-mailadres" en het wachtwoord. Het autocomplete-attribuut ontbreekt. Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut 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. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/ staat een formulier. Wanneer het formulier wordt ingediend met lege velden of onjuiste gegevens, kleuren de randen van de invoervelden rood om aan te geven dat hier een fout is gemaakt. Visueel is te zien dat hier een fout is gemaakt. Dit heeft impact op kleurenblinden en slechtzienden. Dit kan worden opgelost door foutmelding toe te voegen aan de velden.

Op https://www.tintengroep.nl/contact/ valt de link van het e-mailadres niet op tussen de gewone lopende tekst. Dit heeft impact op slechtzienden en kleurenblinden. Techniek G183 in WCAG staat toe dat links in gewone tekst niet onderlijnd zijn als ze voldoen aan de volgende voorwaarden: de kleur van de links heeft een contrastverhouding van minstens 3:1 vergeleken met de kleur van de omliggende tekst en de kleur van de links heeft een contrastverhouding van minstens 4,5:1 ten opzichte van de eigen achtergrond. (Deze voorwaarden gelden voor elke linktoestand, dus ook bij hover en focus.) Minstens één van deze voorwaarden is niet vervuld. Onderstreep de links. Dit speelt ook op https://www.tintengroep.nl/welzijnsorganisaties/.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De website bevat een knop voor een modus met hoog contrast, bedoeld om het contrast te verbeteren voor gebruikers met een hogere visuele contrastbehoefte. De evaluatie van de website is uitgevoerd terwijl deze modus was ingeschakeld.
Op de pagina https://www.tintengroep.nl/zoeken/?q=wer staat een paginering. De link "Volgende", weergegeven in blauw op een witte achtergrond, heeft een te laag kleurcontrast van 4:1. Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn om aan de toegankelijkheidseisen te voldoen.

Op de pagina https://www.tintengroep.nl/inloggen/ bevat het formulier twee knoppen, "Inloggen" en "Sluiten". Het kleurcontrast is ook hier te laag: 3,1:1 voor witte tekst op een lichtgroene achtergrond en 3,7:1 voor witte tekst op een grijze achtergrond. Voor teksten die kleiner zijn dan 24px en niet vetgedrukt, is een minimale contrastverhouding van 4,5:1 vereist. Hetzelfde probleem doet zich voor bij de knop "Wachtwoord vergeten?" na het klikken erop.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Bevindingen: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van https://www.tintengroep.nl, wanneer bekeken bij een schermresolutie van 1280 bij 1024 en ingezoomd tot 400%, nemen de sticky header en footer het grootste deel van de pagina in beslag. Bijna de gehele inhoud van de pagina is niet zichtbaar. Als een bezoeker inzoomt tot 400% op een scherm van 1280 bij 1024 pixels, moet de inhoud van de pagina leesbaar zijn. Zie ook https://www.sociaalwerkdekear.nl/.

Uitkomst: Onvoldoende

Bevindingen: De website bevat een knop voor een modus met hoog contrast, bedoeld om het contrast te verbeteren voor gebruikers met een hogere visuele contrastbehoefte. De evaluatie van de website is uitgevoerd terwijl deze modus was ingeschakeld.

Op de pagina https://www.tintengroep.nl/contact/ staan onder de tekst "Neem contact met ons op" invoervelden. De contrastverhouding tussen de grijze randkleur van deze velden en de witte achtergrond van de pagina is slechts 1,1:1. Dit is te laag, omdat de randen van interactieve elementen zoals invoervelden minimaal een contrastverhouding van 3,0:1 moeten hebben met de achtergrond. Ditzelfde probleem doet zich ook voor op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/.

Op de pagina https://www.tintengroep.nl/contact/ verschijnt een dialoogvenster met een "OK"-knop wanneer het formulier wordt ingediend. Wanneer deze knop de toetsenbordfocus krijgt, is dit zichtbaar door een lichtblauwe focusrand. De contrastverhouding tussen de focusrand en de witte achtergrond is slechts 1,4:1, terwijl deze minimaal 3:1 zou moeten zijn. Dit maakt het voor slechtzienden en kleurenblinden moeilijk of onmogelijk om het verschil te zien. Het gebruik van een kleurcombinatie met voldoende contrast zou dit probleem verhelpen. Ditzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/zoeken/?q=wer, bij het vergrootglaspictogram en de link "Volgende" in de paginering. Het komt ook voor op de pagina https://www.tintengroep.nl/inloggen/, bij de invoervelden en knoppen, en op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/, bij de invoervelden "Korte omschrijving van de zorgsituatie:" en "Zijn er ook jonge mantelzorgers betrokken?".

Op de pagina https://www.tintengroep.nl/inloggen/ staan invoervelden waarbij de contrastverhouding tussen de lichtgrijze randkleur en de witte achtergrond 1,5:1 is. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.tintengroep.nl/kennisdossiers/het-geheim-van-sociaal-werk/ staan video's. Deze video's zijn verborgen achter de afbeeldingen en kunnen niet met het toetsenbord geactiveerd worden. Bezoekers die de website zonder een computermuis met alleen het toetsenbord navigeren moeten alle interactieve elementen kunnen bedienen. Zorg ervoor dat alle interactieve elementen met toetsenbord te bedienen zijn.

Op https://www.tintengroep.nl/ zijn de blokken "Kennisdossiers" en "Contact" in de tabvolgorde gezet: <li class="nav-item" tabindex="0"></li>. Het is niet toegestaan om niet-interactieve m.b.h van tabindex=0" in de tabvolgorde te zetten. Verwijder het attribuut.

Op https://www.tintengroep.nl/ zijn de opties in het menublok "Kennisdossiers" niet bereikbaar als terug tabt vanaf bijvoorbeeld het blok Contact. Men moet dan weer vooruit tabben om bij alle opties voor "Kennisdossiers" te komen. Zorg ervoor dat de opties ook bedienbaar zijn als men terug tabt.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.tintengroep.nl/kennisdossiers/het-geheim-van-sociaal-werk/, onder de kop "Het geheim van sociaal werk", staat een video. Binnen deze videospeler is het mogelijk om sneltoetsen met één karakter te gebruiken. De Youtube-video’s gebruiken sneltoetsen, zoals de ‘k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig. Dit kan opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).

Uitkomst: Onvoldoende

Bevindingen: Оp de pagina https://www.tintengroep.nl/contact/ staat een formulier. Dit formulier gebruikt alleen HTML5-validatie, bijvoorbeeld in het veld "Voornaam".
Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding blijft te kort staan. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.
Hetzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/inloggen/ en op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.tintengroep.nl/zoeken/?q=wer is er een skiplink, maar deze werkt niet goed. Wanneer de skiplink wordt geactiveerd, gaat de focus niet naar de unieke inhoud, maar wordt een nieuwe pagina "https://www.tintengroep.nl/zoeken/#content" geladen. Er moet een manier zijn om herhalende content die op elke pagina staat over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee 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 focus krijgt. Zorg dat de skiplink werkt.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van https://www.tintengroep.nl, wanneer ingezoomd, verschijnt een menuknop bovenaan de pagina. Deze knop opent een mobiel menu. Na het doorlopen van alle menu-items kan de toetsenbordfocus het mobiele menu verlaten en verschuift deze naar de onderliggende pagina. Bij dit soort menu's moet de toetsenbordfocus goed worden beheerd. 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 de bezoeker op de sluitknop heeft geklikt of de ESC-toets heeft ingedrukt. Een alternatieve oplossing is om het menu automatisch te sluiten zodra de toetsenbordfocus het menu verlaat.

Op de pagina https://www.tintengroep.nl/contact/ verschijnt een dialoogvenster wanneer het formulier wordt ingediend. Momenteel kan de toetsenbordfocus het dialoogvenster verlaten terwijl het nog open is, waardoor de focus verschuift naar de onderliggende pagina. Dit is niet correct. Bij dit soort dialoogvensters moet de toetsenbordfocus goed worden beheerd. Wanneer het venster actief is, moet de focus 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. Een andere optie is om het venster automatisch te sluiten zodra de focus eruit gaat. Hetzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/inloggen/ en op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/.

Op de pagina https://www.tintengroep.nl/nieuws/carrefour-tekent-voor-maatschappelijk-werk-in-nop/ naast de kop "Carrefour tekent voor maatschappelijk werk in NOP" staat een link met een afbeelding. Deze link opent een vergrote weergave van de afbeelding. Na het sluiten van deze afbeelding keert de focus niet terug naar de link of het eerst volgende element op de pagina, maar begint vanaf het begin van de pagina. Dit is niet correct en moet worden gecorrigeerd, zodat de focus na het sluiten van de afbeelding op de juiste plaats landt. Ditzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/kennisdossiers/het-geheim-van-sociaal-werk/ onder de kop "Het geheim van sociaal werk".

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.sociaalwerkdekear.nl/teams/, onder "Kies je wijk", staat een kaart met twee links: "Team Noord" en "Team Zuid". De toegankelijke namen van deze links bevatten veel meer tekst dan nodig, zoals "Team Noord Teroele Legemeer Scharsterbrug Dijken Langweer Boornzwaag Joure Broek Snikz...". Deze extra tekst maakt het linkdoel niet duidelijker. Zorg ervoor dat alle links een duidelijk en beknopt linkdoel hebben.
Op alle pagina’s van https://www.sociaalwerkdekear.nl/, in de footer, onder de tekst "Sociaal werk De Kear is onderdeel van Tinten", staat een logo met de zichtbare tekst "Tinten". Deze afbeelding fungeert als een link, maar de alternatieve tekst is "Logo De Kear". Het doel van de link is niet duidelijk.

Advies: Gebruik geen display: none op elementen die zichtbaar moeten zijn voor schermlezers. In het hoofdmenu op de homepagina van https://www.tintengroep.nl staat een afbeelding van een huisje dat fungeert als link naar de homepagina. Deze link bevat een verborgen tekst die zichtbaar zou moeten zijn voor schermlezers, maar dat is momenteel niet het geval.
De link wordt niet afgekeurd omdat het title-attribuut op de link het linkdoel aangeeft. Dit is echter de minst robuuste manier om een link van content (zoals het doel en de naam) te voorzien. Het is beter om een verborgen tekst te gebruiken die op zo’n manier verborgen is dat deze niet zichtbaar is op het scherm, maar wel toegankelijk is voor schermlezers.

Advies: Op de homepage van https://www.tintengroep.nl, boven de kop "Tintengroep", zijn er links met title-attributen die dezelfde tekst bevatten als de linktekst, bijvoorbeeld "Sociaal werk". Deze herhaling zorgt ervoor dat gebruikers van schermlezers dezelfde tekst twee keer achter elkaar te horen krijgen. Voegt een title-attribuut geen nieuwe informatie toe aan de linktekst? Dan kan dit beter worden weggelaten. Hierdoor wordt het aantal herhalingen voor bezoekers met een schermlezer verminderd. Dezelfde situatie doet zich voor op de pagina https://www.tintengroep.nl/toegankelijkheidsverklaring/ onder de kop "Toch op zoek naar iets anders?", op de pagina https://www.tintengroep.nl/kennisdossiers/het-geheim-van-sociaal-werk/ onder de kop "Toch op zoek naar iets anders?", op de pagina https://www.tintengroep.nl/over-ons/ onder de kop "Toch op zoek naar iets anders?" en op andere pagina's.

Uitkomst: Voldoende

Uitkomst: Voldoende

Bevindingen: Op alle pagina's van https://www.tintengroep.nl, wanneer bekeken op een klein scherm, verschijnt er een menuknop. Deze zogenaamde hamburgerknop opent het mobiele menu. De toegankelijke naam van deze knop is "Open navigatie". Wanneer het menu geopend is, verandert de functie van de knop, maar deze wijziging wordt niet weerspiegeld in de naam van de knop. Als een knop uit een afbeelding bestaat, moet het tekstalternatief van die afbeelding niet beschrijven wat op de afbeelding te zien is, maar wat de functie van de knop is. Wanneer de functie verandert, moet het tekstalternatief eveneens worden aangepast (bijvoorbeeld 'menu openen' of 'menu sluiten').

Op de pagina https://www.tintengroep.nl/contact/ verschijnt een dialoogvenster met een "OK"-knop wanneer het formulier wordt ingediend. De functie van deze knop is om het dialoogvenster te sluiten. De toegankelijke naam van de knop is echter "OK". Deze naam beschrijft de functie van de knop niet. Een blinde bezoeker weet hierdoor niet wat de knop precies doet. Voeg een tekst toe die de functie van de knop duidelijk beschrijft.
Hetzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/contact/ en op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/.

Op de pagina https://www.tintengroep.nl/contact/ staat een iframe met een kaart. De titel van dit iframe beschrijft niet het type inhoud. Het title-attribuut van het iframe mist het woord "kaart". Iframes moeten een duidelijke en informatieve beschrijving hebben, meestal opgenomen in het title-attribuut. Deze beschrijving moet aangeven welk type inhoud het betreft (zoals een kaart of podcast) en waar de inhoud over gaat. De beschrijving moet uniek en betekenisvol zijn, zodat blinde bezoekers kunnen beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Op de pagina https://www.tintengroep.nl/kennisdossiers/het-geheim-van-sociaal-werk/ staan verschillende iframes. Het title-attribuut van elk iframe bevat echter alleen de tekst: "Youtube video". Deze tekst is niet uniek en biedt onvoldoende informatie over de inhoud van de video's.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van https://www.tintengroep.nl, wanneer bekeken op een klein scherm, verschijnt er een menuknop. De toetsenbordfocus is niet zichtbaar op de menuknop. 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 waar op de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Op de pagina https://www.tintengroep.nl/nieuws/carrefour-tekent-voor-maatschappelijk-werk-in-nop/, naast de kop "Carrefour tekent voor maatschappelijk werk in NOP", staat een link met een afbeelding. Deze link opent een vergrote versie van de afbeelding in een nieuw venster. Dit venster bevat een sluitknop ("x"), maar de toetsenbordfocus is niet zichtbaar op deze knop. Hetzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/kennisdossiers/het-geheim-van-sociaal-werk/ onder de kop "Het geheim van sociaal werk".

Op de pagina https://www.tintengroep.nl/privacyverklaring-en-cookiebeleid/, onder de kop "Privacyverklaring en cookiebeleid", staan secties met ingeklapte inhoud. De toetsenbordfocus is niet zichtbaar op deze secties.

Op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/ staat een formulier. De toetsenbordfocus is niet zichtbaar op alle keuzerondjes en selectievakjes in het formulier. Er wordt geen aangepaste focusstijl aangeboden. Wanneer het venster met de opties openklapt, is het niet duidelijk waar de focus zich bevindt. Dit kan leiden tot ongewenst activeren van opties en is verwarrend voor bezoekers.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.tintengroep.nl/nieuws/carrefour-tekent-voor-maatschappelijk-werk-in-nop/, naast de kop "Carrefour tekent voor maatschappelijk werk in NOP", staat een logo. Deze afbeelding fungeert als een link. De zichtbare tekst is "Carrefour samen kom je verder". De toegankelijke naam is "Afbeelding vergroot openen". De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan.

Op alle pagina’s van https://www.sociaalwerkdekear.nl/ staat bovenaan de pagina een logo. Deze afbeelding fungeert als een link. De zichtbare tekst is "sociaal werk de kear". De toegankelijke naam is "Logo De Kear". Deze link is niet met stem te bedienen.

Op alle pagina’s van https://www.sociaalwerkdekear.nl/, in de footer, onder de tekst "Sociaal werk De Kear is onderdeel van Tinten", staat er een logo met de zichtbare tekst "Tinten". Deze afbeelding fungeert als een link. De alternatieve tekst is "Logo De Kear". Deze link is niet met stem te bedienen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/ staat een select-element met de vraag "Aan wie bied je zorg of ondersteuning?". Wanneer een bezoeker uitsluitend met het toetsenbord navigeert, klapt het gedeelte met opties open, en kan de bezoeker met de tab-toets in het venster met opties komen. Het is echter niet mogelijk om de opties met het toetsenbord te verkennen. Na het selecteren van een optie klapt het venster automatisch dicht, en de focus wordt direct naar een ander veld gestuurd. Dit kan verwarrend zijn voor bezoekers die alleen met het toetsenbord navigeren. Wanneer de toetsenbordfocus op een element wordt geplaatst, mag dit niet automatisch leiden tot het doorschuiven van de focus naar een ander element. Zorg ervoor dat bezoekers met het toetsenbord de opties in het select-element probleemloos kunnen verkennen en selecteren.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.tintengroep.nl/contact/ staat een formulier. Wanneer het formulier wordt ingediend met lege velden of onjuiste gegevens, verschijnen de HTML5-foutmeldingen. Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding is soms kortaf en onvolledig. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.
Hetzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/inloggen/ en op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/.

Op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/ staat een formulier. Wanneer het formulier wordt ingediend met lege velden of onjuiste gegevens, verschijnen er geen foutmeldingen in tekst. De foutmelding wordt alleen in kleur gegeven. Dit is al genoemd onder succescriterium 1.4.1. Een goede foutmelding bestaat uit tekst en maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.tintengroep.nl/contact/ staat een formulier. Wanneer het formulier wordt ingediend met lege velden of onjuiste gegevens, verschijnen de HTML5-foutmeldingen en foutsuggesties. Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding is soms kortaf en onvolledig. Voeg daarom altijd zelf foutsuggesties toe aan het formulier.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van https://www.tintengroep.nl, in de header, staat een hoogcontrastknop. Deze knop heeft verschillende toestanden en kan ingedrukt worden. Deze informatie is echter niet beschikbaar voor de schermlezer. Hierdoor weet een bezoeker met een schermlezer niet wat de staat van de knop is. Dit kan worden opgelost door bijvoorbeeld het aria-pressed-attribuut te gebruiken met de juiste waarde, die aangeeft of de knop ingedrukt is of niet. Zie ook https://www.sociaalwerkdekear.nl.

Op alle pagina's van https://www.tintengroep.nl, in de footer, staan socialmedialinks. Deze links hebben een toegankelijke naam door het font-icon wat wordt gebruikt en via CSS wordt ingeladen. Hierdoor hebben de links een onbruikbare toegankelijke naam voor spraakbesturing en wordt het gebruikte karakter of icoon uitgesproken door screenreaders, wat verwarrend is. Verberg de font icons door aria-hidden te gebruiken op het <i> element dat ze inlaadt en geef deze links een visueel verborgen tekst met de naam van het netwerk. Zie ook https://www.sociaalwerkdekear.nl.

Op de pagina https://www.tintengroep.nl/nieuws/carrefour-tekent-voor-maatschappelijk-werk-in-nop/, onder de kop "Carrefour tekent voor maatschappelijk werk in NOP", staan sociale-medialinks die geen toegankelijke naam hebben. Hetzelfde probleem doet zich voor op de pagina https://www.tintengroep.nl/vacatures/outreachend-jongerenwerker-3/.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://www.tintengroep.nl/inloggen/ staat een formulier. Wanneer dit formulier wordt ingediend, verschijnt er een dialoogvenster met de tekst "De door jou ingevulde gegevens zijn onjuist. Controleer de invoer en probeer opnieuw". Deze tekst krijgt geen focus en wordt niet gelezen door de schermlezer. Dit is een statusbericht. Een schermlezer kan dit bericht alleen aankondigen aan een blinde bezoeker als het bericht als statusbericht is gemarkeerd in de code. Hiervoor moet het bericht het attribuut aria-live="polite" of role="status" krijgen. Dit zorgt ervoor dat schermlezers het bericht automatisch aankondigen. Hetzelfde probleem doet zich voor wanneer de knop "Wachtwoord vergeten?" wordt ingedrukt. Dit probleem is ook aanwezig op de pagina https://www.tintengroep.nl/contact/ en op de pagina https://www.sociaalwerkdekear.nl/mantelzorg/aanmelden-mantelzorger/.