Alleen de bevindingen:
Audit digitale toegankelijkheid website Niet in rook

Uitkomst: Onvoldoende

Bevinding 1: Op pagina https://nietinrook.nl/ staan in de footer logo's. Deze afbeeldingen hebben een leeg alt-attribuut. Deze afbeelding zijn niet decoratief en hebben daarom een alternatieve tekst nodig. Voeg een alternatieve tekst toe om dit probleem op te lossen, zoals "Gemeente Schiedam" bij het logo van die gemeente. De logo's lijken klikbaar, maar in de code zitten de afbeeldingen naast de link. Voor de links zie SC 2.4.4.

Bevinding 2: Op pagina https://nietinrook.nl/lansingerland/ staan logo's van de gemeente en de partners. Iemand die blind is of slechtziend weet zo niet wie dit zijn. Deze afbeelding zijn niet decoratief en hebben daarom een alternatieve tekst nodig. Voeg een alternatieve tekst toe om dit probleem op te lossen, zoals "Gemeente Lansingerland", "Jongerenwerk Lansingerland", "Epic Youth", enzovoorts. Dit komt bij de andere gemeenten ook voor; bij de gemeente Schiedam ontbreekt de alternatieve tekst slechts op enkele logo's.

Bevinding 3: Op pagina https://nietinrook.nl/schiedam/ worden emoji's gebruikt. Deze afbeeldingen hebben geen tekstalternatief waardoor zinnen abrupt eindigen ('Een droomreis, de nieuwste of gewoon lekker sparen') of de boodschap niet over wordt gebracht aan bezoekers die gebruikmaken van hulpsoftware. Geef deze afbeeldingen de juiste naam.

Bevinding 4: Op pagina https://nietinrook.nl/ staat in de footer het logo van Niet in rook. De afbeeldingen heeft betekenis, maar de alternatieve teksten van deze afbeelding is leeg (alt=""). Geef de afbeelding een naam zodat voor iedereen duidelijk is wat hier staat, bijvoorbeeld 'Niet in rook-logo'.

Bevinding 5: Op pagina https://nietinrook.nl/ staan in de footer links naar de social media van Niet in rook. De afbeeldingen zijn klikbaar, maar de alternatieve teksten van deze links zijn leeg (alt=""). Geef de afbeeldingen een naam zodat duidelijk is waar je naartoe gaat als je op de afbeelding klikt, bijvoorbeeld 'Linkedin-pagina van Niet in rook'. Hetzelfde probleem kom je tegen in het navigatiemenu bij elke gemeente.

Uitkomst: Onvoldoende

Bevinding 6: Elke video eindigt met een tekst, bijvoorbeeld ''Laat je geld niet in rook opgaan' en een link naar de betreffende gemeente. Er ontbreekt uitgeschreven tekst en er is geen audiodescriptie die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van bijvoorbeeld schermleessoftware niet weten wat er wordt getoond in de video. Zet deze en andere informatie in een transcript. Of maak gebruik van een extra audiospoor om ook te voldoen aan SC 1.2.5.

Uitkomst: Onvoldoende

Bevinding 7: Elke video eindigt met een tekst, bijvoorbeeld ''Laat je geld niet in rook opgaan' en een link naar de betreffende gemeente. Als je dat niet kan zien mis je dat dit een video van XXXX is. Voeg deze informatie toe aan de audiodescriptie, of laat alle informatie uitspreken door de voiceover waardoor de audiodescriptie overbodig wordt.

Uitkomst: Onvoldoende

Bevinding 8: Op pagina https://nietinrook.nl/schiedam/ is een caroussel. Hierin staan teksten bestaande uit een kop zoals "Ik laat mijn moves niet in rook opgaan" en eronder een stukje tekst. Bij de koppen ontbreekt de kopmarkering, bijvoorbeeld <h2>. Maak visuele koppen op met het juiste kopniveau (h1, h2, ...).

Bevinding 9: Op pagina https://nietinrook.nl/lansingerland/privacyverklaring/ zijn koppen opgemaakt met het strong-element, bijvoorbeeld Verwerkingsverantwoordelijke. Het strong- en em-element zijn bedoeld om nadruk te geven. Geef de koppen een gewenste style als het de bedoeling is om de woorden op een andere manier te tonen.

