Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website projectenboek.lv.nl

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Leidschendam-Voorburg Projectenboek
Datum 24 november 2022
Scope van de website Binnen de scope van dit onderzoek vallen:
  • Alle pagina's op projectenboek.lv.nl.
  • Alle PDF's op projectenboek.lv.nl.
Buiten de scope van dit onderzoek vallen:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via projectenboek.lv.nl met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 45

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 pagina https://projectenboek.lv.nl/p13144/project-overzicht staan informatieve iconen in een tabel. De betekenis van deze iconen staat aangeven op pagina https://projectenboek.lv.nl/p12732/leeswijzer, waar naast de iconen een tekstalternatief te zien is. De iconen op pagina https://projectenboek.lv.nl/p13144/project-overzicht hebben geen tekst alternatief. Hierdoor is de betekenis van deze iconen niet beschikbaar voor bezoekers die het scherm niet kunnen zien. Zorg ervoor dat deze iconen de alternatieve tekst krijgen die op pagina https://projectenboek.lv.nl/p12732/leeswijzer staat.
Deze iconen zonder alternatieve tekst komen ook op andere pagina's voor, bijvoorbeeld op pagina https://projectenboek.lv.nl/p12762/sociale-woningbouw-de-star in de tabel onder de kop 'Planning'.

Bevinding 2: De informatieve iconen in de tabel op pagina https://projectenboek.lv.nl/p13144/project-overzicht zijn 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 3: Op pagina https://projectenboek.lv.nl/p12732/leeswijzer staat een informatieve afbeelding onder de kop 'Fasering in projecten'. De afbeelding bevat teksten die informatie overbrengen, maar de afbeelding heeft geen alternatieve tekst. Zorg ervoor dat de afbeelding een alternatieve tekst krijgt. In dit tekstalternatief moeten alle teksten op de afbeelding voorkomen. Dit kan bijvoorbeeld ook door de relaties in de afbeelding uit te leggen in een paragraaf op de pagina en daar naar te verwijzen in de alternatieve tekst.

Bevinding 4: Op pagina https://projectenboek.lv.nl/p15293/duurzaamheid staat onder de tekst 'Duurzaamheid' een afbeelding met de alternatieve tekst 'Afbeelding 1 behorende bij Duurzaamheid'. Deze alternatieve tekst omschrijft de afbeelding niet. Zorg ervoor dat de afbeelding een alternatieve tekst krijgt die omschrijft wat er op de afbeelding is te zien.

Bevinding 5: Op pagina https://projectenboek.lv.nl/bestaatniet staat een decoratieve afbeelding. Deze afbeelding heeft geen alternatieve tekst nodig, wel moet het img-element van de afbeelding een leeg alt-attribuut hebben. Zonder leeg alt-attribuut gaat hulpsoftware zelf opzoek naar een alternatieve tekst voor de afbeelding en gebruikt bijvoorbeeld de bestandsnaam. Geef het img-element daarom een leeg alt-attribuut.

Bevinding 6: Op pagina https://projectenboek.lv.nl/p12762/sociale-woningbouw-de-star staat een kaart. Voor (semi-)overheidsinstanties is het niet verplicht dat kaartmateriaal toegankelijk is. Wel moet de informatie op de kaart beschikbaar zijn op een toegankelijke manier. Zorg ervoor dat de locatie die op de kaart wordt aangegeven ook beschikbaar is voor bezoekers die het scherm niet kunnen zien, bijvoorbeeld door het adres als tekst op de pagina te plaatsen.
Dit probleem komt voor bij meerdere kaarten op de website, bijvoorbeeld bij de kaarten op https://projectenboek.lv.nl/p12708/kaart en https://projectenboek.lv.nl/p15785/sterk-voor-noord.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 7: Op pagina https://projectenboek.lv.nl/p12732/leeswijzer staan koppen die alleen zijn opgemaakt met het em-element, bijvoorbeeld de koppen 'Scope' en 'Legenda'. Het em-element is niet geschikt om koppen mee op te maken, het heeft namelijk een semantische waarde die niet gelijk is aan dat van een kop-element. Het em-element geeft nadruk aan woorden waarmee de betekenis van een zin kan worden aangegeven aan hulpsoftware. Los dit op door het em-element te verwijderen en de koppen met een kop-element op te maken.

