Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website P&C portaal Provincie Noord-Brabant

(Alleen de bevindingen)

Scope van de evaluatie

Naam website P&C portaal Provincie Noord-Brabant
Datum 24 februari 2023
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op begroting.brabant.nl.
  • Alle PDF's op begroting.brabant.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 begroting.brabant.nl met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 41

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 Provincie Noord-Brabant bovenaan de homepage heeft geen goede alternatieve tekst. De alternatieve tekst van een logo moet minimaal de naam van de organisatie bevatten. Als de afbeelding, zoals in dit geval als link dient kan ook een beschrijvend linkdoel aan de alternatieve tekst worden toegevoegd.

Bevinding 2: Rechtsboven aan elke pagina (behalve de homepage) staat een afbeelding van een vergrootglas die een link is naar de zoekpagina. 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 en de link wegvallen, 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- of svg-element met een tekstalternatief. Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina begroting.brabant.nl/bestuursrapportage-ii-2021/programma/programma-7-landbouw-en-voedsel bij de iconen 'Downloaden' en 'Delen' links onderin de pagina.

Bevinding 3: Op de voorpagina van het PDF-document "Begroting 2023" staan decoratieve afbeeldingen. Deze afbeeldingen hebben geen beschrijving en zijn niet als artefact aangemerkt. Hierdoor kan hulpsoftware deze afbeeldingen niet negeren en worden ze bijvoorbeeld voorgelezen door hulpsoftware. Zorg ervoor dat decoratieve afbeeldingen uit de codelaag worden verwijderd en aangemerkt als artefact.
Deze PDF bevat precies dezelfde inhoud als op de website te vinden is onder begroting.brabant.nl/begroting-2023. Als de website volledig toegankelijk is is dit een goed alternatief voor de PDF en hoeft deze niet meer toegankelijk worden gemaakt.

Bevinding 4: Op de voorpagina van het PDF-document "Begroting 2023" staat het logo 'Noord-Brabant'. Dit logo heeft geen alternatieve tekst, hierdoor missen mensen die het scherm niet kunnen zien dit logo. Zorg ervoor dat logo's altijd een alternatieve tekst hebben.
Deze PDF bevat precies dezelfde inhoud als op de website te vinden is onder begroting.brabant.nl/begroting-2023. Als de website volledig toegankelijk is is dit een goed alternatief voor de PDF en hoeft deze niet meer toegankelijk worden gemaakt.

Bevinding 5: Onder andere op pagina 6,11 en 129 in het PDF-document "Begroting 2023" staan infographics en grafieken met tekst. Dit zijn geen decoratieve afbeeldingen. Deze afbeeldingen hebben geen beschrijving en de informatie in de afbeeldingen komt niet terug in de omringende teksten. Voor informatieve afbeeldingen geldt dat ze een beschrijving moeten hebben van de informatie die erin staat.
Deze PDF bevat precies dezelfde inhoud als op de website te vinden is onder begroting.brabant.nl/begroting-2023. Als de website volledig toegankelijk is is dit een goed alternatief voor de PDF en hoeft deze niet meer toegankelijk worden gemaakt.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 6: Rechts in de menubalk op elke pagina, behalve de homepagina, staat een vergrootglas. Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% verschijnt daarnaast ook een hamburger icoon waarmee het hoofdmenu geopend kan worden. Het vergrootglas en het hamburgermenu icoon staan elk in een lijstitem, maar de bovenliggende <ul> heeft de rol 'menu' en niet de rol lijst. Dit kan problemen geven met hulpsoftware. Laat bijvoorbeeld de role="menu" weg.
Hetzelfde komt vaker op de website voor, bijvoorbeeld onderin pagina begroting.brabant.nl/jaarstukken-2020/programma/programma-3-water-en-bodem staat onder de knop 'Delen' een lijst met drie items met role="menu".

Bevinding 7: Op pagina begroting.brabant.nl/begroting-2023/programma/algemeen-inleidend-hoofdstuk zijn koppen opgemaakt met het em-element, bijvoorbeeld 'Brede Welvaart'. Het em-element is bedoeld om nadruk te geven aan een of enkele woorden, niet voor hele zinnen. Ook mogen dit element niet worden gebruikt als visuele kop, omdat het niet dezelfde betekenis heeft als een kop (bijvoorbeeld h4 of h5).

