Toegankelijkheidsonderzoek

Issues:
Content-audit digitale toegankelijkheid website Aanpak Stikstof Brabant

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Aanpak Stikstof Brabant.nl
Datum 8 augustus 2023
Scope van de website
  • De content en huisstijl van alle pagina's op aanpakstikstofbrabant.nl
Buiten de scope van het onderzoek valt:
  • De techniek van het Mett-platform. Hiervoor is een apart onderzoeksrapport beschikbaar.
  • Onderdelen achter het inloggen.
  • Niet de pagina's op noord-brabant.maps.arcgis.com (onderdeel van een ander onderzoek)
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 38

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: Op de homepagina hebben de oranje cirkels met witte pijl die als link dienen alternatieve tekst. Bijvoorbeeld de pijl onder 'Actueel' die linkt naar Nieuws. Geef de afbeelding een alternatieve tekst zodat duidelijk is wat de bedoeling is van de link. Zie ook SC 2.4.4 en 4.1.2.

Bevinding 2: Op pagina https://aanpakstikstofbrabant.nl/ondersteuningsloketstikstof/oplossingen+in+praktijk/default.aspx staan afbeeldingen met alternatieve teksten met daarin de titels van het bijbehorende artikel. Bijvoorbeeld een afbeelding van de kaart van Brabant met de alternatieve tekst 'Bericht Project Grote Oogst bekijken'. Deze teksten beschrijven de afbeeldingen niet. Pas de alternatieve teksten aan of maak de afbeeldingen eventueel decoratief door een leeg alt-attribuut toe te voegen binnen het img-element.

Bevinding 3: Op de pagina https://aanpakstikstofbrabant.nl/aanpak/brabantseontwikkelaanpakstikstof/default.aspx staan drie tandwielen met eronder 3 kopjes en daaronder 3 teksten. Maak van de alternatieve tekst alt="" omdat deze naam er al direct onder staat in tekst. Zie ook SC 1.3.2.

Bevinding 4: Bij de verplichte velden in het formulier op pagina https://aanpakstikstofbrabant.nl/shortcuts/sendcontactmessage.aspx staat een sterretje. Hulpsoftware leest dit niet altijd voor. Zorg voor een alternatieve tekst, of maak op een andere manier duidelijk welke velden verplicht zijn.

Bevinding 5: Op pagina https://aanpakstikstofbrabant.nl/shortcuts/sendcontactmessage.aspx wordt onder het contactformulier een hCaptcha-test gebruikt waarvoor visuele waarneming nodig is. De test wordt niet op een gelijkwaardige alternatieve manier aangeboden, waardoor bijvoorbeeld blinden het formulier niet kunnen verzenden. Er wordt een toegankelijk alternatief aangeboden waarvoor bezoekers een e-mailadres moeten geven en eventueel andere privacy gevoelige informatie. Het volgen van deze procedure valt buiten de scope van dit onderzoek.

Bevinding 6: Op pagina https://aanpakstikstofbrabant.nl/natuurdoelanalyses/veelgestelde-vragen-natuurdoelanalyses/default.aspx staat onder 'Over Natuurdoelanalyses /

Wie heeft de Natuurdoelanalyses uitgevoerd? En waar zijn deze te vinden?' een link naar 'brabant.nl' met daarachter een icoon dat aan ziende bezoekers aangeeft dat de link een nieuw venster opent. Deze informatie wordt niet doorgegeven aan screenreadergebruikers omdat het icoon geen alternatieve tekst heeft. Bovendien wordt het icoon wordt door middel van het pseudo-element ::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. Zorg ervoor dat het icoon voor iedereen waarneembaar is en dat blinde bezoekers over dezelfde informatie beschikken als ziende bezoekers door het icoon een alternatieve tekst te geven. Dit kan bijvoorbeeld door het icoon in de html te plaatsen als bijvoorbeeld svg en een title-element te plaatsen binnen het svg-element van het icoon. Gebruik hierbij geen aria-hidden attribuut op het svg-element.

Advies:

Bevinding 7: Op de pagina https://aanpakstikstofbrabant.nl/ondersteuningsloketstikstof/default.aspx staat onder 'Zo werkt het loket' een afbeelding met tekst. Door een leeg alt-attribuut wordt de afbeelding door hulpsoftware als decoratief genegeerd, terwijl het een informatieve afbeelding is. De informatie in de afbeelding is niet beschikbaar voor blinden en slechtzienden. Zorg voor een tekst alternatief die voorgelezen kan worden door de schermleessoftware. Zie ook 1.4.5.