Dit probleem komt ook voor op andere pagina:

Bevinding 8: Op pagina https://projectenboek.lv.nl/p12732/leeswijzer is een tabel gebruikt om de iconen en hun beschrijving onder 'Legenda' mee op te maken. De iconen (img-elementen) zijn geplaatst in table headers (th-elementen). Doordat de iconen geen alternatieve tekst hebben ziet hulpsoftware dat de table header leeg zijn. Een table header mag nooit leeg zijn, omdat dit wat zegt over (een) andere cel(len) in de tabel. Zorg ervoor dat de table header content bevat. Dit kan door de iconen een alternatieve tekst te geven, maar een alternatieve tekst op de iconen is niet per se nodig omdat in tekst de betekenis van de iconen is aangegeven. Een andere oplossing kan zijn om geen tabel te gebruiken om deze content mee op te maken.

Bevinding 9: Op pagina https://projectenboek.lv.nl/p12762/sociale-woningbouw-de-star staat onder de kop 'Planning' een tabel. In deze tabel is de kopcel 'Mijlpijlen' via id's en header attributen gekoppeld aan andere kopcellen, bijvoorbeeld de cellen 'Gepland' en 'Raadsbesluit'. Voor deze kopcellen is de cel 'Mijlpijlen' geen kop, daarom mogen deze cellen niet aan elkaar gekoppeld zijn.
Dit probleem komt ook voor bij andere tabellen op deze en andere pagina's, bijvoorbeeld op https://projectenboek.lv.nl/p15293/duurzaamheid en https://projectenboek.lv.nl/p12778/pleunis-locatie.

Bevinding 10: In het sub-navigatiemenu op pagina https://projectenboek.lv.nl/p12762/sociale-woningbouw-de-star wordt aangegeven bij welk onderdeel de bezoeker is doordat de achtergrond van dit onderdeel blauw is. Omdat deze informatie visueel wordt overgebracht, moet deze informatie ook beschikbaar zijn in de code voor hulpsoftware. Zorg ervoor dat het huidige onderdeel in het sub-navigatiemenu in de code wordt aangeven, bijvoorbeeld door aria-current op het huidige onderdeel te plaatsten.

Dit probleem komt voor op meerdere pagina's, bijvoorbeeld op;

Bevinding 11: Op pagina https://projectenboek.lv.nl/bestaatniet staat de tekst 'U heeft het adres verkeerd getyped of de pagina is mogelijk verplaatst.'. Deze tekst is opgemaakt met het h3-element, maar het is geen echte kop, enkel gewone platte tekst. Doordat de tekst is opgemaakt met een kop-element wordt deze meegenomen in koppenlijsten van screenreaders en is het te bereiken met de knopsneltoets. Alleen koppen mogen opgemaakt worden met een kop-element. Verwijder daarom het h3-element van tekst.

Bevinding 12: De PDF op pagina https://projectenboek.lv.nl/assets/docs/Bestedingsplan_6_april_2021.pdf is niet gecodeerd (van tags voorzien). Dit betekent dat de documentstructuur niet is te bepalen. Er kan daardoor, bijvoorbeeld niet worden bepaald wat koppen zijn, de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriterium 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.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 13: Op pagina https://projectenboek.lv.nl/p12732/leeswijzer staan onder 'Legenda kaart' locatie-iconen met verschillende kleuren. De kleur van het icoon zegt iets over de betekenis. Doordat deze betekenis alleen wordt overgebracht met kleur is de informatie niet beschikbaar voor bezoekers die slechtziend of kleurenblind zijn. Zorg ervoor dat de betekenis van de iconen ook op een manier wordt overgebracht die niet afhankelijk is van kleur, bijvoorbeeld door andere vormen te gebruiken.
Deze iconen komen ook voor op andere pagina's, bijvoorbeeld op https://projectenboek.lv.nl/p12708/kaart.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 14: Wanneer bezoekers met de muisaanwijzer over de items in het sub-navigatiemenu op pagina https://projectenboek.lv.nl/p12778/pleunis-locatie gaan, verandert de tekst- en achtergrondkleur van het item. Het contrast van de witte tekst op de beige achtergrond (HEX #CDA169) is te laag. De contrastverhouding is hier 2,3:1, waar dat minimaal 4,5:1 moet zijn.
Dit contrastprobleem komt voor op meerdere pagina's, bijvoorbeeld op pagina https://projectenboek.lv.nl/p12762/sociale-woningbouw-de-star en https://projectenboek.lv.nl/p12782/vliethaven.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Voldoende