Bevinding 8: Op pagina begroting.brabant.nl/begroting-2023/projecten in het venster dat opent met de knop '(Door)ontwikkelen van stedelijke innovatie districten' is een kop 'Omschrijving (toelichting)' opgemaakt met het strong-element. Het strong-element is bedoeld om nadruk te geven aan een of enkele woorden, niet voor hele zinnen. Ook mogen dit elementen niet worden gebruikt als visuele kop, omdat het niet dezelfde betekenis heeft als een kop (bijvoorbeeld h3 of h4). Hetzelfde komt vaker voor op de website, bijvoorbeeld op pagina begroting.brabant.nl/begroting-2023/programma/financiering-treasury is de kop 'Treasury-beheer' opgemaakt met het strong-element en de kop 'Rentebaten en -resultaat' met het strong- en het em-element. Ook het em-element is niet bedoeld om koppen mee op te maken.

Bevinding 9: Op pagina begroting.brabant.nl/begroting-2023/programma/algemeen-inleidend-hoofdstuk zijn koppen niet opgemaakt als kop maar met een style attribuut, bijvoorbeeld 'Nieuwe beleidskaders'. Hulpsoftware maakt gebruik van de semantische betekenis van koppen om een inhoudsoverzicht van een pagina weer te geven. Zorg ervoor dat de juiste code in de HTML wordt gebruikt om deze koppen op te maken. Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina begroting.brabant.nl/jaarstukken-2021-/programma/algemeen-hoofdstuk bij de kop 'Programma 1: Bestuur en Veiligheid'.

Bevinding 10: Op pagina begroting.brabant.nl/begroting-2023/programma/financiering-treasury is de semantische waarde van een heel stuk tekst tussen 'Wat gaan we daarvoor doen?' en 'Renteschema' verwijderd door het gebruik van role="none". De attributen role="none" of role="presentation" mogen alleen worden gebruikt wanneer het gebruikte HTML-element voor decoratie of lay-out doeleinden is, bijvoorbeeld wanneer een tabel is gebruikt voor de opmaak van tekst. Verwijder daarom het attribuut role="none" van deze tekst.
Een soortgelijk probleem komt ook voor op pagina begroting.brabant.nl/begroting-2023/bestanden, waar twee lijstitems role="none" hebben gekregen en hierdoor geen lijstitems meer zijn, maar nog wel in een ul-element zijn geplaatst. Dit komt vaker voor bij verschillende lijsten. Zorg ervoor dat deze lijsten correct zijn opgemaakt.

Bevinding 11: Op pagina begroting.brabant.nl/bestuursrapportage-ii-2021/programma/programma-7-landbouw-en-voedsel staan een groot aantal lijsten onder de teksten 'Wat gaan we daar voor doen?'. Deze lijsten (ul-elementen) hebben het role="rowgroup" attribuut waardoor ze niet langer als lijst functioneren. Hierdoor zijn de li-elementen binnen de ul-elementen niet meer correct genest. Zorg voor een goede opmaak van deze lijsten, bijvoorbeeld door het attribuut role="rowgroup" te verwijderen.
Hetzelfde probleem komt op meer plaatsen in de website voor, bijvoorbeeld op pagina begroting.brabant.nl/jaarstukken-2020/programma/programma-3-water-en-bodem onder elke zin 'Hebben we daarvoor gedaan wat we wilden doen?'.

Bevinding 12: Op pagina begroting.brabant.nl/bestuursrapportage-ii-2021/programma/programma-7-landbouw-en-voedsel staat een aantal keer de teksten 'Wat gaan we daar voor doen?' met het role="rowheader" attribuut en daaronder lijsten (ul-elementen) met het role="rowgroup" attribuut.
Een rowheader en rowgroup moeten onderdeel zijn van een grid of een tabel, dat is hier niet het geval. Laat role="rowheader" en role="rowgroup" weg. Hetzelfde probleem komt op meer plaatsen in de website voor, bijvoorbeeld op pagina begroting.brabant.nl/jaarstukken-2020/programma/programma-3-water-en-bodem onder elke zin 'Hebben we daarvoor gedaan wat we wilden doen?'.