Bevinding 10: Op pagina https://nietinrook.nl/schiedam/stophulp/ zijn de tips niet opgemaakt met koppen. Visueel zijn koppen zichtbaar. Maak van 'Tip 1' een kop met kopniveau 2 (H2) en van 'Weet waarom je stopt' een kop met kopniveau 3 (H3). En doe hetzelfde voor alle volgende tips. Een soortgelijk probleem komt ook voor in het blok onder Tip 6, 'Een terugval is geen einde, maar een leermoment'. Maak hiervan een kop met kopniveau 2 (H2).

Bevinding 11: Op pagina https://nietinrook.nl/schiedam/ is onder 'De voordelen van stoppen op een rijtje' een opsomming aanwezig. Deze opsomming is niet opgemaakt als een opsomming. Gebruik het ul- en li-element om opsommingen op te maken. Haal ook het strong-element weg bij deze teksten.

Bevinding 12: Op pagina https://nietinrook.nl/schiedam/opvoeders/ is onder 'Herken een verslaafde tiener' een opsomming aanwezig. Deze opsomming is niet opgemaakt als een opsomming. Gebruik het ol- en li-element om opsommingen op te maken. Visueel kunnen de teksten zo blijven staan. Ook het gebruik van het strong-element is op deze manier correct.

Bevinding 13: Op pagina https://nietinrook.nl/schiedam/opvoeders/ is onder 'Vier feiten over vapen die iedere opvoeder moet kennen' een opsomming aanwezig. Deze opsomming is niet opgemaakt als een opsomming. Gebruik het ul- en li-element om opsommingen op te maken. Dit zelfde probleem doet zich voor bij 'Vind kennis, ondersteuning of hulp'.

Bevinding 14: Op pagina https://nietinrook.nl/schiedam/opvoeders/ is onder 'Wat kun je doen?' een opsomming aanwezig. Deze opsomming is niet opgemaakt als een opsomming. Gebruik het ol- en li-element om opsommingen op te maken. Visueel kunnen de teksten zo blijven staan.

Bevinding 15: Op pagina 'Laten we er samen voor zorgen dat de levens van jongeren in Schiedam niet in rook opgaan!' is een tekst als kop opgemaakt. De kop bevat geen content omdat deze direct wordt opgevolgd door de footer. Bezoekers die gebruikmaken van schermleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Daarom is het belangrijk om een goed lopende koppenstructuur te gebruiken. Een goede koppenstructuur begint bij een kopniveau 1 voor de titel van de pagina, kopniveau 2 voor de koppen, kopniveau 3 voor de tussenkoppen, etcetera.

Bevinding 16: De cookiemelding van Cookiebot bevat en logo. De naam van het logo luidt 'logo' zodat het voor blinden niet mogelijk is te bepalen wiens logo dit is. De cookiemelding bevat mogelijk meer toegankelijkheidsproblemen. Zie https://github.com/WCAG-Audit-Discussions/producten-bevindingen/issues/4 Sommige meldingen zijn inmiddels opgelost.

Bevinding 17: Advies: Op de homepage ontbreekt de eerste kop (H1). Het is gebruikelijk om de content van een pagina te laten beginnen met een H1; op een homepage hoeft deze niet in beeld te staan, en volstaat het om deze kop de naam te geven van de website. De afwezigheid van een H1 is een best practice en geen reden tot afkeur. Op meer pagina's ontbreekt kopniveau 1.

Bevinding 18: Advies: Op pagina https://nietinrook.nl/lansingerland/privacyverklaring/ ontbreekt de eerste kop (H1). De pagina begint met een kop van kopniveau 2. De volgende koppen zijn van kopniveau 5. Gebruik een kopniveau 1 en vervolgens kopniveaus 2 zodat mensen met hulpsoftware makkelijker door de paginastructuur kunnen navigeren. De afwezigheid van een H1 en een koppenstructuur waarbij geen kopniveaus worden overgeslagen is een best practice en geen reden tot afkeur.

