Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website werkenvooralbrandswaard.nl

(Alleen de bevindingen)

Scope van de evaluatie

Naam website werkenvooralbrandswaard.nl
Datum 24 november 2023
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op werkenvooralbrandswaard.nl
  • Alle PDF's op werkenvooralbrandswaard.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: 49

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: In het menu op alle pagina's staat achter het menu-item 'Over Albrandswaard' een icoon met daarop een pijl naar beneden. Dit is een svg-afbeelding die in de link van dit menu-item staat. Aan deze svg-afbeelding is een titel toegevoegd door middel van een title-attribuut. Hierdoor heeft deze svg-afbeelding de toegankelijke naam '"focusable="false"'. Het is beter om dit icoon te verbergen voor hulpsoftware, bijvoorbeeld door title-attribuut te verwijderen en aria-hidden=true op het svg-element te plaatsen.

Bevinding 2: In de footer op alle pagina's staan onder de kop 'Contact' vier iconen bij de contactgegevens. Deze zijn als link met daarin een svg-afbeelding opgemaakt. Deze svg-afbeeldingen hebben geen alternatieve tekst, maar kunnen door hulpsoftware in sommige browsers toch als afbeelding herkend worden. Verberg de svg-afbeeldingen door gebruik te maken van 'aria-hidden="true". Ditzelfde komt op meerdere plekken voor:

Bevinding 3: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/?_search=werk staat bij het veld onder 'Voer trefwoorden in' een icoon van een vergrootglas waaraan herkend kan worden dat het hier om een zoekfunctie gaat. Het icoon wordt door middel van het pseudo-element :before/:after en de content property in de CSS op de pagina gezet. Op deze manier kan het zijn dat het icoon wegvalt, bijvoorbeeld voor mensen die een eigen CSS gebruiken, of wanneer de CSS niet geladen wordt. De content property is alleen geschikt voor het toevoegen van puur decoratieve content. Een oplossing kan zijn om het icoon in de html te plaatsen, bijvoorbeeld als img-element of svg met tekstalternatief.

Bevinding 4: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/?_search=werk staat een knop waarmee bezoekers een filter kunnen verwijderen. In deze knop staat een X-icoon wat geen alternatieve tekst heeft. Hierdoor krijgen screenreadergebruikers de informatie die het icoon overbrengt niet mee en weten zij niet dat de knop het filter verwijdert. Zorg ervoor dat er ergens een alternatieve tekst voor het icoon staat, bijvoorbeeld door gebruik te maken van een aria-label of een screenreader only tekst.

Bevinding 5: Op de homepagina https://www.werkenvooralbrandswaard.nl/ staan onder de kop 'Vacatures in de spotlight' vacatures, bijvoorbeeld 'Verkeerskundig medewerker/beleidsadviseur'. Bij deze vacatures staan twee svg-afbeeldingen die de alternatieve tekst '"focusable="false"' hebben gekregen via het title-attribuut. Deze alternatieve tekst brengt niet dezelfde informatie over als dat de iconen visueel doen. Pas daarom de alternatieve tekst aan. Let op dat hier het title-element moet worden gebruikt als eerste child-element van het svg-element om een alternatieve tekst aan de iconen te geven, het title-attribuut is hiervoor niet geschikt.

Ditzelfde komt op meerdere plekken voor op de website, bijvoorbeeld:

Bevinding 6: Op de homepagina https://www.werkenvooralbrandswaard.nl/ staan onderin de slider 'Werkgebieden' twee knoppen waarmee naar de vorige danwel volgende dia gegaan kan worden. Op deze knoppen staan svg-afbeeldingen waar pijlen op te zien zijn. De knoppen hebben duidelijke toegankelijke teksten. De svg-afbeeldingen hebben geen alternatieve tekst maar kunnen in sommige browsers toch door hulpsoftware worden herkend als afbeeldingen. Verberg deze afbeeldingen door gebruik te maken van 'aria-hidden="true"'.