Bevinding 13: Op pagina begroting.brabant.nl/jaarstukken-2020/programma/programma-3-water-en-bodem staat grote knoppen met afgeronde hoeken, bijvoorbeeld 'Concrete aanpak in projecten en gebieden.' waarmee een venster met een tabel opent. De koppen in deze tabellen zijn opgemaakt met het strong-element, in plaats van met het th-element. Daardoor is de relatie tussen de koppen en datacellen voor screenreadergebruikers niet duidelijk. Zorg ervoor dat tabellen goed zijn opgemaakt en gebruik voor tabelkoppen altijd het th-element.
Dit probleem komt voor bij tabellen op meerdere pagina's, bijvoorbeeld ook op pagina begroting.brabant.nl/begroting-2023/projecten in het venster dat opent met de knop '(Door)ontwikkelen van stedelijke innovatie districten'.

Bevinding 14: In de PDF "Begroting 2023" staan tabellen, bijvoorbeeld de tabel 'Inventarisatie risico's' op pagina 128. In deze tabellen zijn de kop- en data-cellen correct aangegeven zijn met th- en td-tags. Echter, hulpsoftware kan de relatie tussen deze kop- en datacellen niet bepalen. Om dit probleem op te lossen moeten de data- en kop-cellen aan elkaar worden gekoppeld. Geef hiervoor het bereik aan in de eigenschappen van de kopcel of maak gebruik van id's om de th- en td-tags aan elkaar te koppelen.
Deze PDF bevat precies dezelfde inhoud als op de website te vinden is onder begroting.brabant.nl/begroting-2023. Als de website volledig toegankelijk is is dit een goed alternatief voor de PDF en hoeft deze niet meer toegankelijk worden gemaakt.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 15: Op de pagina begroting.brabant.nl/begroting-2023/programma/financiering-treasury staat een staafdiagram 'Grafiek I' waarin de link tussen labels in de legenda en de waarden in de staven alleen aangegeven is door middel van kleur. Kleurenblinden en slechtzienden kunnen mogelijk deze koppeling niet maken. Zorg ervoor dat er een andere manier is om deze informatie aan elkaar te koppelen, bijvoorbeeld door gebruik te maken van patronen in plaats van kleur.

Bevinding 16: In de PDF "Begroting 2023" staan grafieken, bijvoorbeeld op pagina 239 'Aandeel leningen' en pagina 250 'Verstrekte geldleningen', waarbij de link tussen labels in de legenda en de waarden in de grafiek alleen aangegeven is door middel van kleur. Kleurenblinden en slechtzienden kunnen mogelijk deze koppeling niet maken. Zorg ervoor dat er een andere manier is dat informatie aan elkaar wordt gekoppeld naast kleur, bijvoorbeeld door gebruik te maken van patronen.
Deze PDF bevat precies dezelfde inhoud als op de website te vinden is onder begroting.brabant.nl/begroting-2023. Als de website volledig toegankelijk is is dit een goed alternatief voor de PDF en hoeft deze niet meer toegankelijk worden gemaakt.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 17: Op pagina begroting.brabant.nl/begroting-2023/programma/financiering-treasury#2699460-onderdeel-renteschema in de tabel 'Renteschema' is een donkergrijze tekst (HEX #2A292E) op een rode achtergrond (HEX #FF0000). Deze tekst heeft een te laag contrast. De contrastverhouding is 3,4:1 waar dit 4,5:1 moet zijn.

Op pagina begroting.brabant.nl/begroting-2023/programma/financiering-treasury#2699460-onderdeel-renteschema in de tabel 'Renteschema' is in de onderste rij een donkere tekst (HEX #2A292E) op een donkergrijze achtergrond (HEX #7E8C8D) geplaatst. Deze tekst heeft een te laag contrast. De contrastverhouding is 4,1:1 waar dit 4,5:1 moet zijn.

Bevinding 18: Op pagina begroting.brabant.nl/begroting-2023/programma/programma-1-bestuur-en-veiligheid#2699369-onderdeel-wat-mag-het-kosten in tabel 1 staat een witte tekst op een rode achtergrond (HEX #FF0000). Deze tekst heeft een te laag contrast. De contrastverhouding is 4:1 waar dit 4,5:1 moet zijn. Dezelfde combinatie komt vaker voor in de website, bijvoorbeeld op pagina begroting.brabant.nl/jaarstukken-2020/programma/programma-3-water-en-bodem#1907313-onderdeel-heeft-het-gekost-wat-het-mocht-kosten in de bovenste rij van de tabel onderaan de pagina.