Bevinding 19: Op pagina https://nietinrook.nl/schiedam/stophulp/ zijn zinnen opgemaakt met het strong-element, bijvoorbeeld bij Tip 1: 'Wil je geld besparen, gezonder leven of meer controle?'. Het strong- en em-element zijn bedoeld om nadruk te geven aan een of enkele woorden, niet voor hele zinnen. Ook mogen deze elementen niet worden gebruikt als visuele kop, omdat ze niet dezelfde betekenis hebben als een kop. Zorg door styling (CSS) dat deze teksten vet gemaakt worden. Dit komt ook voor in het blok onder Tip 6, 'Een terugval is geen einde, maar een leermoment'.

Uitkomst: Onvoldoende

Bevinding 20: Op pagina https://nietinrook.nl/ komt een deel van het e-mailadres met witte tekst op de gele achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 1.3:1 waar dit 4,5:1 moet zijn.

Uitkomst: Onvoldoende

Bevinding 21: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op pagina https://nietinrook.nl/schiedam/partners/ een deel van het emailadres 'secretariaatMS@schiedam.nl' buiten beeld. Er zijn ook geen scrollbalken om de tekst te kunnen bekijken. Vermijd overigens de scrollbalk in de leesrichting (horizontaal).

Bevinding 22: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op pagina https://nietinrook.nl/maassluis/ een deel van het uitgevouwen navigatiemenu buiten beeld. Er zijn ook geen scrollbalken om de tekst te kunnen bekijken. Vermijd overigens de scrollbalk in de leesrichting (horizontaal).

Bevinding 23: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan zijn een aantal cookie-instellingen van Cookiebot niet bereikbaar.

Uitkomst: Onvoldoende

Bevinding 24: De blauwe focusrand op de knop van de cookie-instelingen op de zwarte achtergrond in de footer heeft een te laag contrast. De contrastverhouding is hier 2,4:1, waar dit minimaal 3:1 moet zijn. Zorg dat deze knop op elke achtergrond voldoende contrast heeft door bijvoorbeeld een dubbelkleurige rand te gebruiken (donker en lichte kleur).

Uitkomst: Onvoldoende

Bevinding 25: Op de pagina https://nietinrook.nl/maassluis/ wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die gebruikmaken van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. Voeg de volgende eigenschap aan de embedcode toe: 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.

Uitkomst: Onvoldoende

Bevinding 26: Op pagina https://nietinrook.nl/schiedam/ staat bovenin een carrousel die na elke paar seconden een nieuw beeld laat zien. Deze carrousel kan niet gestopt, gepauzeerd of verborgen worden. Bij sommige mensen kan de beweging misselijkheid veroorzaken. Voor mensen met bijvoorbeeld een cognitieve beperking kan het lastig zijn omdat zij zich tijdens het lezen niet kunnen concentreren op de tekst, door de beweging op het scherm. Zorg dat er een duidelijke knop aanwezig is waarmee bezoekers de carrousel kunnen stoppen of pauzeren, of verwijder de carrousel in z’n geheel.

Uitkomst: Onvoldoende

Bevinding 27: De link naar 'Schiedam' op pagina https://nietinrook.nl/ is er 2x. De hele afbeelding is klikbaar en de knop die over de afbeelding heen staat. De link op de hele afbeelding heeft geen toegankelijke naam. Omdat de link daarmee geen linkdoel heeft, is het voor blinden en slechtzienden die gebruikmaken van schermleessoftware niet duidelijk waar de link heen gaat. Voeg een toegankelijke naam waarin het linkdoel is omschreven toe om dit probleem op te lossen. Beter is om de link helemaal weg te halen. Mensen die gebruik het toetsenbord of van hulpsoftware moeten nu door 2 keer zoveel links navigeren. Zie ook SC 4.1.2.

Bevinding 28: Advies: Op pagina's met de privacyverklaring staan vaak links met onbeduidende linktekst zoals 'hier', 'link' en 'pagina'. Zulke teksten beschrijven het linkdoel niet. Omdat deze links in een zin staan waar het doel duidelijk wordt gemaakt is dit geen reden tot afkeur. Advies is om ook in zinnen de linkteksten te gebruiken die duidelijk beschrijven waar de link naartoe gaat.

Uitkomst: Onvoldoende