Bevinding 8: In de PDF Natuurdoelanalyse staan afbeeldingen die niet geen beschrijving hebben en is niet als artefact aangemerkt zijn. Bijvoorbeeld de informatieve afbeelding 3-6. Voor informatieve afbeeldingen geldt dat ze een beschrijving moeten hebben van de informatie die er in staat. De decoratieve afbeeldingen dienen als artifact te worden getagd. Kaarten vormen een uitzondering, die hoeven niet verplicht toegankelijk te zijn maar zij moeten wel als artefact worden getagd.

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 9: Op de pagina https://aanpakstikstofbrabant.nl/actueel/Nieuws/2494173.aspx staat een video waar het logo van der Provincie Noord-Brabant aan het begin en eind in beeld komt. Als je dat niet kan zien mis je dat dit een video van de Provincie is. Voeg deze informatie toe aan de audiodescriptie, of laat alle informatie uitspreken door de voiceover waardoor de audiodescriptie overbodig wordt.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 10: Op de pagina https://aanpakstikstofbrabant.nl/actueel/Nieuws/2494173.aspx staat een video waar het logo van der Provincie Noord-Brabant aan het begin en eind in beeld komt. Als je dat niet kan zien mis je dat dit een video van de Provincie is. Voeg deze informatie toe aan de audiodescriptie, of laat alle informatie uitspreken door de voiceover waardoor de audiodescriptie overbodig wordt.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 11: Op de homepage staat onder het kopje 'Aanpak stikstof Brabant' een stuk tekst in vet. Hier is het strong-element gebruikt om een heel stuk tekst nadruk te geven, dat is niet de bedoeling. Het em- en strong-element is bedoeld voor het benadrukken van kleine stukjes tekst. Maak gebruik van de stylesheet om een introtekst in een vet lettertype te tonen.

Bevinding 12: Op de pagina https://aanpakstikstofbrabant.nl/natuurdoelanalyses/veelgestelde-vragen-natuurdoelanalyses/default.aspx staat onder elk item de regel 'Laatst bijgewerkt: datum' in cursief. Hier is het em-element gebruikt om een hele regel nadruk te geven, dat is niet de bedoeling. Het em-element is bedoeld voor het benadrukken van kleine stukjes tekst in een bijvoorbeeld een paragraaf. Maak gebruik van de stylesheet om deze tekst cursief te tonen. Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina https://aanpakstikstofbrabant.nl/actueel/Nieuws/2114689.aspx is een hele quote cursief gemaakt doormiddel van het em-element.

Bevinding 13: Op de pagina https://aanpakstikstofbrabant.nl/ondersteuningsloketstikstof/vraag+en+aanbod+stikstofruimte/stand+van+zaken+rond+extern+salderen/default.aspx staat tabel 'Hoeveel aanvragen extern salderen zijn er? '. De koppen in deze tabel zijn opgemaakt met het strong-element, in het th-element. De tabel is goed opgemaakt, maar strong mag hier niet gebruikt worden. Het strong-element is bedoeld om nadruk te geven aan een of enkele woorden, niet voor opmaak. Gebruik bijvoorbeeld CSS om tabelkoppen op te maken.