Bevinding 15: Advies: Op pagina https://projectenboek.lv.nl/p12732/leeswijzer komt een afbeelding van tekst voor. De informatie in de afbeelding komt niet als platte tekst op de pagina voor. Tekst in een afbeelding kan niet worden aangepast door bezoekers die een eigen opmaak toepassen, bijvoorbeeld omdat zij slechtziend of kleurenblind zijn. Zij passen bijvoorbeeld de tekstafstand, grootte of het contrast aan. Omdat het aanpassen van de tekst (door bijvoorbeeld het in en uitzoomen) de betekenis kan veranderen, vallen infographics en dergelijke onder een uitzondering. Desalniettemin is het belangrijk om te zorgen dat deze doelgroep ook toegang heeft tot de informatie in de afbeelding, door de informatie als platte tekst toe te voegen op de pagina.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 16: Wanneer bij een schermbreedte van 1280 pixels wordt ingezoomd tot 400% op https://projectenboek.lv.nl/p13144/project-overzicht verdwijnt het broodkruimeldpad achter andere content. Hierdoor is deze functionaliteit niet beschikbaar voor bezoekers die de pagina ingezoomd moeten bekijken, bijvoorbeeld vanwege slecht zicht of dyslexie. Zorg ervoor dat content niet over elkaar komt te staan of dat geen functionaliteiten verdwijnen wanneer bezoekers inzoomen op de pagina.

Bevinding 17: Wanneer bij een schermbreedte van 1280 pixels wordt ingezoomd tot 400% op pagina https://projectenboek.lv.nl/p13144/project-overzicht, valt content in de tabel buiten de schermweergave. Het gaat hier bijvoorbeeld op de pijltjes die werken als links in de tabel. Ook komen teksten over elkaar te staan. Bij tabellen (en video's en kaarten) mag een horizontale scrolbalk aanwezig zijn zodat deze content goed kan worden getoond bij zoomen, bij andere content niet. Zorg ervoor dat de content in de tabel goed wordt weergeven wanneer bezoekers inzoomen, bijvoorbeeld door een horizontale scrollbalk toe te voegen.

Bevinding 18: Wanneer bij een schermbreedte van 1280 pixels wordt ingezoomd tot 133% op pagina https://projectenboek.lv.nl/p12762/sociale-woningbouw-de-star, valt de link 'Volgende Snippergroep' achter het sub-navigatiemenu. Hierdoor is deze link niet meer zichtbaar. Zorg ervoor dat content niet over elkaar komt te staan wanneer bezoekers inzoomen 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 19: Het contrast van het gele icoon 'Aandachtspunt' (HEX #FFCF00) op pagina https://projectenboek.lv.nl/p12732/leeswijzer is te laag. De contrastverhouding op de witte achtergrond is 1,4:1, waar dat minimaal 3:1 moet zijn.
Dit icoon komt ook voor op andere pagina's, bijvoorbeeld op https://projectenboek.lv.nl/p13144/project-overzicht.