Bevinding 19: In de PDF "Begroting 2023" is het contrast van de witte tekst 'overige risico's' op de roze achtergrond (HEX #FF9797) in de grafiek op pagina 129 te laag. De contrastverhouding is hier 2,1:1, waar dit minimaal 4,5:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Gebruik een andere kleur voor de focus op die plekken waar het contrast te laag is.
In de PDF komen meer teksten met een te lage contrastverhouding voor, bijvoorbeeld op pagina 149 heeft de witte tekst '2. Ruimte en wonen' op de gele achtergrond (HEX #FFC000) een contrastverhouding van 1,6:1 waar dit minimaat 4,5:1 moet zijn. Controleer de contrastverhoudingen in het hele document.
Deze PDF bevat precies dezelfde inhoud als op de website te vinden is onder begroting.brabant.nl/begroting-2023. Als de website volledig toegankelijk is is dit een goed alternatief voor de PDF en hoeft deze niet meer toegankelijk worden gemaakt.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 20: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% verdwijnt op pagina begroting.brabant.nl/begroting-2023/programma/financiering-treasury#2699459-onderdeel-inleiding een deel van de tabel rechts buiten beeld. Zorg ervoor dat op elke pagina kan worden ingezoomd tot 200% zonder dat content buiten de schermweergave valt.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 21: Op pagina begroting.brabant.nl/begroting-2023/programma/algemeen-inleidend-hoofdstuk staat een afbeelding van een aantal opgaven van de provincie. Dit is een informatieve 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.
Deze afbeelding staat ook op pagina 6 van de PDF "Begroting 2023".

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 22: Op pagina begroting.brabant.nl/begroting-2023/programma/financiering-treasury' staat een tabel, 'Tabel II'. Als bij een resolutie van 1280x1024px ingezoomd wordt tot 200% verdwijnt een gedeelte van de inhoud rechts buiten beeld. Zorg ervoor dat het mogelijk is om in te zoomen tot 400% zonder dat content buiten de schermweergave valt. Bij dit succescriterium mag geen scrolbalk in de leesrichting op de pagina worden geplaatst, behalve op tabellen, die zijn hiervan uitgezonderd.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 23: Op de pagina begroting.brabant.nl/begroting-2023/programma/financiering-treasury staat een afbeelding van een staafdiagram 'Grafiek I'. Het contrast van de verschillende kleuren op de witte achtergrond en met elkaar is te laag. Bijvoorbeeld de lichtblauwe lijn (HEX #49ABC5) heeft een contrastratio van 2,7:1 ten opzichte van de achtergrond, waar dat minstens 3:1 moet zijn. Het licht roze gearceerde deel van de staven (HEX #FDE4CF) tegen de witte achtergrond heeft een contrastratio van 1,2:1, waar dit minstens 3:1 moet zijn. Dit probleem zou kunnen worden opgelost door bijvoorbeeld rond elk veld een zwarte rand te plaatsen waarbij de contrastratio tussen de velden en de rand meer dan 3:1 is.

Bevinding 24: Advies: Op de pagina begroting.brabant.nl/begroting-2023/programma/algemeen-inleidend-hoofdstuk staan grafieken waarin elementen een te laag contrast hebben ten opzichte van elkaar. Bijvoorbeeld in het taartpunt diagram 'Geraamde herkomst van middelen' is het contrast tussen het gele veld (HEX #FFCD33) en het groene veld ernaast (HEX #70AD47) te laag. De contrastverhouding is 1,8:1, waar dit minstens 3:1 moet zijn. Kleurenblinden en slechtzienden kunnen zo de grafiek niet lezen. De getallen staan ernaast, dus het is niet af te keuren, maar met een kleine ingreep wordt de grafiek beter leesbaar. Bijvoorbeeld door rond elk veld een zwarte rand te plaatsen waarbij de contrastratio tussen de velden en de rand meer dan 3:1 is.

Bevinding 25: Advies: In de PDF "Begroting 2023" staan grafieken waarin elementen een te laat contrast hebben ten opzichte van elkaar. Bijvoorbeeld in het taartpunt diagram 'Geraamde herkomst van middelen' op pagina 11 is het contrast tussen het gele veld (HEX #FFCD33) en het groene veld ernaast (HEX #70AD47) te laag. Hier is de contrastverhouding 1,8:1, waar dit minstens 3:1 moet zijn. Kleurenblinden en slechtzienden kunnen zo de grafiek niet lezen. De getallen staan ernaast, dus het is niet af te keuren maar met een kleine ingreep wordt de grafiek beter leesbaar. Bijvoorbeeld door rond elk veld een zwarte rand te plaatsen waarbij de contrastratio tussen de velden en de rand meer dan 3:1 is.
Deze PDF bevat precies dezelfde inhoud als op de website te vinden is onder begroting.brabant.nl/begroting-2023. Als de website volledig toegankelijk is is dit een goed alternatief voor de PDF en hoeft deze niet meer toegankelijk worden gemaakt.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 26: Wanneer bezoekers de regelhoogte, alinea- en tekstafstand wijzigen naar de waarden zoals beschreven staan bij dit succescriterium, dan verdwijnt op pagina begroting.brabant.nl/jaarstukken-2020/programma/programma-3-water-en-bodem bij een schermgrootte van 1280x1024px en ingezoomd tot 200% een deel van de tabel onderaan de pagina buiten beeld. Zorg ervoor dat content niet buiten de schermweergave valt wanneer bezoekers de regelhoogte, alinea- en tekstafstand wijzigen, ook bij een ingezoomde weergave.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Onvoldoende

Bevinding 27: Als je op de homepagina over één van de 4 grote knoppen, bijvoorbeeld 'Begroting' hovert met de muis, verschijnt er aanvullende content. De bezoeker kan deze content niet weghalen zonder de muis te bewegen of de focus met het toetsenbord te verplaatsen. Een bezoeker moet dit bijvoorbeeld met de escape toets kunnen doen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 28: Op pagina begroting.brabant.nl/begroting-2023/programma/financiering-treasury is de semantische waarde van een heel stuk tekst tussen 'Wat gaan we daarvoor doen?' en 'Renteschema' verborgen voor hulpsoftware door role="none". Als bij een schermresolutie 1280px breed ingezoomd wordt tot 200% verdwijnt een gedeelte van de inhoud rechts buiten beeld. Er verschijnt onder de tekst een scrollbar die niet met behulp van het toetsenbord te gebruiken is omdat hij geen focus krijgt. Zorg dat alle inhoud van de webpagina met behulp van het toetsenbord bereikt kan worden.

2.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Uitkomst: Onvoldoende

Bevinding 29: Op een aantal pagina's, waaronder de homepagina en begroting.brabant.nl/begroting-2023, verandert de achtergrondafbeelding na elke paar seconden. Deze verandering kan niet worden gestopt, gepauzeerd of verborgen. 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, doordat de content beweegt. Zorg dat bezoekers de veranderende afbeeldingen kunnen stoppen of pauzeren, of laat maar één afbeelding zien.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 30: De PDF "Begroting 2023" 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 bij openen.
Deze PDF bevat precies dezelfde inhoud als op de website te vinden is onder begroting.brabant.nl/begroting-2023. Als de website volledig toegankelijk is is dit een goed alternatief voor de PDF en hoeft deze niet meer toegankelijk worden gemaakt.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 31: 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 met het toetsenbord navigeren. Zorg dat de cookiemelding als eerste weg te klikken is doordat deze als eerst focus krijgt op de pagina.

Op verschillende pagina's, bijvoorbeeld begroting.brabant.nl/begroting-2023/programma/financiering-treasury, staan links met de tekst 'Terug naar navigatie - '. Deze link worden alleen bij navigatie met behulp van de tabtoets zichtbaar, bijvoorbeeld de link 'Terug naar navigatie - Inleiding'. Deze link gaat naar de regel waar de link in staat en dient dus nergens toe. Elementen die wel focus krijgen maar geen functie hebben moeten worden vermeden. Laat deze links weg.
Dit soort links komen vaker voor in de website, bijvoorbeeld op pagina begroting.brabant.nl/bestuursrapportage-ii-2021/programma/programma-7-landbouw-en-voedsel staat de link 'Terug naar navigatie - Algemene voortgang van het programma'.

Bevinding 32: Wanneer bezoekers pagina begroting.brabant.nl/begroting-2023/zoeken bezoeken staat de toetsenbordfocus automatisch op het zoekveld. Bezoekers die het scherm niet kunnen zien missen de content dat boven het zoekveld staat, dit wordt namelijk niet voorgelezen voor voorleessoftware. Zorg ervoor dat de toetsenbordfocus niet midden op de pagina wordt geplaatst als bezoekers de pagina laden.

Bevinding 33: In het subnavigatiemenu aan de linkerkant van het scherm op pagina begroting.brabant.nl/bestuursrapportage-ii-2021/programma/programma-7-landbouw-en-voedsel staan links. De link 'Hebben we bereikt wat we wilden bereiken?' is uitklapbaar en wanneer uitgeklapt toont dit meerdere links. Wanneer de link 'Hebben we bereikt wat we wilden bereiken?' is ingeklapt is het mogelijk om met het toetsenbord focus te plaatsen op de visueel verborgen links. Dit is verwarrend voor ziende toetsenbordgebruikers, zij zien namelijk niet welke elementen focus hebben. Zorg ervoor dat focus alleen wordt geplaatst op elementen die visueel zichtbaar zijn.
Dit probleem komt ook voor op pagina begroting.brabant.nl/jaarstukken-2020/programma/programma-3-water-en-bodem.

Bevinding 34: Op elke pagina behalve de homepagina verschijnt er, bij een schermresolutie van 1280x1024px en ingezoomd tot 200%, een menuknop waarmee het hele menu geopend kan worden. Wanneer het menuvenster open staat, is de content op de achterliggende pagina nog steeds bereikbaar met het toetsenbord. Hierdoor kan je niet altijd meer zien waar je bent als je met het toetsenbord navigeert. Zorg dat de focus binnen het menuvenster blijft totdat deze gesloten is.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 35: Het logo van de Provincie Noord-Brabant op de homepage heeft de alternatieve tekst 'Logo'. Deze alternatieve tekst omschrijft het logo onvoldoende. Daarnaast werkt deze afbeelding ook als link. De toegankelijke naam van deze link is afgeleid van de alternatieve tekst van het img-element. De toegankelijke naam 'logo' omschrijft het doel van deze link onvoldoende. Pas daarom de alternatieve tekst van het logo aan, zorg ervoor dat het linkdoel duidelijk wordt. Zie ook succescriterium 1.1.1.

Bevinding 36: Advies: Op pagina begroting.brabant.nl/begroting-2023/Application/Contact staat onder 'Postbus' iets dat lijkt op een link naar www.brabant.nl/contact, de cursor verandert naar een handje, maar het is geen link. Dit is geen toegankelijkheids- maar een usability probleem.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 37: Als bij een schermresolutie 1280x1024px ingezoomd wordt tot 200% verschijnt er een menuknop waarmee het hele menu geopend kan worden op elke pagina, behalve de homepagina. Wanneer de menuknop of de sluitknop van het menu 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 38: Wanneer op pagina begroting.brabant.nl/begroting-2023/projecten de combobox 'Programma' focus heeft is dat niet zichtbaar. Hierdoor weten ziende toetsenbordgebruikers niet welk element focus heeft. Zorg ervoor dat focus altijd wordt aangegeven met een visuele indicator, bijvoorbeeld door een focusrand te gebruiken.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 39: Het logo van de Provincie Noord-Brabant bovenaan de homepage is een link. De toegankelijke naam van deze knop is 'logo'. Doordat het visuele label en de toegankelijke naam van deze knop niet overeenkomen, is de knop niet of moeilijk te bedienen door bezoekers die afhankelijk zijn van spraaksoftware. Zorg ervoor dat het visuele label van deze knop in de toegankelijke naam voorkomt, het liefst vooraan.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 40: Op de homepagina komen dubbele id's voor, namelijk de id 'portalDropdownMenuLink'. Dit kan problemen opleveren met hulpsoftware, vooral omdat de elementen met dit id ARIA tags gebruiken. Zorg dat id's unieke waarden hebben op een pagina. Hetzelfde komt op meerdere pagina's in de website voor, bijvoorbeeld op pagina egroting.brabant.nl/begroting-2023/projecten met de id 'content-area'.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 41: Op de pagina begroting.brabant.nl/bestuursrapportage-ii-2021/programma/programma-7-landbouw-en-voedsel hebben de lijstitems in het linker subnavigatiemenu het aria-attribuut aria-level="0". Het aria-level attribuut is voor elementen die de rol 'heading' hebben en kan alleen de waarden 1 t/m 6 hebben. Verkeerd gebruik van het aria attribuut kan problemen opleveren met hulpsoftware. Zorg voor de juiste WAI-ARIA code.
Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina begroting.brabant.nl/jaarstukken-2020/programma/programma-3-water-en-bodem bij de items in het linker subnavigatiemenu.
Er zijn meer problemen met aria codes in de website. Bijvoorbeeld op dezelfde pagina; aria-expanded kan niet gebruikt worden zonder aria-controls of aria-owns en arial-label kan niet gebruikt worden op een span zonder rol. Controleer de hele website op foutieve WAI-ARIA code.

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-05-19 10:53:54 v2.4-011