Bevinding 7: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/ staan onder de kop 'Dit bieden wij naast je salaris' meerdere iconen. Deze iconen kunnen beschouwd worden als decoratief maar hebben de alternatieve tekst '"focusable="false"' gekregen via het title-attribuut. Dit omschrijft de afbeeldingen niet. Zorg ervoor dat de afbeeldingen een omschrijvende alternatieve tekst hebben (via het title-element), of verwijder het title-attribuut van de svg-element en verberg ze voor hulpsoftware met aria-hidden=true.
Dit probleem komt ook voor op pagina https://www.werkenvooralbrandswaard.nl/vacatures/buitengewoon-opsporingsambtenaar-boa/ onder dezelfde kop.

Bevinding 8: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/ staat onder de kop 'Dit bieden wij naast je salaris' achter het eerste lijst-item (keuzebudget) een icoon waarin de letter 'i' met een cirkel eromheen te zien is. Hierop kan geklikt worden om meer informatie te lezen. Dit icoon is een svg-afbeelding die via het title-attribuut de alternatieve tekst 'meer' heeft gekregen. Niet elke browser kan het title-attribuut goed interpreteren als het op deze manier is opgemaakt, waardoor niet elke bezoeker die gebruik maakt van hulpsoftware de titel te horen krijgt. Voeg de titel toe in een title-element dat als eerste child-element aan de svg-afbeelding toegevoegd wordt.
Ditzelfde komt voor op dezelfde plek op pagina https://www.werkenvooralbrandswaard.nl/vacatures/buitengewoon-opsporingsambtenaar-boa/.

Bevinding 9: Wanneer wordt ingezoomd op onder andere de homepage verdwijnt het navigatiemenu achter een knop. Als dit menu is uitgekapt is een klikbare svg-afbeelding zichtbaar achter de tekst 'Over Albrandswaard'. Deze klikbare afbeelding heeft de alternatieve tekst '"focusable="false""', wat niet aangeeft wat dit element doet. Zorg ervoor dat deze svg-afbeelding een alternatieve tekst krijgt die goed aangeeft wat het element doet, bijvoorbeeld 'Open sub-menu Over Albrandswaard'.

1.2 Op tijd gebaseerde media

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 10: Op pagina https://www.werkenvooralbrandswaard.nl/ is er in de video 'Jij bent Albrandswaard' op verschillende plaatsen tekst in beeld, bijvoorbeeld de leus 'Jij bent Albrandswaard.' in de eerste seconden. En het logo en website-adres vanaf tijdstip 01.23. Er is uitgeschreven tekst aanwezig maar daarin ontbreekt deze informatie, hierin is alleen de tekst te lezen die in de video uitgesproken wordt. Er is geen audiodescriptie die vertelt wat er op het scherm staat. Daardoor kunnen mensen die de video niet kunnen zien en afhankelijk zijn van hulpsoftware zoals een screenreader niet weten wat er wordt getoond in de video. Zet deze en andere informatie in een transcript om te voldoen aan dit succescriterium. Of maak gebruik van een extra audiospoor om ook te voldoen aan succescriterium 1.2.5.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 11: Op pagina https://www.werkenvooralbrandswaard.nl/ staat een video met de titel 'Jij bent Albrandswaard'. Aan het eind van de video komt informatie in beeld te staan dat niet terugkomt in het audiospoor, zoals het webadres. Bezoekers die afhankelijk zijn van het audiospoor om de informatie in de video tot zich te nemen krijgen deze informatie niet mee. Zorg er daarom voor dat de visuele informatie aan het eind van de video terug te vinden is in het audiospoor, bijvoorbeeld door gebruik te maken van een voice-over of audiodescriptie.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 12: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/ staan in de alinea onder 'Meer informatie' een aantal zinnen vetgedrukt. Deze zijn vetgedrukt gemaakt door in HTML het strong-element en het b-element te gebruiken. Deze elementen hebben een semantische waarde en mogen niet alleen voor opmaak worden gebruikt. Zorg ervoor dat de tekst op een andere manier wordt opgemaakt, bijvoorbeeld door gebruik te maken van CSS eigenschappen. Ditzelfde komt op dezelfde plek voor op pagina https://www.werkenvooralbrandswaard.nl/vacatures/buitengewoon-opsporingsambtenaar-boa/.