Bevinding 20: Het contrast van het icoon 'Volgens verwachting' op pagina https://projectenboek.lv.nl/p12732/leeswijzer is te laag. Het groene vinkje (HEX #1DB954) heeft een contrastverhouding van 2,2:1 op de lichtgroene achtergrond (HEX #DFF5E7), dit moet minimaal 3:1 zijn.
Dit icoon komt ook voor op andere pagina's, bijvoorbeeld op https://projectenboek.lv.nl/p13144/project-overzicht/.

Bevinding 21: Het contrast van het icoon 'Aandachtspunt' op pagina https://projectenboek.lv.nl/p12732/leeswijzer is te laag. Het oranje uitroepteken (HEX #F5790E) heeft een contrastverhouding van 2,3:1 op de lichtoranje achtergrond (HEX #FEECDD), dit moet minimaal 3:1 zijn.
Dit icoon komt ook voor op andere pagina's, bijvoorbeeld op https://projectenboek.lv.nl/p13144/project-overzicht.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Onvoldoende

Bevinding 22: Wanneer bezoekers met de muisaanwijzer over de menu-items op elke pagina gaan, verschijnt extra content. Het is niet mogelijk om deze content te verwijderen zonder de muisaanwijzer te verplaatsen. Er moet een mechanisme aanwezig zijn waarmee bezoekers aanvullende content kunnen verwijderen zonder de muisaanwijzer te bewegen, bijvoorbeeld door de escape-toets te gebruiken.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 23: Wanneer bezoekers gebruikmaken van hulpsoftware, bijvoorbeeld NVDA, is het niet mogelijk om de menu-items op elke pagina, bijvoorbeeld op https://projectenboek.lv.nl/, uit te klappen. Hierdoor zijn de onderliggende menu-items niet bereikbaar voor deze bezoekers.
De reden dat dit gebeurt hebben we niet precies kunnen achterhalen. Wat we wel zien is dat er veel aria-attributen zijn gebruikt die niet nodig zijn. Dit navigatiemenu is onder andere opgemaakt met een ul-element waar role="menubar" op staat. Met role="menubar" wordt een navigatiebalk voor een webapplicatie gecreëerd, en geen navigatie voor een webpagina. Het gebruik van deze en andere aria-attributen kan hulpsoftware in de weg zitten, zie succescriterium 1.3.1. Los dit probleem op door overbodige aria-attributen te verwijderen; de code met het nav-element en de ul/li-elementen is voldoende om de navigatie op toegankelijke wijze aan te bieden.

Bevinding 24: Wanneer de zoekknop op pagina https://projectenboek.lv.nl/ wordt geactiveerd verschijnt een venster over de pagina. Wanneer toetsenbordgebruikers een zoekterm invullen in het zoekveld en zoekresultaten verschijnen, is het niet mogelijk om deze resultaten te bereiken met het toetsenbord. De focus wordt namelijk niet op de resultaten geplaatst, terwijl dit links zijn die je met de muisaanwijzer kan aanklikken. Zorg dat het voor toetsenbordgebruikers ook mogelijk is om de zoekresultaten te bereiken en bedienen.

Bevinding 25: Op pagina https://projectenboek.lv.nl/p12778/pleunis-locatie staat onder 'Pleunis-locatie' een carrousel met daarin knoppen waarmee bezoekers een andere afbeelding kunnen tonen. Deze knoppen zijn niet te bereiken en bedienen met het toetsenbord. Mogelijk komt dit doordat de knoppen a-elementen zonder href-attributen zijn. Zorg ervoor dat toetsenbordgebruikers alle interactieve elementen op de website kunnen bereiken en bedienen.
Dit probleem komt voor op meerdere pagina’s, bijvoorbeeld op https://projectenboek.lv.nl/p12782/vliethaven.

Bevinding 26: Als bezoekers op pagina https://projectenboek.lv.nl/ inzoomen tot 200% verdwijnt de zoekknop en functionaliteit waarmee naar de vorige en volgende kan worden genavigeerd, achter een knop. Deze knop is niet te bedienen door bezoekers die afhankelijk zijn van het toetsenbord voor navigatie. Zorg ervoor dat deze knop bedienbaar is met het toetsenbord.
Opmerking: Op een ander device was de knop ook niet bereikbaar met de muis, waardoor de knop voor alle bezoekers die inzoomen niet meer toegankelijk is.