Bevinding 14: De PDF 'Overzicht Lbv en Lbv-plus' heeft twee tabellen waarin de eerste kop-cel leeg is. Zorg dat elke kop-cel een naam heeft die de bijbehorende cellen beschrijft of, als dit de eerste kolom betreft zorg dat hier geen kop (<th> wordt gebruikt maar een data-cel (<td>).

Bevinding 15: In de PDF 'Overzicht Lbv en Lbv-plus' zijn een opsommingen zichtbaar. De lijsten zijn echter niet als opsomming gecodeerd. Zorg ervoor dat de tekst gecodeerd is met een L en LI.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 16: Op de pagina https://aanpakstikstofbrabant.nl/aanpak/brabantseontwikkelaanpakstikstof/default.aspx staan drie tandwielen met eronder 3 kopjes en daaronder 3 teksten. Als deze blokken met afbeelding en tekst achter elkaar worden voorgelezen is het niet duidelijk bij welke tekst en afbeelding bij elkaar hoort.Visueel mag deze indeling wel aangehouden worden maar zorg dat de onderdelen voor elk blok van boven naar beneden worden voorgelezen. Laat de alt-tekst bij de tandwielen dan leeg, omdat deze naam er al direct onder staat in tekst. Zie ook SC 1.1.1.

Bevinding 17: De codelaag in de PDF Natuurdoelanalyse heeft geen logische volgorde. Van pagina 5 wordt naar pagina 100 en 101 gesprongen, waar een gedeelte van de informatie wordt weergegeven, en daarna weer naar pagina 6. Zorg voor een codelaag die de volgorde van het document volgt.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 18: In de footer van elke pagina staan een aantal witte links op groene achtergrond (HEX #B0C90A). Deze tekst heeft een te laag contrast. De contrastverhouding is 1,9:1 waar dit 4,5:1 moet zijn. Dezelfde kleurencombinatie wordt ook op de homepagina gebruikt voor de tekst 'Ik wil meer weten over stikstof'.

Bevinding 19: Op de homepagina heeft de witte tekst 'Ik wil weten wat de stikstofaanpak voor mij betekent' op groene achtergrond (HEX #3CAC54) een te laag contrast. De contrastverhouding is 2,9:1 waar dit 4,5:1 moet zijn.

Bevinding 20: Als in het menu op elke de pagina een item actief is of focus heeft wordt de tekst wit op groene achtergrond (HEX #3CAC54). Deze tekst heeft een te laag contrast. De contrastverhouding is 2,9:1 waar dit 4,5:1 moet zijn.

Bevinding 21: Submenu-items hebben een witte tekst op een transparant groene achtergrond. Het contrast van de tekst hangt af van de onderliggende content, maar met name op een witte achtergrond heeft de tekst een te laag contrast met de lichtgroene achtergrond, (HEX #3CAC54). De contrastverhouding is 2,9:1 waar dit 4,5:1 moet zijn.

Bevinding 22: Als in het menu op pagina https://aanpakstikstofbrabant.nl/actueel/Nieuws/2494173.aspx het item 'Actueel' focus heeft verschijnt de tekst 'Nieuws' in donker grijs (HEX #555555) op donkergroene achtergrond (HEX #3CAC54). De contrastverhouding is 2,6:1 waar dit 4,5:1 moet zijn. Hetzelfde gebeurt bij elk menu-item naar een huidige pagina, bijvoorbeeld op pagina https://aanpakstikstofbrabant.nl/ondersteuningsloketstikstof/stikstofbanken/default.aspx bij het menu item 'Stikstofbanken' onder 'Ondersteuningloket Stikstof'.

Bevinding 23: Op pagina https://aanpakstikstofbrabant.nl/shortcuts/sendcontactmessage.aspx heeft de knop 'Versturen' witte tekst op oranje achtergrond (HEX #F7A600). Deze tekst heeft een te laag contrast. De contrastverhouding is 2:1 waar dit 4,5:1 moet zijn. Dezelfde kleurencombinatie komt op meer plaatsen in de website voor, bijvoorbeeld op pagina https://aanpakstikstofbrabant.nl/ondersteuningsloketstikstof/vraag+en+aanbod+stikstofruimte/stand+van+zaken+rond+extern+salderen/default.aspx bij de knop 'Neem contact op' of op pagina https://aanpakstikstofbrabant.nl/ondersteuningsloketstikstof/stikstofbanken/default.aspx bij de knop 'Vul het formulier in'.

Bevinding 24: Als bij het versturen van het formulier op pagina https://aanpakstikstofbrabant.nl/shortcuts/sendcontactmessage.aspx de hCaptcha niet ingevuld verschijnt er een foutmelding. De groene tekst 'Anti spam controle *' (HEX #129C40) op roze achtergrond (HEX #F0C5C5) heeft een te laag contrast. De contrastverhouding is 2,3:1 waar dit 4,5:1 moet zijn.

Bevinding 25: Op pagina https://aanpakstikstofbrabant.nl/actueel/Nieuws/2114689.aspx staat een quote in grijze tekst (HEX #999999) op witte achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 2,9:1 waar dit 4,5:1 moet zijn.

Bevinding 26: In de PDF Natuurdoelanalyse staat bijvoorbeeld op pagina 3 kleine oranje tekst (Hex #E4610F) op witte achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 3,5:1 waar dit 4,5:1 moet zijn. Hetzelfde geldt voor de witte tekst op oranje achtergrond, bijvoorbeeld op pagina 80.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 27: Op de pagina https://aanpakstikstofbrabant.nl/ondersteuningsloketstikstof/default.aspx staat onder 'Zo werkt het loket' een afbeelding met tekst. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. De tekst op de afbeelding komt verder niet voor op de pagina. Plaats deze tekst daarom als HTML-tekst op de pagina.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 28: Op de homepagina is een knop met een wit pijltje op oranje achtergrond (HEX #F7A600) onder 'Uitgelicht Aanpak piekbelasting van start'. Deze afbeelding heeft een te laag contrast. De contrastverhouding is 2:1 waar dit 3:1 moet zijn. De zelfde kleurencombinatie is gebruikt voor de sluiten knop van het venster 'Cookie-instellingen' dat geopend wordt met de knop rechts onderaan elke pagina.

Bevinding 29: Op pagina https://aanpakstikstofbrabant.nl/shortcuts/sendcontactmessage.aspx zijn de randen van de invoervelden lichtgrijs. Het contrast van deze grijze op de witte achtergrond is te laag. De contrastverhouding is hier 1,2:1, waar dit minimaal 3:1 moet zijn.
Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.
Dit komt ook voor in het zoekveld op de pagina https://aanpakstikstofbrabant.nl/natuurdoelanalyses/veelgestelde-vragen-natuurdoelanalyses/default.aspx

Bevinding 30: Advies: Als op de homepagina met de link 'Wijzig hier jouw cookie-instellingen.' een popup-venster wordt geopend is en een vinkje voor de tekst 'Noodzakelijke cookies en geanonimiseerde statistieken cookies'. De lichtgrijze v (HEX #E9E9E9) op lichtgrijze achtergrond (HEX # D2D2D2) heeft een te laag contrast. De contrastverhouding is hier 1,3:1, waar dit minimaal 3:1 moet zijn. Het is een niet actieve knop en daarvoor geldt de contrast regel niet, maar nu is voor slechtzienden niet duidelijk wat er aan de hand is.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 31: De PDF Overzicht Lbv en Lbv-plus heeft een document-titel in de eigenschappen maar in de eigenschappen staat ingesteld dat de Bestandsnaam wordt getoond. Zorg dat niet de bestandsnaam maar de Documenttitel wordt getoond.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 32: Op de homepagina hebben de oranje cirkels met witte pijl die als link dienen geen toegankelijke naam. Bijvoorbeeld de pijl onder 'Actueel' die linkt naar Nieuws. Omdat de link daarmee geen linkdoel heeft, is het voor blinden en slechtzienden die gebruikmaken van een screenreader niet duidelijk waar de link heen gaat. Voeg een toegankelijke naam waarin het linkdoel is omschreven toe om dit probleem op te lossen. Zie ook SC 1.1.1.

Bevinding 33: Op pagina https://aanpakstikstofbrabant.nl/shortcuts/sendcontactmessage.aspx komen links voor met meerdere keren dezelfde linktekst 'Aanpak stikstof Brabant' Deze link wit op zwart boven aan de pagina is geen link naar de homepagina maar naar de pagina 'Aanmelden platform'. Zorg dat links naar verschillende doelen unieke linkteksten hebben, door bijvoorbeeld de tekst aan te vullen met de pagina waarnaar gelinkt wordt. Als visueel duidelijk is waar de link bij hoort hoeft deze aanvullende tekst niet visueel zichtbaar te zijn.

Bevinding 34: Advies: Op meerdere pagina's, bijvoorbeeld op pagina https://aanpakstikstofbrabant.nl/ondersteuningsloketstikstof/vraag+en+aanbod+stikstofruimte/stand+van+zaken+rond+extern+salderen/default.aspx#skipMainContent komt de link voor met de linktekst '.' (punt). Uit de context is af te leiden waar de link bij hoort maar het werkt verwarrend. Laat link op alleen de punt weg. Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina https://aanpakstikstofbrabant.nl/ondersteuningsloketstikstof/stikstofbanken/default.aspx onder 'Microdepositiebank (MDB)' na de link BIJ12.

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 35: Advies: In het formulier op pagina https://aanpakstikstofbrabant.nl/shortcuts/sendcontactmessage.aspx staat een hCaptcha. Deze is Engelstalig en correct als zodanig gecodeerd. Er is ook een Nederlandstalige variant. Overweeg om die aan te bieden.

3.3 Assistentie bij invoer

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 36: Opmerking: Als bij het versturen van het formulier op pagina https://aanpakstikstofbrabant.nl/shortcuts/sendcontactmessage.aspx het selectie vakje in de hCaptcha niet is ingevuld verschijnt de suggestie: 'Om spam tegen te gaan vragen we je om voor het versturen de optie "Ik ben een mens" aan te vinken.' De hCaptcha staat echter standaard op Engelstalig en heeft het label: 'I am human'. Pas de tekst aan of beter nog, zet de hCaptcha op Nederlands.

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 37: Op de homepagina hebben de oranje cirkels met witte pijl die als link dienen geen toegankelijke naam. Bijvoorbeeld de pijl onder 'Actueel' die linkt naar Nieuws. Omdat de link daarmee geen linkdoel heeft, is het voor blinden en slechtzienden die gebruikmaken van een screenreader niet duidelijk waar de link heen gaat. Voeg een toegankelijke naam waarin het linkdoel is omschreven toe om dit probleem op te lossen.

Bevinding 38: Enkele afbeeldingen hebben geen, of geen goede naam. Zie hiervoor 1.1.1

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-21 15:30:07 v2.4-011