Bevinding 13: Advies: Op pagina https://www.werkenvooralbrandswaard.nl/arbeidsvoorwaarden/ komt geen kop op kopniveau h1 voor. Voor gebruikers van een screenreader is een correcte kopstructuur belangrijk, omdat een lijst van koppen opgevraagd kan worden en op die manier genavigeerd kan worden. Zorg voor een goede koppenstructuur, die begint bij een kopniveau h1 voor de titel van de pagina (en waarbij en kop op dit niveau eenmalig voorkomt), kopniveau h2 voor de koppen, kopniveau h3 voor de tussenkoppen, etcetera. Sla hierbij geen koppen over. Ditzelfde geldt voor pagina https://www.werkenvooralbrandswaard.nl/.

Bevinding 14: Opmerking: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/ staat in de tekst onder de kop 'Wat ga je doen?' een opsomming van taken. Deze opsomming is in HTML niet als opsomming opgemaakt, waardoor hulpsoftware dit niet als zodanig herkent. Omdat er geen opsommingstekens zijn gebruikt is deze opsomming niet af te keuren, maar het is beter om deze lijst van taken in de code op te maken met een ul- en li-element.
Ditzelfde komt op dezelfde plek voor op pagina https://www.werkenvooralbrandswaard.nl/vacatures/buitengewoon-opsporingsambtenaar-boa/.

Bevinding 15: Opmerking: De pagina https://www.werkenvooralbrandswaard.nl/privacy-en-cookies/ bevat geen content. Mogelijk is dit een fout.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 16: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/ staan vier links naar verschillende social media, welke visueel zichtbaar worden nadat de knop naast 'Direct Solliciteren' geactiveerd wordt. Wanneer deze knop is geopend staan de social media links visueel achter de knop. In de HTML zijn de social media links vóór de knop geplaatst waarmee je de links zichtbaar kan maken. Als gebruikers van screenreader over de pagina navigeren worden de social media links voorgelezen voor de knop waarmee je de links zichtbaar kan maken. Zorg ervoor dat de knop eerst voorkomt in de HTML en daarna de social media links. Ditzelfde komt voor op pagina https://www.werkenvooralbrandswaard.nl/vacatures/buitengewoon-opsporingsambtenaar-boa/.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 17: Op pagina https://www.werkenvooralbrandswaard.nl/contact/ staat een formulier waar de bezoeker onder andere het eigen e-mailadres en naam kan invullen. Het doel van deze velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email". Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: https://www.w3.org/tr/wcag21/#input-purposes.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 18: Wanneer op een pagina ingezoomd wordt en zowel het menu als het submenu onder menu-item 'Over Albrandswaard' uitgevouwen wordt, zijn twee submenu-items te zien. Hierbij heeft de blauwe (HEX #547510) tekst onvoldoende contrast met de lichtblauwe (HEX #F1F5F9) achtergrond. De contrastverhouding is 4.3:1 waar dit minimaal 4.5:1 moet zijn.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 19: Wanneer bezoekers op pagina https://www.werkenvooralbrandswaard.nl/toegankelijkheid/ inzoomen vanaf 300% bij een schermbreedte van 1280 bij 1024 pixels, ontstaat een scrollbalk in de leesrichting (horizontaal). Bepaalde informatie, zoals de links onder de kop 'Verklaring', valt buiten beeld. Zorg dat alle tekst binnen het beeld zichtbaar blijft en vermijd een scrollbalk in leesrichting.