Bevinding 27: Wanneer bezoekers op pagina https://projectenboek.lv.nl/p12732/leeswijzer inzoomen tot 200% verdwijnt het sub-navigatiemenu achter een knop. Deze knop is niet te bereiken met het toetsenbord. Zorg ervoor dat toetsenbordgebruikers deze knop ook kunnen bereiken en bedienen.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 28: Op de website is een skiplink aanwezig waarmee bezoekers herhalende blokken content kunnen overslaan. Deze skiplink verplaatst de visuele weergave van de pagina naar beneden, maar verplaatst niet de toetsenbordfocus. Doordat de skiplink niet werkt moeten toetsenbordgebruikers alsnog over de herhalende content op elke pagina navigeren. Zorg er daarom voor dat de skiplink ook de toetsenbordfocus naar de hoofdinhoud verplaatst.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 29: De PDF op pagina https://projectenboek.lv.nl/assets/docs/Bestedingsplan_6_april_2021.pdf heeft geen documenttitel in de bestandeigenschappen staan. Het is belangrijk dat het bestand een goed omschrijvende titel krijgt, dit lezen screenreaders namelijk voor aan gebruikers. Zorg er ook voor dat de documenttitel en niet de bestandsnaam wordt getoond bij het openen van het bestand.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 30: Wanneer bezoekers de zoekfunctie in de header van de pagina (zoals https://projectenboek.lv.nl/) openen, gaat de toetsenbordfocus eerst verder op de achterliggende pagina, vervolgens verplaatst de focus naar de adresbalk en daarna komt de focus pas in het nieuw verschenen dialoogvenster. Zorg ervoor dat de toetsenbordfocus direct in het venster komt en dat bezoekers het venster zelf moeten sluiten met de sluit-knop voor zij verder kunnen navigeren op de pagina.

Bevinding 31: Wanneer de zoekknop op pagina https://projectenboek.lv.nl/ wordt geactiveerd verschijnt een venster over de pagina. In dit venster is het voor toetsenbordgebruikers mogelijk om focus te plaatsen op inactieve elementen, bijvoorbeeld de kop 'Zoeken'. Dat komt door er tabindex="0" op het div-element waar deze tekst in staat is geplaatst.

Het is verwarrend voor toetsenbordgebruikers wanneer zij met de tab-toetst de toetsenbordfocus kunnen plaatsen op elementen die niet te bedienen zijn. Het moet namelijk alleen mogelijk zijn om de toetsenbordfocus te plaatsen op interactieve elementen. Zorg er daarom voor dat inactieve elementen geen toetsenbordfocus kunnen krijgen.

Dit probleem komt vaker voor op de website, het is bijvoorbeeld mogelijk op focus te plaatsen op de kop 'Projectenboek 2021' op dezelfde pagina. Andere pagina's waarop dit probleem voorkomt zijn bijvoorbeeld:

Bevinding 32: Als op pagina https://projectenboek.lv.nl/ wordt ingezoomd tot 200% verdwijnt het navigatiemenu achter een knop. Wanneer toetsenbordgebruikers dit menu openen, gaat de toetsenbordfocus na het laatste menu-item verder op de achterliggende pagina. Hierbij blijft het menu voor de pagina staan en kunnen ziende toetsenbordgebruikers niet zien waar de toetsenbordfocus zich bevindt. Wanneer een menu is uitgeklapt moet de toetsenbordfocus in dit menu blijven tot de bezoeker het afsluit, de focus mag niet verder gaan op de pagina achter het uitgeklapte menu. Zorg er daarom voor dat de toetsenbordfocus in het menu blijft tot de bezoeker het afsluit, of laat het menu automatisch inklappen als bezoekers de focus van het laatste menu-item halen.

