Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website CoolSúdwest gemeente Súdwest-Fryslân

(Alleen de bevindingen)

Scope van de evaluatie

Naam website CoolSúdwest gemeente Súdwest-Fryslân
Datum 20 augustus 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op coolsudwest.nl.
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 34

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Het logo van de organisatie linksboven op iedere pagina is niet van een alternatieve tekst voorzien. Het alt-attribuut op deze afbeelding ontbreekt. Zorg voor een goede alternatieve tekst, bijvoorbeeld ‘Logo Cool Sudwest’.

Bevinding 2: Op pagina https://coolsudwest.nl/ staat onder de kop 'Partners' een afbeelding zonder alt-attribuut. Deze afbeelding moet een tekstalternatief krijgen dat duidelijk maakt welke organisaties allemaal partner zijn. Dit geld ook voor de afbeelding linksonder het menu, de afbeelding met de logo's van 'Rookvrije generatie' en 'NIX 18' heeft ook geen alt-attribuut. Deze problemen komen ook voor op andere pagina's. Een img-element dat in beeld staat moet een alt-attribuut hebben om te voldoen.

Bevinding 3: Op pagina https://coolsudwest.nl/activiteiten/jongerencentrum-bolsward-elke-woensdagavond-1900-2130-uur-en-vrijdagavond-1900-2130/ staat een logo van Afslag 18 Jongerencentrum. De logo heeft de alternatieve tekst 'A18', dat is niet voldoende. Tevens komt de visuele logo tekst verder niet in geschreven vorm op de pagina voor. Zorg voor een gehele beschrijving zoals 'Logo Afslag 18 Jongerencentrum'.

Bevinding 4: Op pagina https://coolsudwest.nl/activiteiten/ staat een afbeelding bij het artikel over wijk voetbal. De afbeelding heeft de alternatieve tekst "Panna Ko S2 190919 3 Slide 1500X430". Zorg voor een duidelijke alternatieve tekst. Indien de afbeelding puur decoratief is mag er ook een leeg tekstalternatief gebruikt worden.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 5: Op pagina https://coolsudwest.nl/ staat een afbeelding van twee meisjes met de teksten "nix 18, omdat ik van je hou" en "wat ga jij doen?". De teksten staan als koppen van niveau 2 en niveau 3 op de pagina. Deze teksten zijn geen koppen die iets zeggen over andere content. Doordat de afbeelding genegeerd wordt door hulpsoftware is het niet mogelijk om een relatie tussen de tekst en de afbeelding aan te geven. Het advies is dan ook om de afbeelding op te maken als img-element zodat de relatie tussen de meisjes en de tekst op de afbeelding goed aangegeven kan worden. Hiervoor zou eventueel een figure-element gebruikt kunnen worden. De huidige situatie voldoet sowieso niet doordat er onder de kop "wat ga jij doen?" geen content staat. De deze kop volgt direct de kop "Onderzoek".

