Toegankelijke versie: https://www.toegankelijkheidsonderzoek.nl/bergenopzoom.nl/issues/
Naam website | Gemeente Bergen op Zoom |
---|---|
Scope |
|
Conformiteitsdoel | WCAG 2.1 niveau AA |
Basisniveau van toegankelijkheid ondersteund | Gangbare browsers en hulpsoftware. |
Een website bestaat vaak uit verschillende soorten pagina's, processen en content. De steekproef die wij maken is representatief voor de inhoud van de website. De onderzoeken voeren we handmatig uit waarbij we gebruik maken van hulpmiddelen. Dit doen wij zorgvuldig met mensen met ervaring. Omdat dit mensenwerk is kan het voorkomen dat een probleem niet is benoemd. Dit onderzoek is een momentopname. De website of app kan inmiddels veranderd zijn.
De gevonden problemen kunnen ook op pagina's buiten de steekproef voorkomen. Ga daarom bij elk probleem de gehele website na of dit ook op andere plaatsen voorkomt. Let op! Bij het aanbrengen van verbeteringen of wijzigingen op de website of app kunnen nieuwe problemen ontstaan. Let op! Bij het aanbrengen van verbeteringen of wijzigingen op de website of app kunnen nieuwe problemen ontstaan.
Het resultaat is voldoende als bij de uitkomst staat:
Het resultaat is onvoldoende als bij de uitkomst staat:
Informatie over succescriterium 1.1.1 Niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 1: In het hoofdmenu van https://www.bergenopzoom.nl/ staat het logo van Gemeente Bergen op Zoom. Deze afbeelding heeft geen goede alternatieve tekst. Zichtbaar in het logo is "Gemeente Bergen op Zoom". De alt-tekst is "Logo Bergen op Zoom". Niet alle zichtbare tekst in de afbeelding staat in de alt-tekst. De afbeelding dient ook als link, waardoor er ook een beschrijvend linkdoel aan de alternatieve tekst toegevoegd kan worden. Momenteel heeft de link een titel "Ga naar de homepage". Deze titel werkt niet altijd voor verschillende hulptechnologieën en volstaat daarom niet. De simpelste oplossing is om dit logo van de volgende alt-tekst te voorzien: "Gemeente Bergen op Zoom, ga naar de homepage".
Bevinding 2: In de footer van https://www.bergenopzoom.nl/ staat het logo van Interreg en Brabantse Wal. Deze afbeelding heeft geen goede alternatieve tekst ("Logo Interreg en Brabantse Wal"). De zichtbare tekst zou ook in de alt-tekst moeten staan, zodat mensen die blind zijn of bij mensen waar de afbeeldingen niet laden ook alle informatie meekrijgen die een ziende bezoeker krijgt. Geef dus alle zichtbare tekst in dit logo mee in de alt-tekst.
Bevinding 3: Techniek: Op de homepage https://www.bergenopzoom.nl/ staat een knop "Maak nu een afspraak". Het kalender icoon is een <span> en heeft een rol van image. Daarop is een aria-label geplaatst, welke als alternatieve tekst dient voor dit icoon. De alternatieve tekst is "kalender". Dit zorgt ervoor dat de linktekst voor schermlezergebruikers "Maak nu een afspraak kalender" is. Dit maakt de link verwarrender. Het icoon is in dit geval decoratief, want de gewone linktekst volstaat al. Een mogelijke oplossing: verwijder het aria-label van de afbeelding en zet het op aria-hidden. Dit gebeurt ook op pagina https://www.bergenopzoom.nl/contact-en-openingstijden.
Bevinding 4: Techniek: Op pagina https://www.bergenopzoom.nl/contact-en-openingstijden staan onder de kop "Of zoekt u" 2 links met dezelfde opbouw als hierboven omschreven, waar het aria-label van het icoon de linktekst beïnvloedt. Een oplossing is om het formulier en slot icoon op aria-hidden te zetten, om ze als decoratief te markeren. De linktekst biedt hier voldoende context voor de bezoeker.
Bevinding 5: Advies: Op de homepage https://www.bergenopzoom.nl/ staat een foto van het gemeentehuis. Deze foto staat tussen twee knoppen die je naar het volgende onderdeel van de pagina laat scrollen. Deze afbeelding heeft geen alt-tekst, waardoor iemand die blind is na het drukken op de pijltjesknop geen informatie te horen krijgt. Het lijkt dus alsof hier informatie mist. Gezien het gemeentehuis een belangrijk onderdeel is van de gemeente zou een beschrijving van het uiterlijk van het gemeentehuis in de alt-tekst hier op zijn plaats zijn. Die informatie is ook voor blinden fijn. Daarmee is dit onderdeel op de pagina voor schermlezergebruikers ook niet leeg.
Bevinding 6: In de PDF https://cuatro.sim-cdn.nl/bergenopzoom/uploads/verklaring_van_inwoning.pdf?cb=cWQ9L3tX zijn puntjes opgenomen op de plekken waar mensen iets in moeten vullen met pen. Deze puntjes zijn niet onzichtbaar gemaakt voor hulpsoftware waardoor de puntjes ook "netjes" voorgelezen worden. Dat wil je juist niet, om te voorkomen dat de bezoeker die gebruikmaakt van voorleessoftware verward raakt door alle voorgelezen puntjes. Zorg door juiste codering in de PDF dat de puntjes niet voor worden gelezen.
Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
Uitkomst: Onvoldoende
Bevinding 7: Op pagina https://www.bergenopzoom.nl/aardgasvrij is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 2:04. 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 hulpsoftware zoals schermvoorleessoftware 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.
Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)
Uitkomst: Voldoende
Bevinding 8: Advies: Op de pagina https://www.bergenopzoom.nl/aardgasvrij is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 2:04, de 6 stappen. Een deel is benoemd in de video, maar een deel ook niet. Helaas zitten er geen stiltes in de video waar een voiceover alsnog de ontbrekende informatie zou kunnen benoemen.
Informatie over succescriterium 1.3.1 Info en relaties
Uitkomst: Onvoldoende
Bevinding 9: In het laatste blok op de homepage https://www.bergenopzoom.nl/ klopt de koppenstructuur niet. Gebruik kopniveaus op een correcte volgorde. Bezoekers die gebruikmaken van schermvoorleessoftware 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. In dit geval is de overkoepelende kop "Contact met de gemeente" een h2. Daaronder staan 4 koppen, die allemaal van niveau h3 zijn, behalve "Bel ons", dat is een h2 waardoor de indruk wordt gewekt dat "Postadres" onderdeel is van "Bel ons". Maak van "Bel ons" een h3 om de structuur kloppend te maken.
Bevinding 10: Op pagina https://www.bergenopzoom.nl/contact-en-openingstijden is de tekst in de knop "Contactformulier" als kop opgemaakt. De kop bevat geen content omdat deze direct wordt opgevolgd door de volgende kop. Bezoekers die gebruikmaken van schermlezersoftware 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. In dit geval hoeft "Contactformulier" geen kop te zijn en dient het enkel als linktekst.
Bevinding 11: Op pagina https://www.bergenopzoom.nl/subsidieregeling-klimaatbestendig-bergen-op-zoom-2024-2027 onder "Meer weten of aanvragen?" en "Aanvragen" komt een opsomming voor. Deze is nu niet opgemaakt met de juiste code. Gebruik het ul- en li-element om opsommingen weer te geven. Op andere plekken op de pagina wordt dit wel goed toegepast.
Bevinding 12: De tabellen op pagina https://www.bergenopzoom.nl/subsidieregeling-klimaatbestendig-bergen-op-zoom-2024-2027 , bijvoorbeeld onder 'Subsidie groen dak' bevatten geen koppen. Tabellen met drie of meer kolommen moeten altijd tabelkoppen hebben die zijn opgemaakt met het th-element. Voeg tabelkoppen toe om dit probleem op te lossen. Door de eerste rij van de tabel in de table header (<thead>) te plaatsen en er tabelkoppen (<th>)van te maken, klopt de structuur weer. Geef de th-elementen een scope-attribuut mee zodat hulpsoftware de koppen netjes associeert met de cellen eronder. Overigens zijn de lange teksten lastig te lezen in de tabel, dus llicht is een andere vorm (subkoppen en opsommingen) beter leesbaar. Op pagina https://www.bergenopzoom.nl/aangifte-van-geboorte staat een goed voorbeeld.
Bevinding 13: Op pagina https://www.bergenopzoom.nl/woz-wet-waardering-onroerende-zaken zijn zinnen opgemaakt met het strong-element, bijvoorbeeld "1. Bel met de taxateur". Het strong-element is 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 (bijvoorbeeld h2 of h3). Deze koppen kunnen in dit geval als h3 gemarkeerd worden.
Bevinding 14: De PDF https://cuatro.sim-cdn.nl/bergenopzoom/uploads/transitievisie_warmte_bergen_op_zoom_-_inwonersversie_0.pdf?cb=0mQI88sY is niet gecodeerd (van tags voorzien). Dit betekent dat de documentstructuur niet is te bepalen. Software kan daardoor bijvoorbeeld niet bepalen 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-codelaag zoals semantische koppen en ALT-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.
Bevinding 15: De PDF https://cuatro.sim-cdn.nl/bergenopzoom/uploads/verklaring_van_inwoning.pdf?cb=cWQ9L3tX bevat lege p-tags (paragrafen) in het document. Ook is visueel de tekst "Verklaring van inwoning" opgemaakt als kop van het bestand. Deze tekst is niet gemarkeerd als kop, maar als paragraaf. De correcte opmaak van deze tags helpen blinde bezoekers om het bestand goed door te kunnen lezen, met bijvoorbeeld een schermlezer. Tip: bekijk deze gids van The Internet Academy over opmaakstijlen in PDFs: https://www.internetacademy.nl/ebooks/toegankelijke-pdfs-met-word/de-titel-kopstijlen-en-andere-opmaakstijlen.
Informatie over succescriterium 1.4.1 Gebruik van kleur
Uitkomst: Onvoldoende
Bevinding 16: De PDF https://cuatro.sim-cdn.nl/bergenopzoom/uploads/transitievisie_warmte_bergen_op_zoom_-_inwonersversie_0.pdf?cb=0mQI88sY heeft een figuur "Visie warmtevoorziening". Dit figuur is voorzien van een legenda. Het onderscheid tussen verschillende soorten warmtenet wordt gemaakt door gebruik van verschillende kleuren, met dezelfde soort arcering of streepjes. Slechtzienden en kleurenblinden kunnen hierdoor mogelijk het verschil niet herkennen. Zorg ervoor dat verschillende datasoorten in grafieken, plattegronden en infographics ook herkenbaar zijn aan minimaal één andere eigenschap, zoals vormen.
Bevinding 17: Advies: In de PDF https://cuatro.sim-cdn.nl/bergenopzoom/uploads/transitievisie_warmte_bergen_op_zoom_-_inwonersversie_0.pdf?cb=0mQI88sY staat op pagina 3 ook een soortgelijk figuur. Hier wordt wel gebruikgemaakt van verschillende vormen, om verschillende datasoorten aan te geven. De vormen zijn echter van een laag contrast, vergeleken met de kleur zelf, waardoor het verschil niet goed te onderscheiden is. Houd hierbij ook rekening met een minimaal contrastverschil van 3:1.
Informatie over succescriterium 1.4.3 Contrast (minimum)
Uitkomst: Onvoldoende
Bevinding 18: In de PDF https://cuatro.sim-cdn.nl/bergenopzoom/uploads/transitievisie_warmte_bergen_op_zoom_-_inwonersversie_0.pdf?cb=0mQI88sY is een lichtgroene (#7DBA26) kleur tekst op een witte (#FFF) kleur achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 2,4:1 waar dit minstens 4,5:1 moet zijn.
Bevinding 19: In de PDF https://cuatro.sim-cdn.nl/bergenopzoom/uploads/transitievisie_warmte_bergen_op_zoom_-_inwonersversie_0.pdf?cb=0mQI88sY is op pagina 6 een grafiek aanwezig met daarin dezelfde groene kleur (#7DBA26). Ook is er gebruikgemaakt van een lichtere kleur groen (#CBE0A8) en oranje (#F6BE98). Allen op een witte (#FFF) achtergrond. Deze teksten hebben een te laag contrast. De contrastverhouding moet minstens 4,5:1 zijn.
Informatie over succescriterium 1.4.4 Herschalen van tekst
Uitkomst: Onvoldoende
Bevinding 20: Let op: dit zijn problemen in de techniek van de website. Wanneer bij een schermgrootte van 1280px breed de tekst alleen ingezoomd wordt tot 200% dan komen op de homepage https://www.bergenopzoom.nl/ een deel van de content, bijvoorbeeld "Geboorte, trouwen en overlijden" en de "Meest gezocht" sidebar, over elkaar heen te staan. De tekst wordt daardoor deels onleesbaar.
Bevinding 21: Wanneer bij een schermgrootte van 1280px breed de tekst alleen ingezoomd wordt tot 200% dan valt op https://www.bergenopzoom.nl/aardgasvrij de link "Vul hier de enquête in als u op de Bergse Plaat woont" deels buiten beeld.
Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 22: In de PDF https://cuatro.sim-cdn.nl/bergenopzoom/uploads/transitievisie_warmte_bergen_op_zoom_-_inwonersversie_0.pdf?cb=0mQI88sY is op pagina 4 en 5 een infographic aanwezig met daarin een lichtere kleur groen (#CBE0A8) en oranje (#F6BE98) voor de plus- en mintekens, op een witte (#FFF) achtergrond. Deze iconen hebben een te laag kleur contrast. De contrastverhouding moet minstens 3:1 zijn.
Informatie over succescriterium 2.1.1 Toetsenbord
Uitkomst: Onvoldoende
Bevinding 23: Let op: dit is een probleem in de techniek van de website. Op pagina https://www.bergenopzoom.nl/woz-wet-waardering-onroerende-zaken staan tooltips, die op hover de uitleg van een afkorting geven. Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen deze tooltips niet gebruiken. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord.
Informatie over succescriterium 2.4.2 Paginatitel
Uitkomst: Onvoldoende
Bevinding 24: De PDF https://cuatro.sim-cdn.nl/bergenopzoom/uploads/transitievisie_warmte_bergen_op_zoom_-_inwonersversie_0.pdf?cb=0mQI88sY heeft geen documenttitel in de eigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam, maar de titel van het document wordt getoond. Dit geldt ook voor de Verklaring van Inwoning PDF https://cuatro.sim-cdn.nl/bergenopzoom/uploads/verklaring_van_inwoning.pdf?cb=cWQ9L3tX.
Informatie over succescriterium 2.4.4 Linkdoel (in context)
Uitkomst: Voldoende
Bevinding 25: Advies: Op pagina https://www.bergenopzoom.nl/aardgasvrij staat het telefoonnummer Regionaal Energieloket. Achter de link om het telefoonnummer te bellen staat "(lokaal tarief)". Gezien dit van invloed is op het telefoonnummer wordt het aangeraden om dit in de linktekst mee te nemen, anders kan een schermlezergebruiker dit makkelijk missen, gezien het na de linktekst staat. Zo hoort een schermlezergebruiker deze context ook in de link.
Informatie over succescriterium 3.1.1 Taal van de pagina
Uitkomst: Onvoldoende
Bevinding 26: In de eigenschappen van PDF https://cuatro.sim-cdn.nl/bergenopzoom/uploads/transitievisie_warmte_bergen_op_zoom_-_inwonersversie_0.pdf?cb=0mQI88sY is de taal niet ingevuld. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.
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.
Bij dit onderzoek is de volgende software gebruikt:
Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.