Bevinding 33: Opmerking: In de kaart op pagina https://projectenboek.lv.nl/p12708/kaart is het mogelijk om de toetsenbordfocus op de locatie-iconen te plaatsen. Met deze iconen kan aanvullende content worden uitgeklapt, hierin staat tekst en een sluitknop. Wanneer bezoekers één icoon uitklappen en die aanvullende content zichtbaar is, gaat de toetsenbordfocus eerst over alle andere iconen voordat deze wordt geplaatst op de sluitknop in de aanvullende content. Dit is geen logische focus volgorde. Zorg ervoor dat bezoekers eerst de aanvullende content kunnen afsluiten voor dat focus wordt geplaatst op de andere locatie-iconen.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 34: Op pagina https://projectenboek.lv.nl/p15293/duurzaamheid staat onder de kop 'Programma inhoud' een aantal links. Tussen de links die visueel zichtbaar zijn, zijn in de code a-elementen geplaatst die geen linktekst hebben, hierdoor hebben de links ook geen toegankelijke naam (zie ook succescriterium 4.1.2). Wanneer links geen toegankelijke naam/linktekst hebben zijn deze niet te bedienen door gebruikers van hulpsoftware. De links zonder linktekst verwijzen naar dezelfde pagina als de links die wel visueel zichtbaar zijn, daarom zijn deze links overbodig. Een oplossing zou zijn om de links zonder linktekst te verwijderen van de pagina.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 35: Als bezoekers op pagina https://projectenboek.lv.nl/p12732/leeswijzer inzoomen tot 200% verdwijnt het sub-navigatiemenu achter een knop. Deze knop heeft het visuele label 'Leeswijzer', dit omschrijft niet wat de knop doet. Zorg ervoor dat label altijd omschrijven dat een element doet. Bij deze knop kan het label bijvoorbeeld 'Subnavigatie' zijn.
Dit probleem komt ook voor op andere pagina's, bijvoorbeeld op https://projectenboek.lv.nl/p12762/sociale-woningbouw-de-star waar dezelfde knop het label 'Geen selectie' krijgt.

Bevinding 36: Advies: Wanneer bezoekers inzoomen verandert het navigatiemenu bovenaan iedere pagina in een hamburgermenu. De toegankelijke naam om het menu te openen is 'Toon snelle navigatie'. Bezoekers die spraakgestuurde navigatie gebruiken hebben mogelijk moeite met het openen van dit menu, omdat in navigatiemenu's normaliter het woord 'menu' in de toegankelijke naam voorkomt. Overweeg om de toegankelijke naam aan te passen.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 37: Op pagina https://projectenboek.lv.nl/p15293/duurzaamheid staan links onder de kop 'Programma inhoud'. Tussen deze links staan in de code a-elementen die geen visuele linktekst hebben. Het is wel mogelijk om de toetsenbordfocus op deze verbogen links te plaatsen, maar dat is niet zichtbaar. Dit kan verwarrend zijn voor ziende toetsenbordgebruikers, zij weten namelijk niet wel element focus heeft als de focusindicator niet zichtbaar is. De links zonder linktekst zijn overigens overbodig omdat links die wel zichtbaar zijn naar dezelfde pagina's verwijzen. Een mogelijke oplossing voor dit probleem is dan ook om de a-elementen zonder visuele linktekst uit de code te verwijderen.

2.5 Input modaliteiten

2.5.1 Aanwijzergebaren (Niveau A)

Informatie over succescriterium 2.5.1 Aanwijzergebaren

Uitkomst: Voldoende