Bevinding 6: Bij invoering van een niet-bestaande URL (bijvoorbeeld https://coolsudwest.nl/404) wordt men naar de hoofdpagina gebracht. Dit is verwarrend voor toetsenbordgebruikers, die mogelijk een foutieve domeinnaam hebben ingevoerd beginnend met coolsudwest.nl. Zorg voor een goede foutpagina.

Bevinding 7: Op de website wordt tekst via CSS geplaatst. Bijvoorbeeld "resultaten onderzoek" op pagina https://coolsudwest.nl/home/resultaten-onderzoek/#. Indien een bezoekers ten behoeve van de leesbaarheid de CSS uitschakelen of hun eigen stylesheet inladen, is verdwijnt deze informatie van de pagina. Plaats tekst slechts in de HTML.

Bevinding 8: Op pagina https://coolsudwest.nl/home/in-gesprek/ worden onder de kop ‘Wat doet Cool Súdwest voor jou?’ visuele subkoppen opgemaakt middels het strong-element. Dit is bedoeld om nadruk te leggen op enkele woorden, niet ten behoeve van styling. Gebruik in dit geval de bestaande koppenstructuur en gebruik voor deze subkoppen een h3 kop.

Bevinding 9: De PDF op pagina https://coolsudwest.nl/media/1025/0882_-a4-factsheet-preventie-ijslandmodel_stijl-cool-sudwest-2021_digi.pdf is niet gecodeerd (van tags voorzien). Dit betekent dat er de documentstructuur niet is te bepalen. Er kan daardoor bijvoorbeeld niet worden bepaald wat koppen zijn, de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF code laag zoals semantische koppen en alt-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan. Dit probleem doet zich ook voor in de PDF op pagina https://coolsudwest.nl/media/1028/1900435-gswf-factsheet-preventie-ijslandmodel-a4-losse-paginas_digi.pdf.

Bevinding 10: Advies: Op pagina https://coolsudwest.nl/over-cools%C3%BAdwest/ is geen gebruik gemaakt van een correcte koppen-volgorde in HTML. Omdat gebruikers van hulpsoftware zoals een screenreader op de pagina kunnen navigeren door bijvoorbeeld een lijst van koppen op te vragen, is het belangrijk een goede koppenvolgorde aan te houden. Hierbij worden geen koppen overgeslagen. Een goede koppenstructuur begint bij een kopniveau 1 voor de titel van de pagina, kopniveau 2 voor de koppen, kopniveau 3 voor de tussenkoppen, et cetera. Deze situatie komt op meerdere pagina’s voor, bijvoorbeeld op pagina https://coolsudwest.nl/activiteiten/.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 11: Op pagina https://coolsudwest.nl/ staan in de tekst onder de kop "Contact" twee oranje (HEX #D98217) links in de witte tekst (HEX #FFFFFF). Om deze links goed te kunnen onderscheiden van de andere tekst moet die meer verschil hebben met de tekst. Het advies is om de links in de tekst te onderstrepen. Op die manier zijn links visueel te onderscheiden voor gebruikers die het verschil in kleur niet (goed) kunnen waarnemen. Dit type probleem komt op bijna alle pagina's voor, de homepage is hier als voorbeeld gebruikt. Bijvoorbeeld op pagina https://coolsudwest.nl/over-cools%C3%BAdwest/ staan in totaal zeven links met dit probleem.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 12: Op pagina's https://coolsudwest.nl/ en https://coolsudwest.nl/404/ staan meerdere witte teksten (HEX #FFFFFF) op een oranje achtergrond (HEX #D98217). Het contrast tussen deze twee kleuren is met 2,9:1 niet voldoende. Alle witte tekst op oranje achtergrond voldoet nu niet aan de eisen van dit succescriterium. Het grote menu op deze pagina staat voor een deel op een afbeelding. De plaats van de tekst op de afbeelding is afhankelijk van de schaal en grootte van het venster van de gebruiker. Het probleem is dat de witte tekst nu niet altijd voldoende contrast heeft met de afbeelding. Tekst die bijvoorbeeld op het gezicht van de drinkende jongen staat heeft met 2,7:1 niet voldoende contrast. Dit tweede type probleem met tekst op een afbeelding komt ook op andere pagina's voor zoals https://coolsudwest.nl/contact/ en https://coolsudwest.nl/home/social-media/.

Bevinding 13: Bij hover over items in de navigatiebalk, bijvoorbeeld op https://coolsudwest.nl/, is er sprake van licht oranje tekst (HEX #F0CDA2) op een donkeroranje achtergrond (HEX #D98217). Het is hier sprake van een 2:1 contrastratio waar dit minimaal 4,5:1 behoort te zijn. Kies voor een kleurencombinatie met hoger contrast.

Bevinding 14: Op pagina https://coolsudwest.nl/jongeren/ staat roze tekst (HEX #E555A4) op een blauw achtergrond (HEX #004BEA). Deze kleurencombinatie levert een contrast van 1,9:1 op, waar dit minimaal 4,5:1 dient te zijn op de kleine teksten ('lees meer') en minimaal 3:1 op de grote teksten ('Zaalvoetbal in Sneek op woensdagmiddag van 16:00 tot 17:00') om aan de eisen van dit criterium te voldoen.

Bevinding 15: Bij hover over email linkteksten in de footer, bijvoorbeeld op https://coolsudwest.nl/jongeren/, is het contrastratio tussen de zwarte achtergrond (HEX #000000) en de donkerpaarse tekst (HEX #97386C) te laag. Dit is 3,1:1 waar dit minimaal 4,5:1 behoort te zijn.

Bevinding 16: Op pagina https://coolsudwest.nl/over-cools%C3%BAdwest/ staat tekst in de footer, bijvoorbeeld "Alle rechten voorbehouden - CoolSúdwest 2020". De lichtgroene tekst (HEX #667D79) op de donkergroene achtergrond (HEX #00261F) heeft een contrastratio van 3,7:1 waar dit minimaal 4,5:1 behoort te zijn. Deze tekst met dit te lage contrast komt ook op andere pagina's voor zoals https://coolsudwest.nl/ en https://coolsudwest.nl/jongeren/ (daar is de kleur anders maar het contrast ook te laag).

Bevinding 17: In de PDF op pagina https://coolsudwest.nl/media/1025/0882_-a4-factsheet-preventie-ijslandmodel_stijl-cool-sudwest-2021_digi.pdf staat op meerdere plekken tekst met een te laag contrast. Er is bijvoorbeeld op de tweede bladzijde khaki tekst (HEX #C3802A) op een grijsgroene achtergrond (HEX #DFE1DF). Het contrast is hier 2,5:1 waar dit minimaal 4,5:1 behoort te zijn. Pas de kleurencombinatie aan.

Bevinding 18: In de PDF op pagina https://coolsudwest.nl/media/1028/1900435-gswf-factsheet-preventie-ijslandmodel-a4-losse-paginas_digi.pdf heeft de grote groene tekst 'Cool Súdwest-Fryslân' bovenaan (HEX #ACC435) een contrast van 1,8:1 met de blauwe achtergrond (HEX #F2F8FD). Dat moet minimaal 3,0:1 zijn om te voldoen. Dit geldt ook voor andere groene content in deze PDF. Dit geld ook voor blauwe (HEX #4BAFE8) content in deze PDF. Die kleur heeft op meerdere plaatsen niet voldoende contrast met de witte tekst of witte achtergrond.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 19: Indien pagina's bij een schermgrootte van 1280x1024 pixels herschaald worden naar de door dit criterium gestelde de waarden, ontstaan problemen met het hamburgermenu waar de navigatiebalk in wordt ondergebracht. Op bijvoorbeeld https://coolsudwest.nl/home/social-media/ gaat bij 200% zoom het hamburgermenu over de pagina staan. Indien men met het toetsenbord door de items tabt, wordt de sluitknop overgeslagen en gaat de focus door op de onderliggende pagina. Zorg ervoor dat alvorens verder navigeren, het hamburgermenu kan worden gesloten. Zie tevens SC 2.1.1.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 20: Indien pagina's bij een schermgrootte van 1280x1024 pixels herschaald worden naar de door dit criterium gestelde de waarden, ontstaan problemen met het hamburgermenu waar de navigatiebalk in wordt ondergebracht. Op bijvoorbeeld https://coolsudwest.nl/home/social-media/ gaat bij 200% zoom het hamburgermenu over de pagina staan. Indien men met het toetsenbord door de items tabt, wordt de sluitknop overgeslagen en gaat de focus door op de onderliggende pagina. Zorg ervoor dat alvorens verder navigeren, het hamburgermenu kan worden gesloten.

Bevinding 21: Op het moment dat pagina https://coolsudwest.nl/home/alcohol-en-middelen/ herschaald wordt naar 150% zoom op de testresolutie (1280x1024) valt een deel van de links in de lijst onder 'Links' over de links onder 'Folders' heen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 22: Op pagina https://coolsudwest.nl/ is op de resolutie 1280x1024 pixels met 200% zoom rechtsboven een hamburgermenu te zien. Hier is het contrast van de hamburgermenuknop te laag. Er is sprake van een 2,9:1 contrastratio tussen de witte knop en de oranje achtergrond (HEX #D98217) waar dit minimaal 3:1 behoort te zijn. Dit probleem komt ook voor op pagina https://coolsudwest.nl/jongeren/, alleen staat het witte icoon daar op een groene achtergrond (HEX #00A455).

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 23: Op pagina https://coolsudwest.nl/home/alcohol-en-middelen/ staan onder de koppen ‘Links’ en ‘Folders’ lijsten met links. Op het moment dat de tekst afstanden ingesteld worden op bovenstaande waarden en de gebruiker op de testresolutie 1280x1024 herschaald naar 150% valt een deel van de linktekst onder de kop 'Links' over andere links heen. Het advies is om CSS aan te passen. Op 1920x1080 is er nu ook een probleem bij 250% zoom zonder een aan passing van de tekstafstand.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 24: Indien pagina's bij een schermgrootte van1280 bij 1024 pixels herschaald worden naar 200% zoom, ontstaan problemen met het hamburgermenu waar de navigatiebalk in wordt ondergebracht. Op bijvoorbeeld https://coolsudwest.nl/home/social-media/ gaat bij 200% zoom het hamburgermenu over de pagina staan. Indien men met het toetsenbord door de items tabt, wordt de sluitknop overgeslagen en gaat de focus door op de onderliggende pagina. Zorg ervoor dat alvorens verder navigeren, het hamburgermenu ook middels het toetsenbord kan worden gesloten. Zie tevens SC 2.1.1.

2.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Uitkomst: Onvoldoende

Bevinding 25: Op iedere pagina staan bewegende pijliconen, om de bezoeker te helpen om naar beneden te navigeren. Deze bewegende content moet aan de eisen van dit succescriterium voldoen. Er is in dit succescriterium geen uitzondering voor langzame of kleine beweging aanwezig, daardoor moet deze website op dit punt worden afgekeurd. Het advies is dan ook om deze pijl niet te laten bewegen. Het is een optie om deze pijl alleen de eerst vijf seconden te laten bewegen.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 26: Op elke pagina ontbreekt een mechanisme om de herhalende content over te slaan. Dit kan opgelost worden door een link op de pagina te plaatsen (skiplink) die de focus verplaatst naar de eerste unieke inhoud van de pagina. Deze link moet de eerste link van de pagina zijn. Deze link mag standaard verborgen zijn voor bezoekers, maar moet zichtbaar worden als de focus er op komt wanneer met het toetsenbord wordt genavigeerd.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 27: De PDF op pagina https://coolsudwest.nl/media/1025/0882_-a4-factsheet-preventie-ijslandmodel_stijl-cool-sudwest-2021_digi.pdf heeft geen duidelijke documenttitel. Zorg voor een titel die de inhoud omschrijft. Dit probleem doet zich in meerdere PDF’s op de website voor.

Bevinding 28: De PDF op pagina https://coolsudwest.nl/media/1025/0882_-a4-factsheet-preventie-ijslandmodel_stijl-cool-sudwest-2021_digi.pdf heeft een documenttitel in de eigenschappen maar in de eigenschappen staat ingesteld dat de Bestandsnaam wordt getoond. Zorg dat niet de bestandsnaam maar de Documenttitel wordt getoond. Dit probleem doet zich in meerdere PDF’s op de website voor.

Bevinding 29: Op pagina https://coolsudwest.nl/jongeren/ ontbreekt de paginatitel.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 30: Het logo van Cool Sudwest linksboven in de header dient tevens als link naar de hoofdpagina, bijvoorbeeld op https://coolsudwest.nl/activiteiten/. Het logo heeft bevat echter geen toegankelijke tekst, en geen linkdoel. Zorg dat het de naam heeft dat visueel zichtbaar is alsmede waar het voor dient, bijvoorbeeld "navigeer naar de hoofdpagina". Zie tevens SC 4.1.2.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Onvoldoende

Bevinding 31: De verschillende pagina's van https://coolsudwest.nl/ zijn nu alleen te vinden door het volgen van links vanaf de homepage. Er moet op deze website minimaal één andere manier aangeboden worden om alle pagina's te vinden. Dat kan bijvoorbeeld door toevoegen van een sitemap of door het toevoegen van een zoekfunctie.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 32: Over het algemeen is er op de website geen sprake van focuszichtbaarheid. Indien met de tabtoets door bijvoorbeeld https://coolsudwest.nl/ navigeert, is het niet zichtbaar op welk element de focus staat. Dit is een belangrijke noodzakelijkheid voor bezoekers die middels het toetsenbord navigeren en/of met een verminderd zicht. Zorg ervoor dat deze bezoekers weten welk element de focus heeft door een duidelijke focusrand toe te voegen met voldoende contrast op elke achtergrond.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 33: De PDF op pagina https://coolsudwest.nl/media/1025/0882_-a4-factsheet-preventie-ijslandmodel_stijl-cool-sudwest-2021_digi.pdf is Nederlands maar heeft geen ingestelde taal in de documenteigenschappen. Zorg voor de juiste instellingen zodat schermleessoftware op de juiste wijze functioneert. Dit probleem doet zich in meerdere PDF’s op de website voor.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 34: In de algemene footer, bijvoorbeeld op https://coolsudwest.nl/contact/, staan onder de kop 'Social media' twee sociale media links naar Facebook en Instagram. Deze links hebben nu geen naam die beschikbaar is voor hulpsoftware. Het advies is om deze links namen te geven als 'Cool Súdwest op Facebook' en 'Cool Súdwest op Instagram' en niet alleen 'Facebook' en 'Instagram'.

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: 2024-11-14 17:29:03 v2.4-011