Bevinding 29: Wanneer het Niet-in-rook-logo in de footer op elke pagina focus heeft, is dat niet zichtbaar. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk element de focus heeft door een duidelijke focusrand toe te voegen.

Bevinding 30: Wanneer je op https://nietinrook.nl/maassluis/ een van de video's bekijkt dan verschijnt dit in een popup-achtige scherm. Er verschijnt een gele knop met een kruisje erin. Als deze knop zichtbaar is verschijnt er een zwarte rand omheen. door de donkere achtergrond is deze rand nauwelijks zichtbaar. Zorg voor een rand die ook op een donkere achtergrond goed zichtbaar is.

Uitkomst: Onvoldoende

Bevinding 31: Op elke pagina is de taalaanduiding van de hele pagina Engels. De pagina is echter in het Nederlands. Zorg voor de juiste taalcodering (lang="nl") in de HTML zodat schermleessoftware de tekst op correcte wijze voorleest.

Uitkomst: Onvoldoende

Bevinding 32: Na de 'Copyright' in de footer bevindt zich een knop om de cookie-instellingen aan te passen. De naam luidt nu "Open CMP widget". In succescriterium 4.1.2 hebben we aangegeven dat de naam niet duidelijk is. Aan deze knop is in de code aangegeven dat de knop Engels is (lang="en"). Maak hiervan een Nederlandstalige knop en haal hier lang="en" weg of maak er lang="nl" van.

Bevinding 33: Elke pagina heeft een zogenaamde skiplink om eenvoudig herhaalde content over te slaan. De knop heet 'Skip to content'. Beter is om hiervan een Nederlandstalige naam te maken, bijvoorbeeld direct 'naar de inhoud'. Anders zou aan de HTML-code lang="en" toegevoegd moeten worden.

Uitkomst: Onvoldoende

Bevinding 34: Onder de 'Copyright' bevindt zich een knop om de cookie-instellingen aan te passen. De naam luidt nu "Open CMP widget". De naam is hiermee niet duidelijk; als je op de knop drukt verschijnt er een popup met de naam 'Cookie-instellingen'. dit is en betere naam dan 'CMP widget'.

Bevinding 35: Advies: Onder de 'Copyright' bevindt zich een knop om de cookie-instellingen aan te passen. Met deze knop wordt een popup geopend. Deze knop mist het aria-controls attribuut. Hierdoor is de knop niet gekoppeld aan het deel dat uit- en ingeklapt kan worden. Voeg dit attribuut toe en plaats op het popupvenster een id met dezelfde waarde.

Bevinding 36: Op pagina https://nietinrook.nl/lansingerland/privacyverklaring/ is een knop 'menu', de knop om het navigatiemenu te openen. Als je het navigatiemenu opent verschijnt op die plek een sluitknop. Deze knop heet 'Close (Esc)'. Mensen die gebruikmaken van spraakbediening en mensen die gebruikmaken van schermleessoftware kunnen daardoor de knop niet of niet goed te bedienen. Geef de knop een goede naam.

Bevinding 37: Op de pagina https://nietinrook.nl/schiedam/ zijn onder de kop 'Wat de faq?' is een knop in een link aanwezig bij elke veelgestelde vraag, bijvoorbeeld 'Wat is vapen?'. Dit zorgt voor een onnodige extra focus met het toetsenbord. Bezoekers begrijpen mogelijk niet wat er gebeurt en wat het verschil is. Daarnaast moeten bezoekers die gebruikmaken van een toetsenbord altijd 2x navigeren om op de volgende link/knop te komen. Verwijder een van de twee, de knop of de link.

Bevinding 38: Op de pagina https://nietinrook.nl/schiedam/ zijn onder de kop 'Wat de faq?' is een knop bij elke veelgestelde vraag, bijvoorbeeld 'Wat is vapen?'. De naam van de knop is 'Toggle' en beschrijft niet de functie van de knop, namelijk dat bij 'Wat is vapen?' content getoond en weer weggehaald wordt als je op de knop klikt. Overweeg het gebruik van <details> en <summary> om hetzelfde effect te krijgen die wel toegankelijk is. Maak je geen gebruik van summary/details maak dan de koppen op met een kopniveau 3 <h3>.