Bevinding 38: Opmerking: In de kaart op pagina https://projectenboek.lv.nl/p12762/sociale-woningbouw-de-star is het alleen mogelijk om in en uit te zoomen met de muisaanwijzer (op computers) of door twee vingers bij elkaar of uit elkaar te brengen op het scherm (bij mobiele apparaten). Hierdoor is het voor verschillende bezoekers niet mogelijk om in en uit te zoomen op de kaart, bijvoorbeeld voor toetsenbordgebruikers. Het is voor (semi-)overheidsinstanties niet verplicht dat kaartmateriaal toegankelijk is. Echter, het is mogelijk om de kaart toegankelijk te maken voor alle bezoekers. Bijvoorbeeld door knoppen toe te voegen waarmee bezoekers in en uit kunnen zoomen.

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 39: Wanneer de zoekknop op pagina https://projectenboek.lv.nl/ wordt geactiveerd verschijnt een venster over de pagina. In dit venster staat een invoerveld dat de toegankelijke naam 'Zoekterm' heeft, terwijl het visuele label 'Zoeken' is. Doordat het visuele label en de toegankelijke naam van het invoerveld niet overeenkomen kan het voor gebruikers van spraakbediening lastig zijn het veld te gebruiken. Zorg er daarom voor dat het visuele label van het veld voorkomt in de toegankelijke naam, het liefst vooraan.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 40: In de eigenschappen van PDF op pagina https://projectenboek.lv.nl/assets/docs/Bestedingsplan_6_april_2021.pdf is de taal niet goed ingevuld. Deze staat op Engels in plaats van Nederlands. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.

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 41: Op pagina https://projectenboek.lv.nl/ is het attribuut role="presentation" gebruikt op een div-element waar content in staat, onder andere de link 'Onderdeel Programma's'. Door het gebruik van dit attribuut kan deze content verborgen zijn voor hulpsoftware, role="presentation" geeft namelijk aan dat content decoratief is. Los dit probleem op door het attribuut te verwijderen.

Bevinding 42: Op pagina https://projectenboek.lv.nl/ staan blokken content, bijvoorbeeld de link 'Onderdeel Programma's'. Deze blokken zijn opgemaakt in een ul-element dat het attribuut role="menu" heeft, alle li-elementen binnen het ul-element hebben role="menuitem" gekregen. Dit is geen correct gebruik van aria-attributen omdat het hier niet gaat om een menu maar om een groep links. Het gebruik van aria op deze content kan erg verwarrend zijn voor gebruikers van hulpsoftware, zij kunnen denken dat hier nog een navigatiemenu op de pagina staat terwijl dat niet het geval is. Los dit op door de aria-attributen van deze content te verwijderen.

Bevinding 43: Op pagina https://projectenboek.lv.nl/ zijn zowel het hoofdnavigatiemenu en het broodkruimelpad opgemaakt met role="menubar" en de daar bijbehorende attributen. De waarde 'Menubar' is niet geschikt om een navigatiemenu van een website mee op te maken, hiermee creëer je namelijk een navigatiebalk voor een webapplicatie. Dit houdt in dat de navigatiebalk zich anders gedraagt dan een navigatiemenu op een website, een voorbeeld is dat hulpsoftware (zoals screenreaders) andere toetsen instellen om de navigatiebalk te bedienen. Hierdoor kan hulpsoftware mogelijk niet goed omgaan met navigatiebalk. Los dit probleem op door de aria-attributen op het navigatiemenu te verwijderen en gebruik zoveel mogelijk native HTML om de navigatie mee op te maken; een code met het nav-element en ul/li-elementen is voldoende om een navigatie op een toegankelijke manier aan te bieden.

Bevinding 44: Op pagina https://projectenboek.lv.nl/p15293/duurzaamheid komen links voor zonder toegankelijke naam. Wanneer een element geen toegankelijke naam heeft is het niet of moeilijk te bedienen voor mensen die gebruikmaken van hulpsoftware. Omdat de links zonder toegankelijke overbodig zijn, zie succescriterium 2.4.4, is een oplossing om deze links te verwijderen.

Bevinding 45: Als op pagina https://projectenboek.lv.nl/ wordt ingezoomd tot 200% verdwijnt het navigatiemenu achter een knop. Visueel is duidelijk wanneer dit menu in- of uitgeklapt is, maar deze informatie is niet beschikbaar voor mensen die het scherm niet kunnen zien. Zorg ervoor dat de status van deze knop ook in de code aanwezig is, bijvoorbeeld door gebruik te maken van aria-expanded of een soortgelijke techniek.

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-24 07:09:01 v2.4-011