Bevinding 20: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/ valt bij inzoomen tot 400% bij een schermbreedte van 1280 bij 1024 pixels de tekst en content deels weg of buiten beeld. Het laatste icoon van de links naar social media (nadat geklikt is op de knop naast 'Direct solliciteren') valt weg en is ook via de scrollbalk die in de leesrichting is ontstaan, niet terug te vinden. Zorg dat alle content zonder scrollbalk in de leesrichting in beeld zichtbaar blijft. Ditzelfde doet zich voor op andere pagina's, bijvoorbeeld https://www.werkenvooralbrandswaard.nl/vacatures/buitengewoon-opsporingsambtenaar-boa/ en https://www.werkenvooralbrandswaard.nl/465-2/.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 21: Op pagina https://www.werkenvooralbrandswaard.nl/sitemap/ staan verschillende lijsten, bijvoorbeeld onder 'Pagina's'. Voor elk lijst-item staat een grijs (HEX #D1D5DB) bolletje op een witte achtergrond. Deze kleuren hebben onvoldoende contrast. De contrastverhouding is 1.4:1 waar dit minimaal 3:1 moet zijn. Ditzelfde komt voor bij lijsten op andere pagina's, bijvoorbeeld:

Bevinding 22: Opmerking: Op de homepagina https://www.werkenvooralbrandswaard.nl/ heeft de focusrand bij sommige elementen onvoldoende contrast met de achtergrond, waardoor niet goed te zien is waar de focus zich bevindt. Bij de link 'Albrandswaardige vacatures' en 'Over Albrandswaard' en onder 'Vacature Alert de link 'Aanmelden', is de focusrand zwart (HEX #101010), hierbij is de contrastverhouding 2.3:1 met de blauwe (HEX #244C96) achtergrond. Zorg ervoor dat de focusrand een contrastverhouding heeft van minimaal 3:1. Dezelfde kleurencombinatie komt voor op pagina https://www.werkenvooralbrandswaard.nl/stages/ bij de focusrand op de link 'Bekijk onze vacatures', en op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/#wat-ga-je-doen? en https://www.werkenvooralbrandswaard.nl/vacatures/buitengewoonopsporingsambtenaar-boa/ bij de focusrand op de link 'Direct solliciteren' en de knop ernaast. Dit probleem komt alleen voor in de browser Google Chrome. Omdat het hier gaat om een browsereigen focusrand wordt niet afgekeurd op dit probleem. Wel is het beter om een eigen focusrand toe te voegen aan de website.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 23: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/ staat achter de tekst '17,05% keuzebudget' een i-icoon. Bezoekers die de muisaanwijzer gebruiken kunnen dit icoon aanklikken en daarmee aanvullende content zichtbaar maken. Voor toetsenbordgebruikers is dit icoon niet te bedienen. Zorg ervoor dat het mogelijk is voor toetsenbordgebruikers om focus te plaatsen op dit icoon en dat zij het ook kunnen bedienen met het toetsenbord. Mogelijk moet hier een button-element worden gebruikt.
Ditzelfde komt voor op pagina https://www.werkenvooralbrandswaard.nl/vacatures/buitengewoon-opsporingsambtenaar-boa/.

Bevinding 24: Wanneer de website op een kleiner scherm bekeken wordt, of ingezoomd wordt (bijvoorbeeld inzoomen tot 110% bij een schermgrootte van 1280 bij 1024 pixels), vouwt het menu samen onder een knop (hamburgermenu). Na het openen van het menu kan de focus naar de menu-items verplaatst worden, maar het menu-item 'Over Albrandswaard' kan via het toetsenbord niet uitgevouwen worden doordat de focus niet naar de uitvouw-knop (waarop een blauw icoon met daarop een pijltje te zien is) gebracht kan worden. Daardoor is het submenu dat hieronder staat onbereikbaar voor bezoekers die navigeren via het toetsenbord. Zorg ervoor dat de focus op dit item geplaatst kan worden, zodat de knop ook functioneert voor bezoekers die navigeren via het toetsenbord.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Voldoende

Bevinding 25: Opmerking: De paginatitel van pagina https://www.werkenvooralbrandswaard.nl/vacatures/?_search=werk is 'Vacature - Werken voor Albrandswaard'. De pagina heet 'Vacatures', dus het is beter om dit terug te laten komen in de paginatitel en deze aan te passen naar 'Vacatures - Werken voor Albrandswaard'.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 26: De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookiemelding over de pagina heen. De cookiemelding krijgt niet als eerste focus. Dit belemmert het gebruik van de website voor bezoekers die via het toetsenbord navigeren. Zorg dat de melding als eerste weg te klikken is of integreer de melding in de webpagina.

Bevinding 27: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/ komt een bezoeker die navigeert via het toetsenbord na het menu langs een link die op de pagina niet zichtbaar is wanneer de bezoeker bovenaan de pagina staat. Dit is de link 'Direct solliciteren' die pas verschijnt nadat de bezoeker naar beneden scrollt op de pagina. Zorg ervoor dat deze link niet in de focus-volgorde voorkomt zolang deze niet op de pagina te zien is. Ditzelfde komt voor op pagina https://www.werkenvooralbrandswaard.nl/vacatures/buitengewoon-opsporingsambtenaar-boa/.

Bevinding 28: Wanneer toetsenbordgebruikers op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/ is mogelijk om focus te plaatsen op de social media links die achter de knop naast 'Direct solliciteren' staat. Focus mag niet geplaatst worden op elementen die verborgen zijn. Zorg ervoor dat focus pas geplaatst kan worden op de social media links wanneer de knop is uitgeklapt.

Bevinding 29: Wanneer je op onder andere de homepage inzoomt, verdwijnt het navigatiemenu achter een menuknop. Wanneer een toetsenbordgebruiker deze menuknop uitklapt staat het navigatiemenu over de hele pagina. Voor de toetsenbordgebruiker is het mogelijk om focus te plaatsen op de achterliggende pagina terwijl het menu openstaat. Hierdoor is niet zichtbaar welk element focus heeft. Zorg ervoor dat wanneer het navigatiemenu openstaat de toetsenbordfocus hierin blijft, of zorg ervoor dat het menu automatisch inklapt als de focus hieruit wordt gehaald.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 30: Op pagina https://www.werkenvooralbrandswaard.nl/contact/ staat onder 'Contactgegevens' een link met als linktekst een adres, 'Stationsstraat 4, 3161 KP Rhoon'. Wanneer deze link gevolgd wordt, komt de bezoeker op Google Maps op een ander adres terecht; 'Binnenhof 1, 2991 AA Barendrecht'. Zorg ervoor dat de linktekst het linkdoel beschrijft, bijvoorbeeld door hier het adres in te vullen waar de bezoeker bij het volgen van de link terecht komt.

Bevinding 31: Wanneer op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/ de knop die naast 'Direct Solliciteren' staat geactiveerd wordt, verschijnen vier links naar social media. Visueel is aan de iconen te zien naar welk social medium de link leidt, maar deze informatie is voor bezoekers met een visuele beperking die gebruik maken een screenreader niet beschikbaar. De links de toegankelijke naam '"focusable="false""', wat het linkdoel niet omschrijft. Ook is deze toegankelijke naam op een verkeerde manier aan de link gegeven (via het title-attribuut op het svg-element). Voeg om dit probleem op te lossen een toegankelijke naam toe waarin het linkdoel is omschreven, zet deze bijvoorbeeld in een title-element dat als eerste child-element in het svg-element toegevoegd wordt. Of maak gebruik van een aria-label.
Ditzelfde komt voor op pagina https://www.werkenvooralbrandswaard.nl/vacatures/buitengewoon-opsporingsambtenaar-boa/

Bevinding 32: Opmerking: Op pagina https://www.werkenvooralbrandswaard.nl/toegankelijkheid/ staat onder de kop 'Verklaring' een link met de tekst: 'https://www.werkenvooralbrandswaard.nl (externe link)'. Het gaat hier niet om een externe link. Verwijder dit uit de linktekst.

Bevinding 33: Opmerking: Op de homepagina https://www.werkenvooralbrandswaard.nl/ staat onder de kop 'Werkgebieden' een slider met daarin links. Bij elke link wordt door hulpsoftware zoals een screenreader dankzij een aria-label eerst de nummering van de slide voorgelezen, 'Administratief/secretarieel' is bijvoorbeeld '1/14'. Direct daarna wordt het cijfer dat staat voor het aantal beschikbare vacatures, '0', voorgelezen. Bezoekers die niet kunnen zien en gebruik maken van een screenreader krijgen hiermee wel correcte informatie te horen, maar doordat zij een aantal cijfers achter elkaar te horen krijgen kan het lastig zijn te identificeren waar deze cijfers voor staan. Het zou duidelijker zijn voor gebruikers van screenreaders als de aria-labels met bijvoorbeeld '1/14' worden weggelaten.

Bevinding 34: Opmerking: Wanneer een bezoeker voor de eerste keer op de website komt is een cookiemelding te zien waarin een link staat met de tekst 'Lees hier onze cookieverklaring'. Deze link leidt naar een PDF document dat niet geopend kan worden. Vervang de link door een link naar een document dat wel geopend kan worden, of naar een pagina op de website.

Bevinding 35: Opmerking: Op pagina https://www.werkenvooralbrandswaard.nl/toegankelijkheid/ staat in de tekst onder de kop 'Handhavingsprocedure' een link die niet als link is opgemaakt, het gaat om de tekst 'https://www.nationaleombudsman.nl/klacht-indienen/uw-klacht'. Het is beter om deze tekst als een echte link op te maken.

Bevinding 36: Opmerking: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/ en https://www.werkenvooralbrandswaard.nl/vacatures/buitengewoon-opsporingsambtenaar-boa/ staat onder 'Vragen?' een telefoonnummer. Dit is het nummer '0744'. Mogelijk gaat het hier om een onjuist telefoonnummer, waardoor het voor sommige mensen lastig kan zijn om de juiste persoon te bereiken. Zorg dat hier een correct telefoonnummer staat.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Voldoende

Bevinding 37: Advies: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/?_search=werk staat een kop met de tekst 'Vacatures bij de nieuwe Bar Organisatie'. In de alinea onder deze kop en op andere plekken op de website wordt deze organisatie 'BAR-organisatie' genoemd. Daarom is het beter om de kop aan te passen naar 'Vacatures bij de nieuwe BAR-organisatie'.

Bevinding 38: Advies: Op pagina https://www.werkenvooralbrandswaard.nl/stages/ komen twee koppen voor met de tekst 'Contact', deze koppen hebben verschillende content. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader en navigeren via de koppenstructuur op de pagina, is het belangrijk dat de kop de bijbehorende content goed beschrijft. Onder beide koppen staan contactgegevens en zijn daarmee wel beschrijvend, dus dit kan niet afgekeurd worden onder dit succescriterium. Toch zou het beter zijn als de 'Contact'-kop in de laatste alinea van de content gewijzigd of aangevuld wordt met een preciezere beschrijving, zodat deze zich onderscheid van de 'Contact'-kop in de footer.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 39: Op de homepagina https://www.werkenvooralbrandswaard.nl/ staat een knop waarmee de video in de header gepauzeerd of gestart kan worden. Wanneer de focus hierop valt, is dat niet zichtbaar. Daardoor weet een bezoeker mogelijk niet waar hij zich bevindt op de pagina. Los dit bijvoorbeeld op door een duidelijke focusrand toe te voegen.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 40: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/?_search=werk zijn de selectievakjes waarmee de zoekresultaten gefilterd kunnen worden, per onderwerp gegroepeerd. Doormiddel van een aria-label hebben de selectievakjes onder de kop 'Dienstverband' het label 'Dienstbetrekking' gekregen. Omdat dit label niet overeen komt met de tekst die in de kop die boven de selectievakjes staat, kan dit voor met name bezoekers die gebruik maken van hulpsoftware tot problemen leiden. Zorg ervoor dat de naam die in het label staat overeen komt met wat zichtbaar is op het scherm; 'Dienstverband'.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Voldoende

Bevinding 41: Opmerking: Op pagina https://www.werkenvooralbrandswaard.nl/sitemap/ staan onder de kop 'Berichten' en 'Verhalen' een aantal Engelstalige woorden. Omdat de taal van de pagina Nederlands is, is het beter om deze tekst in het Nederlands te formuleren.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 42: Wanneer bezoekers in het formulier op pagina https://www.werkenvooralbrandswaard.nl/contact/ verplichte velden niet invullen bij het versturen, verschijnt de foutmelding 'Dit veld is vereist.' bij het verplichte veld. Deze foutmelding geeft niet duidelijk aan welke fout de bezoekers heeft gemaakt. Als een foutmelding niet aangeeft wat de gemaakte fout is kunnen bezoekers met visuele of cognitieve beperkingen moeite hebben met het correct invullen van het formulier. Zorg ervoor dat in dit geval de foutmelding aangeeft dat het (verplichte) veld leeg is. Idealiter geeft de foutmelding ook aan in welk veld de fout is gemaakt.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 43: Op pagina https://www.werkenvooralbrandswaard.nl/contact/ staat een formulier waar bij de verplichte velden een asterisk (*) wordt getoond. Nergens binnen het formulier staat vermeld dat dit betekent dat dit veld verplicht is. Plaats een melding bovenaan, binnen het formulier, bijvoorbeeld: ‘Velden met een sterretje (*) zijn verplicht'.

Bevinding 44: Opmerking: Zorg er bij de formuliervelden op pagina https://www.werkenvooralbrandswaard.nl/contact/ voor dat alleen bij de verplichte velden een asterisk (*) staat. Op dit moment staat deze ook bij het selectievakje waar akkoord gegeven kan worden voor de opslag van gegevens conform de privacy policy, terwijl het formulier verzonden kan worden zonder dat het verplicht is dit aan te vinken.

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 45: In het menu op elke pagina heeft het menu-item 'Over Albrandswaard' een submenu bestaande uit twee items. Visueel is te zien dat dit submenu uitklapt wanneer de muisaanwijzer er naartoe wordt gebracht, of de focus hierop geplaatst wordt via het toetsenbord. Deze informatie wordt echter niet doorgegeven aan hulpsoftware zoals een screenreader. Bezoekers die hiervan gebruik maken weten daardoor niet dat de links die zij na het menu-item 'Over Albrandswaard' te horen krijgen, onderdeel zijn van dit submenu. Zorg dat de staat van dit menu-item (samengevouwen of uitgeklapt) aan hulpsoftware doorgegeven wordt, bijvoorbeeld door gebruik te maken van aria-expanded.

Bevinding 46: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/medewerkers-kcc-webcare/ staat naast de link 'Direct Solliciteren' (vormgegeven als witte knop) een knop die bij activatie vier links naar verschillende social media laat zien. Deze knop heeft geen naam, waardoor het voor bezoekers die gebruik maken van hulpsoftware niet duidelijk is wat deze knop doet. Voeg een toegankelijke naam toe die de functie van de knop beschrijft. Ditzelfde komt voor op pagina https://www.werkenvooralbrandswaard.nl/vacatures/buitengewoon-opsporingsambtenaar-boa/.

Bevinding 47: Op pagina https://www.werkenvooralbrandswaard.nl/vacatures/?_search=werk is onder 'Vacatures - Actieve filters:' te zien welke filters actief zijn. Deze filters zien eruit als een blauwe knop met de naam van het filter, met daarna een 'x'. Hieruit is voor ziende bezoekers te begrijpen dat het filter verwijderd kan worden door hierop te klikken. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader is dit onduidelijk. Dit element ziet eruit als een knop en functioneert als een knop. In HTML heeft dit element echter een "role='link" gekregen, waardoor gebruikers van hulpsoftware horen dat het hier om een link gaat. Dit klopt niet, pas de rol van dit element aan naar 'button'.

Bevinding 48: Wanneer de website op een kleiner scherm bekeken wordt, of ingezoomd wordt, is in plaats van het menu een knop te zien met daarop een afbeelding met 3 streepjes (hamburgermenu). Deze knop heeft geen naam, waardoor het voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader niet duidelijk wat de functie van de knop is. Voeg een tekst toe die duidelijk maakt dat via deze knop het menu geopend kan worden. Ditzelfde geldt voor de afsluitknop (met daarop een 'X') die verschijnt wanneer het menu geopend is.

Bevinding 49: Wanneer de website op een kleiner scherm bekeken wordt, of ingezoomd wordt (bijvoorbeeld inzoomen tot 110% bij een schermgrootte van 1280 bij 1024 pixels), en het menu opengeklapt wordt, wordt het submenu van het menu-item 'Over Albrandswaard' uitgeklapt door te klikken op de knop (met afbeelding van pijl naar beneden) die achter het item staat. De status van het submenu (uitgevouwen of samengevouwen) wordt niet aan hulpsoftware doorgegeven. Zorg dat deze informatie, die visueel te zien is, ook beschikbaar is voor bezoekers die gebruik maken van hulpsoftware.
Dit probleem komt ook voor bij de knop waarmee je het navigatiemenu kan in- en uitklappen bij een ingezoomde weergave.

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: 2025-07-04 16:34:19 v2.4-011