Placeholder-tekst heeft te weinig contrast

Op verschillende pagina’s van de website, bijvoorbeeld op pagina https://zuid-holland.maps.arcgis.com/home/index.html, staat in de header een zoekknop. Wanneer daarop wordt geklikt, verschijnt een invoerveld voor zoeken waarvan de placeholdertekst een onvoldoende contrastratio heeft. De grijze (#BABEC7) placeholdertekst op de witte achtergrond heeft een contrastratio van 1,9:1, wat lager is dan de vereiste 4,5:1 voor standaardtekst.

Oplossing:

Vergroot het contrast tussen de placeholdertekst en de achtergrondkleur, zodat het minimaal 4,5:1 is.

Volgorde toetsenbordfocus is niet logisch

Op verschillende pagina’s van de website, bijvoorbeeld op pagina https://zuid-holland.maps.arcgis.com/home/index.html, opent de zoekknop in de header een lightbox. Het toetsenbordfocus kan uit deze lightbox ontsnappen en verschuiven naar de onderliggende pagina. Dit is niet correct. Het toetsenbordfocus moet goed worden ingesteld: wanneer het venster is geopend, moet de focus binnen dit venster blijven om te voorkomen dat per ongeluk interactie plaatsvindt met de onderliggende pagina.

Oplossing:

Dit kan worden bereikt door:

1. Het toetsenbordfocus binnen het venster te houden totdat de bezoeker deze handmatig sluit (via de “x”-knop).
2. De lightbox automatisch te sluiten zodra het toetsenbordfocus deze verlaat.

Relatie tussen links in een groep is niet in HTML vastgelegd

In de footer van de meeste pagina’s staat een groep links die visueel als één groep wordt weergegeven, maar deze groepering is niet terug te zien in de HTML-structuur. Dit betreft onder andere de links “Trust Center”, “Contact opnemen met Esri”, “Misbruik melden” en andere.

Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn.

Oplossing:

Neem de elementen op in een ul- of nav-element.

Naam van de knop beschrijft niet wat de knop doet

Wanneer de website op een klein scherm wordt bekeken, verschijnt in de header een knop met drie lijnen. Deze knop opent en sluit het mobiele menu, maar de toegankelijke naam is “ArcGIS”, wat de functie van de knop niet juist beschrijft.

Een blinde bezoeker weet daardoor niet wat deze knop precies doet.

Oplossing:

Voeg tekst toe die deze knop goed beschrijft.

Mobiel menu werkt niet goed met toetsenbordfocus

Wanneer de website op een klein scherm wordt bekeken, verschijnt in de header een menuknop die het mobiele menu opent. Op dit moment kunnen bezoekers met het toetsenbord uit het mobiele menu navigeren. Het toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het menu open blijft staan.

Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.

Een vergelijkbaar probleem doet zich voor bij het menu “Filters” op pagina’s https://zuid-holland.maps.arcgis.com/home/gallery.html?sortField=numviews&sortOrder=desc en https://zuid-holland.maps.arcgis.com/home/search.html?restrict=true&sortField=relevance&sortOrder=desc&searchTerm=werk#content, dat verschijnt wanneer de pagina op een klein scherm wordt bekeken.

Oplossing:

Zorg ervoor dat de focus in het menu blijft totdat de bezoeker dit sluit door op de sluitknop te klikken of de ESC-toets in te drukken. Je kunt het menu ook automatisch sluiten als de focus het menu verlaat.

Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen

Wanneer pagina’s met een zoekfunctie in de header worden bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, raakt de placeholder tekst gedeeltelijk uit beeld, evenals langere opties in de suggestielijst.

Een vergelijkbaar probleem doet zich voor bij de plaatshouder van het zoekveld op pagina https://zuid-holland.maps.arcgis.com/apps/mapviewer/index.html.

Oplossing:

Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Link naar pagina: https://zuid-holland.maps.arcgis.com/home/index.html

Het logo bevat tekst die afwijkt van de alternatieve tekst

Het logo bovenaan deze pagina toont de tekst “Provincie Zuid-Holland”, maar de alternatieve tekst (alt) is “Logo startpagina”. De alternatieve tekst moet alle zichtbare tekst in het logo bevatten, zodat bezoekers die de afbeelding niet kunnen zien dezelfde informatie ontvangen. Als het logo geen link is, voeg dan ook het woord ‘Logo’ toe aan de alternatieve tekst.

Oplossing:

Werk de alternatieve tekst bij zodat de zichtbare tekst is opgenomen: “Logo Provincie Zuid-Holland”.

Skiplink werkt niet correct: focus verplaatst niet naar de juiste plek

Deze pagina heeft een skiplink, maar deze werkt niet correct. De focus wordt niet naar de bedoelde bestemming (unieke content) verplaatst.

Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Je gebruikt hier een skiplink voor. Daarmee kun je vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij toetsenbordfocus krijgt.

Oplossing:

Zorg dat de skiplink:

• de toetsenbordfocus bij activatie verplaatst naar de unieke content;
• standaard visueel verborgen is, maar zichtbaar wordt bij toetsenbordfocus.

Kop is niet gemarkeerd als koptekst

Op deze pagina zijn de volgende teksten niet als kop gemarkeerd: “Geo-hub Zuid-Holland”, “R-net Lijnverbindingen Viewer”, “NatuurNetwerk Nederland - Zuid-Holland” en andere.

Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.

Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kunt testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Een vergelijkbaar probleem doet zich voor op pagina https://zuid-holland.maps.arcgis.com/home/gallery.html in een dialoogvenster dat wordt geopend vanuit een kaart (bijvoorbeeld door te klikken op de kaart “Geo-hub Zuid-Holland” – knop “Overzicht” – knop “Provincie Zuid-Holland” – dialoogvenster “Provincie Zuid-Holland” – kop “Provincie Zuid-Holland”), op pagina https://zuid-holland.maps.arcgis.com/home/search.html?restrict=true&sortField=relevance&sortOrder=desc&searchTerm=werk#content bij alle koppen in de sectie “Beschrijving” van een dialoogvenster dat wordt geopend vanuit een kaart, en op andere pagina’s.

Oplossing:

Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast. Controleer de koppen in alle dialoogvensters op de website.

Link naar pagina: https://zuid-holland.maps.arcgis.com/home/gallery.html

Taalwisseling ontbreekt op anderstalige content

Op deze pagina worden bij alle opties in de “Filters”, in de sectie “Itemtype”, Engelse teksten gebruikt zonder taalcode, terwijl de hoofdtaal van de pagina Nederlands is. Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”.

De schermlezer zou naar het Engels moeten overschakelen. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.

Hetzelfde probleem doet zich voor bij de titel van de pagina, die ook in het Engels is: “Gallery”.

Oplossing:

Voeg een lang-attribuut met de juiste taalcode toe aan het html-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element. Of vertaal deze filteropties en de titel van de pagina naar het Nederlands.

Melding over aangepaste zoekresultaten wordt niet automatisch voorgelezen door schermlezers

Op deze pagina passen de filters de zoekresultaten aan en verschijnt er een melding zoals “1-39, totaal: 39” zonder dat de pagina opnieuw wordt geladen. Deze melding, die een statusbericht is, wordt echter niet als dusdanig door schermlezers aangekondigd. Dat is wel de bedoeling. Deze melding is namelijk een statusbericht.

Zie ook https://zuid-holland.maps.arcgis.com/home/search.html?restrict=false&sortField=relevance&sortOrder=desc&searchTerm=werk#content met een vergelijkbare melding bovenaan de pagina, bijvoorbeeld “1-60, totaal: 2.856”.

Oplossing:

Statusberichten moeten automatisch voorgelezen worden door schermlezers, maar de code die dit mogelijk maakt is nog niet toegevoegd. Je lost dit op door aria-live-attribute aan de melding toe te voegen.

Knop heeft geen toegankelijke naam

Op deze pagina worden blokjes met resultaten weergegeven. Elk blokje heeft een knop met drie punten. Deze knoppen hebben geen toegankelijke namen. Ze bevatten wel aria-label-attributen, maar deze zijn leeg.

Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de functies van de knoppen zijn.

Hetzelfde probleem doet zich op deze pagina voor bij de knoppen “Kopiëren” naast de invoervelden “ID” en “URL” in de dialoogvensters die vanuit elke kaart worden geopend, bij de knop “Sorteren” die verschijnt wanneer de pagina op een klein scherm wordt bekeken. Het probleem komt ook voor op veel andere pagina’s, bijvoorbeeld op pagina https://zuid-holland.maps.arcgis.com/home/search.html?restrict=true&sortField=relevance&sortOrder=desc&searchTerm=werk#content met de driepuntknoppen en op andere pagina’s met vergelijkbare knoppen.

Oplossing:

Voorzie deze knoppen van een toegankelijke naam door voor elk aria-label-attribuut een unieke en beschrijvende waarde te gebruiken of door andere passende technieken toe te passen.

Knoppen met dezelfde tekst hebben een andere functie

Op deze pagina is elk blokje gecodeerd als een section-element met role="button". Deze knoppen hebben allemaal dezelfde toegankelijke naam “Voorbeeld”, maar openen verschillende dialoogvensters. Dit kan verwarrend zijn voor bezoekers met een schermlezer. Het is niet duidelijk welke actie elke knop uitvoert.

Hetzelfde probleem doet zich voor bij vergelijkbare knoppen in de kaarten op pagina’s https://zuid-holland.maps.arcgis.com/home/search.html?restrict=false&sortField=relevance&sortOrder=desc&searchTerm=werk#content, https://zuid-holland.maps.arcgis.com/home/user.html?user=PZH_publisher.

Oplossing:

Zorg dat de tekst past bij de functie van de knop, zodat knoppen met verschillende functies ook verschillende knopteksten hebben.

Er zijn links met dezelfde tekst maar een andere bestemming

Onder elk blokje op deze pagina staan links met dezelfde namen die naar verschillende bestemmingen leiden: “Openen in Map Viewer”, “Weergeven”, “Locatie weergeven”. Er zijn dus meerdere links aanwezig op de pagina met dezelfde tekst, maar een verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers.

Hetzelfde probleem doet zich voor bij vergelijkbare links in de kaarten op pagina’s https://zuid-holland.maps.arcgis.com/home/search.html?restrict=false&sortField=relevance&sortOrder=desc&searchTerm=werk#content, https://zuid-holland.maps.arcgis.com/home/user.html?user=PZH_publisher.

Oplossing:

De beste oplossing is het verwijderen van role=”button” van het <section> element en het toevoegen van een aria-label die de tekst van het <h3> element herhaalt. Op deze manier creëer je een regio binnen elk blokje en wordt het een stuk duidelijker bij welk onderwerp deze links horen.

Accordeon heeft geen koppen

De blokjes op deze pagina werken als knoppen en openen ee zijpaneel. In elk dialoogvenster staan meerdere secties met verborgen inhoud: “Thumbnail”, “Overzicht”, “Beschrijving” en andere. De elementen die de verborgen inhoud openen en sluiten zijn niet als kop gemarkeerd. De teksten waarmee je delen van een accordeon kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3.

Een vergelijkbaar probleem doet zich voor op pagina https://zuid-holland.maps.arcgis.com/home/search.html?restrict=true&sortField=relevance&sortOrder=desc&searchTerm=werk#content in vergelijkbare dialoogvensters, op pagina https://zuid-holland.maps.arcgis.com/home/item.html?id=ad83a58fba2147578ea5003cc322b811 met de teksten “Beschrijving”, “Gebruiksvoorwaarden”, “Opmerkingen” en op andere pagina’s.

Oplossing:

Markeer deze teksten als kop of zorg dat de bestaande rol van kop niet wordt overschreven. Meer informatie over dit element staat op deze pagina: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.

Tooltip wordt niet getoond bij toetsenbordfocus

Op deze pagina wordt na het klikken op een kaart een zijpaneel geopend. In het dialoogvenster verschijnt, wanneer een bezoeker met de muis over de tekst “OAuth 2.0-verificatie – standaard” beweegt, een tooltip met extra informatie – “Verleent toegang tot services”. Dit gebeurt echter niet wanneer het element toetsenbordfocus krijgt.

Hierdoor kunnen bezoekers die alleen met het toetsenbord navigeren de tooltip niet zien. De informatie in de tooltip is voor hen dus niet toegankelijk.

Hetzelfde probleem doet zich voor in de kaarten op pagina https://zuid-holland.maps.arcgis.com/home/search.html?restrict=false&sortField=relevance&sortOrder=desc&searchTerm=werk#content wanneer de schakelknop “Alleen zoeken in ArcGIS Online provincie Zuid-Holland” is uitgeschakeld, bij badges zoals “Gezaghebbend”, “Levende Atlas”, “OAuth 2.0-verificatie - standaard”.

Oplossing:

Zorg dat de tooltips ook openen als ze toetsenbordfocus krijgen.

Statusbericht wordt niet aangekondigd door schermlezers

Op deze pagina wordt na het klikken op een kaart een zijpaneel geopend. In het accordion “Details” onder de koppen “ID” en “URL” staan knoppen “Kopiëren”. Wanneer op een van deze knoppen wordt geklikt, verschijnt een bericht “gekopieerd”. Schermlezers kondigen dit bericht echter niet aan voor blinde bezoekers. Om ervoor te zorgen dat schermlezers het bericht aankondigen, moet het attribuut aria-live="polite" worden toegevoegd aan het element dat het bericht bevat. Hierdoor zal de schermlezer het bericht automatisch voorlezen zodra het verschijnt.

Hetzelfde probleem doet zich voor op pagina https://zuid-holland.maps.arcgis.com/home/search.html?restrict=true&sortField=relevance&sortOrder=desc&searchTerm=werk#content met vergelijkbare knoppen in de sectie “Details” van een dialoogvenster dat vanuit een kaart wordt geopend, op pagina https://zuid-holland.maps.arcgis.com/home/item.html?id=ad83a58fba2147578ea5003cc322b811 met vergelijkbare knoppen in de sectie “Details” en op andere vergelijkbare pagina’s.

Inzoomen tot 400% resulteert in gedeeltelijk verlies van inhoud en functionaliteit

Op deze pagina wordt na het klikken op een kaart een zijpaneel geopend. Wanneer deze pagina wordt bekeken met een schermresolutie van 1280x1024 pixels en een zoomniveau van 400%, is de ruimte tussen de vaste header en footer van het dialoogvenster te klein om de inhoud comfortabel te lezen. Bezoekers moeten voortdurend scrollen om alle regels tekst te kunnen zien, wat verwarring veroorzaakt en de gebruikservaring verslechtert.

Hetzelfde probleem doet zich voor op pagina https://zuid-holland.maps.arcgis.com/home/search.html?restrict=true&sortField=relevance&sortOrder=desc&searchTerm=werk#content wanneer wordt ingezoomd tot 400%.

Oplossing:

Zorg dat bij inzoomen de vaste header en footer kleiner worden of zich dynamisch aanpassen, zodat er voldoende ruimte overblijft voor de inhoud. Dit helpt om de leesbaarheid en bruikbaarheid te behouden voor bezoekers die een hoog zoomniveau gebruiken.

Link naar pagina: https://zuid-holland.maps.arcgis.com/apps/mapviewer/index.html

Deze pagina bevat een groot aantal toegankelijkheid issues. Deze issues zijn niet beschreven in dit rapport omdat kaarten en kaartapplicaties uitgezonderd zijn.

Toetsenbordfocus gaat buiten het menu terwijl het menu open blijft staan

Op deze pagina staat in de header een menuknop die de menuopties weergeeft. Op dit moment kunnen bezoekers met het toetsenbord uit het geopende menu navigeren. Het toetsenbordfocus verschuift dan naar de onderliggende pagina terwijl het menu open blijft staan.

Oplossing:

Bij dit soort menu’s moet je de toetsenbordfocus goed instellen. Als het menu actief is, moet de focus binnen het menu blijven, en mag deze niet op de onderliggende pagina terechtkomen.

Dit kun je op een van de volgende manieren oplossen:

1. Hou de focus binnen het menu totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
2. Sluit het menu automatisch op het moment dat de toetsenbordfocus eruit gaat.

Op deze pagina staat een instructie om zelf focusvolgorde te testen: https://properaccess.nl/hoe-test-ik-focusvolgorde/.

Er is geen skiplink aanwezig

Deze pagina mist een skiplink.

Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Je gebruikt hier een skiplink voor. Daarmee kun je vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt.

Oplossing:

Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

Zorg dat de skiplink:

• de eerste link op de pagina is;
• visueel verborgen is, maar zichtbaar wordt bij toetsenbordfocus;
• naar de hoofdcontent van de pagina springt als de bezoeker de link activeert.

Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt het toetsenbordfocus terecht op een onzichtbaar interactief element na de menuknop.

De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Oplossing:

Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

Knop heeft geen toegankelijke naam

Op deze pagina staat naast de knop “Aanmelden” een onzichtbare knop zonder toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de knop.

Oplossing:

Verwijder het onnodige button-element of voeg een beschrijvende tekst of pictogram toe.

Toegankelijke naam van de application ontbreekt

Deze pagina bevat een div-element met role="application" dat geen toegankelijke naam heeft. Daardoor kunnen schermlezers het doel of de functie van dit element niet identificeren.

Hetzelfde probleem doet zich voor op pagina https://zuid-holland.maps.arcgis.com/home/webscene/viewer.html.

Oplossing:

Voorzie een duidelijke toegankelijke naam met aria-label of aria-labelledby (bijv. aria-label="Map viewer"). Dit helpt bezoekers te begrijpen welk type interactieve omgeving zij betreden.

Op deze pagina staat een instructie hoe je dit element toegankelijker kunt maken: https://properaccess.nl/hoe-geef-ik-een-applicatie-accessible-name/

Dialoogvenster heeft geen toegankelijke naam

Op deze pagina opent een knop “+” een menu. Wanneer “Laag vanuit URL toevoegen” wordt geselecteerd, verschijnt een dialoogvenster met de kop “Kaartlaag toevoegen”. Dit dialoogvenster heeft geen toegankelijke naam.

Hulpsoftware kan hierdoor niet doorgeven welke inhoud het dialoogvenster heeft.

Hetzelfde probleem doet zich voor bij vergelijkbare dialoogvensters die worden geopend via andere knoppen, bijvoorbeeld de knop met het lagenicoon (“Kaartlagen”) – “Toevoegen” – “Laag vanuit URL toevoegen”, de knop met het tabelicoon (“Tabellen”) – “Toevoegen” – “Toevoegen uit URL” en andere.

Oplossing:

Voeg een aria-label aan het dialoogvenster toe met een duidelijke beschrijving van de inhoud.

Zichtbare tekst van het zoekveld staat niet in de toegankelijke naam

Op deze pagina opent een knop “+” een menu. Wanneer “Laag vanuit URL toevoegen” wordt geselecteerd, verschijnt een dialoogvenster met de kop “Kaartlaag toevoegen”. In dit dialoogvenster staat een invoerveld met het label “URL”, maar deze tekst is niet opgenomen in de toegankelijke naam.

Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de placeholder-tekst), is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet.

Oplossing:

Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Toegankelijke naam van de radiogroup ontbreekt

Op deze pagina opent de knop met het tandwielicoon (“Kaarteigenschappen”) een dialoogvenster. In dit dialoogvenster staat een groep keuzerondjes “Tijdzone”. Ze zijn gegroepeerd in een element met de rol radiogroup, maar dit element heeft geen toegankelijke naam.

Hetzelfde probleem doet zich voor op pagina https://zuid-holland.maps.arcgis.com/home/webscene/viewer.html bij de radiogroep “3D-navigatie” in het dialoogvenster “Scene Viewer instellingen”, dat wordt geopend via de overeenkomstige optie in het hoofdmenu.

Oplossing:

De tekst “Tijdzone” moet als een groepslabel verbonden zijn met de groep radiobuttons. Dit kun je bereiken door fieldset en legend te gebruiken of door deze tekst met een aria-describedby te verbinden met de groep.

Zichtbare tekst ontbreekt in toegankelijke naam knop

Onderaan deze pagina staat een knop met een pijltjesicoon. Wanneer daarop wordt geklikt, wordt het menu uitgevouwen en verandert de knop in een knop met de zichtbare tekst “Inklappen”. De toegankelijke naam, ingesteld met het attribuut aria-label, is echter “Menu samenvouwen”.

Dit kan problemen geven voor bezoekers die stembediening gebruiken. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet.

Hetzelfde probleem doet zich op deze pagina voor bij een vergelijkbare knop onderaan de tweede set bedieningselementen, en ook op pagina https://zuid-holland.maps.arcgis.com/home/item.html?id=cc804b344c8f41ae9c9806059b574bc5 op het tabblad “Gegevens” en op andere pagina’s.

Oplossing:

Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Elementen die toetsenbordfocus krijgen zijn bedekt door sticky header

Op deze pagina, wanneer de website wordt verkleind tot een lagere resolutie (zoom 400%) en het mobiele menu wordt geopend, bedekt een sticky header twee opties in het mobiele menu. Hoewel interactieve elementen zoals “Start” en “Gallery” nog steeds toetsenbordfocus krijgen, is de focusindicator verborgen achter de sticky header. Hierdoor kunnen bezoekers die met het toetsenbord navigeren niet zien waar de toetsenbordfocus zich bevindt.

Oplossing:

Zorg ervoor dat de sticky header geen interactieve elementen en hun focusindicatoren bedekt. Je moet hiervoor bijvoorbeeld de z-index aanpassen, elementen herpositioneren of de header dynamisch verkleinen op kleinere schermen.

De pagina is nauwelijks te gebruiken wanneer wordt ingezoomd tot 400%

Wanneer op deze pagina wordt ingezoomd tot 400%, ontstaan verschillende problemen: dialoogvensters overlappen de inhoud van de pagina, vaste headers en footers maken het onmogelijk om bij de inhoud te komen, en sommige opties verdwijnen uit beeld.

Oplossing:

Zorg dat alle elementen zichtbaar blijven en correct functioneren bij inzoomen tot 400% op een scherm van 1280 bij 1024 pixels.

Link naar pagina: https://zuid-holland.maps.arcgis.com/home/webscene/viewer.html

Problemen met koppen en radiogroepen zijn beschreven in de vorige secties.

Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Wanneer deze pagina wordt geopend, wordt er een dialoogvenster “Scene Viewer” weergegeven. Dit dialoogvenster mist zowel een juiste rol als een toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Toetsenbord focus gaat buiten het dialoogvenster

Wanneer deze pagina wordt geopend, verschijnt een dialoogvenster “Scene Viewer”. Op dit moment kan het toetsenbordfocus uit het geopende dialoogvenster ontsnappen en naar de onderliggende pagina verplaatsen. Bij dit soort dialoogvensters moet je de toetsenbordfocus goed instellen. Als het venster actief is, moet de toetsenbordfocus binnen het venster blijven, en mag deze niet op de onderliggende pagina terechtkomen.

Oplossing:

Je lost dit op met Javascript door de focus binnen het venster te houden totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Je kunt er ook voor kiezen om het venster automatisch te sluiten op het moment dat de focus eruit gaat.

Afbeelding zonder tekstalternatief is de enige inhoud van een link

Op deze pagina wordt na het klikken op het icoon “Delen” in de header een dialoogvenster geopend. In dit dialoogvenster hebben het “x”-icoon en de socialmedia-iconen het attribuut aria-hidden="true", waardoor ze niet toegankelijk zijn voor gebruikers van hulpsoftware. Deze afbeeldingen functioneren ook als knoppen (“x” – sluiten) en links (socialmedia), maar de tekstalternatieven ontbreken, waardoor de elementen eveneens ontoegankelijk zijn. Dit valt ook onder WCAG-succescriteria 2.4.4 en 4.1.2.

Hetzelfde probleem doet zich voor op pagina’s https://zuid-holland.maps.arcgis.com/home/item.html?id=ad83a58fba2147578ea5003cc322b811 and https://zuid-holland.maps.arcgis.com/home/item.html?id=cc804b344c8f41ae9c9806059b574bc5 met het rss-icoon dat als link fungeert naast “Opmerkingen” en met het externe linkicoon in de sectie “Details” onder de kop “URL”, evenals op andere vergelijkbare pagina’s.

Oplossing:

Voorzie de afbeeldingen van tekstalternatieven die duidelijk de functie van de knop en de bestemming van de links beschrijven. Zo weten bezoekers die de afbeeldingen niet kunnen zien ook waar deze naartoe leiden.

Er ontbreekt een label bij een invoerveld

Op deze pagina wordt na een klik op het pictogram "Delen" in de header een dialoogvenster geopend. Op beide tabbladen van het dialoogvenster staan invoervelden zonder zichtbare labels.

Oplossing:

Geef alle invoervelden een duidelijk label in de vorm van tekst of een afbeelding met een alt-tekst.

Invoerveld heeft geen toegankelijke naam

Op deze pagina opent de knop "Delen" in de header een dialoogvenster. Op beide tabbladen in het dialoogvenster staan invoervelden zonder toegankelijke namen.

Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.

Oplossing:

Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.

Knop heeft niet de juiste rol

Op deze pagina staan onder de knop “Aanmelden” elementen met verschillende iconen, bijvoorbeeld een vergrootglas (zoeken) of een “x”-icoon naast het veld “Zoeken”. De elementen zijn knoppen, maar hebben niet de juiste toegankelijke rol. Hierdoor kunnen schermlezers niet doorgeven dat het om knoppen gaat. Blinde bezoekers weten dus niet dat op deze elementen geklikt kan worden. Het gevolg is dat alle content die met deze knoppen kan worden geopend, ook niet toegankelijk is.

Oplossing:

Zorg ervoor dat elke knop de juiste toegankelijke rol heeft door een van de volgende oplossingen te gebruiken:

1. Gebruik het button-element: maak de knop met het button-element. Dan heeft de knop automatisch de juiste rol van knop.
2. Voeg role=”button” toe: als een ander element is gebruikt (meestal niet aan te raden), voeg dan het attribuut role=”button” toe aan dit element om de rol expliciet vast te leggen in de code.

Een toegankelijke naam kan worden opgegeven met behulp van het attribuut aria-label.

Overbodige attributen aria-expanded en aria-haspopup worden gebruikt op menuopties

Op deze pagina opent de menuknop verschillende menuopties. De opties hebben een pijltje-icoon en de attributen aria-expanded en aria-haspopup, maar er wordt in werkelijkheid geen extra inhoud geopend. Ze verwijzen alleen naar nieuwe pagina’s. Dit is verwarrend voor blinde bezoekers van de website.

Hetzelfde probleem staat op de pagina’s https://zuid-holland.maps.arcgis.com/home/item.html?id=cc804b344c8f41ae9c9806059b574bc5, https://zuid-holland.maps.arcgis.com/home/item.html?id=e3ea3b0adfb64f99aa4b6cd46572274b bij de menuopties “Overzicht”, “Gegevens”, “Visualisatie” en op andere pagina’s.

Oplossing:

Verwijder de overbodige attributen.

Een element met de rol slider heeft geen toegankelijke naam

Op deze pagina opent de menuknop verschillende menuopties. De optie “Scene Viewer instellingen” opent een dialoogvenster. In het dialoogvenster heeft het schuifregelaar-element “3D-grafische gegevens optimaliseren voor” geen programmatisch bepaalbare toegankelijke naam. Daardoor kunnen schermlezergebruikers niet herkennen wat de bediening doet of welk onderdeel van de interface wordt aangepast (bijvoorbeeld of het de prestatie of de kwaliteit regelt). Hoewel het visuele label “3D-grafische gegevens optimaliseren voor” zichtbaar is, is het niet correct gekoppeld aan het schuifregelaar-element.

Een vergelijkbaar probleem staat op deze pagina bij de schuifregelaar “Wolkendek” in het dialoogvenster dat wordt geopend via de knop met het zonicoon (“Overdag/Weer”).

Oplossing:

Zorg dat het zichtbare label programmatisch is gekoppeld aan de schuifregelaar. Er kan:

• een label-element worden gebruikt met een for-attribuut dat verwijst naar het id van de schuifregelaar,
• aria-labelledby worden gebruikt om de schuifregelaar te koppelen aan de zichtbare tekst,
• een aria-label worden toegevoegd dat het doel beschrijft, bijvoorbeeld. Dit zorgt ervoor dat hulpsoftware het doel van de schuifregelaar samen met de huidige waarde aankondigt.

Informatie is niet beschikbaar voor schermlezers

Op deze pagina opent de knop met het vergrootglas onder de knop “Aanmelden” een zoekveld. Wanneer een bezoeker het veld bedient met het toetsenbord of de muis, verschijnt er in het veld een extra optie – “Gebruik huidige locatie”. Een schermlezergebruiker wordt echter niet geïnformeerd over de aanwezigheid van deze optie en kan deze functie niet waarnemen of activeren.

Oplossing:

Pas de markering van het element aan, zodat “Gebruik huidige locatie” waarneembaar is voor bezoekers die hulpsoftware gebruiken.

Zoomen is niet mogelijk in oudere browsers door bepaalde code

Op deze pagina staan in het head-element van de HTML-code de waarden maximum-scale=1 en user-scalable=no. Deze code zorgt ervoor dat een bezoeker niet kan inzoomen.

Oplossing:

Verwijder deze code.

Link naar pagina: https://zuid-holland.maps.arcgis.com/home/user.html?user=Ruimte_RWB_pzhNL

title-element beschrijft de inhoud niet

De titel van deze pagina, "'s profiel", is geen goede beschrijving van de inhoud van de pagina. In het title-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Wanneer correct ingesteld, wordt deze tekst bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina’s.

Oplossing:

Zet een duidelijke tekst in het title-element van de pagina die de inhoud van de pagina beschrijft. Zorg er ook voor dat de titel uniek is en niet hetzelfde is als de titel van andere pagina’s op de website.

Link naar pagina: https://zuid-holland.maps.arcgis.com/home/item.html?id=ad83a58fba2147578ea5003cc322b811

Problemen met iconen zonder tekstalternatieven en afbeeldingen die functioneren als links zijn beschreven in eerdere secties.

Toetsenbordfocus gaat niet naar de nieuw geopende inhoud

Op deze pagina opent de pijlknop (“Details uitbreiden”) onder de kop “Details” extra inhoud. Het toetsenbordfocus blijft echter op de knop staan en verplaatst zich daarna onjuist naar de footer in plaats van naar de interactieve elementen in de nieuw geopende inhoud. Dit is geen logische focusvolgorde.

Een vergelijkbaar probleem is aanwezig bij deze sectie op de pagina’s https://zuid-holland.maps.arcgis.com/home/item.html?id=7b506043536246faa4194d4c3d4c921b waar de nieuw geopende inhoud geen toetsenbordfocus krijgt, op pagina https://zuid-holland.maps.arcgis.com/home/item.html?id=cc804b344c8f41ae9c9806059b574bc5 en op andere vergelijkbare pagina’s.

Oplossing:

Wanneer nieuwe inhoud wordt geopend, moet het toetsenbordfocus automatisch worden verplaatst naar het eerste nieuw geopende interactieve element.

Toetsenbordfocus is niet zichtbaar

Wanneer deze pagina wordt bekeken op een klein scherm, is het toetsenbordfocus niet zichtbaar op de knop “Overzicht” naast de kop “Geo-hub Zuid-Holland”. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Hetzelfde probleem is aanwezig bij de identieke knop op de pagina’s https://zuid-holland.maps.arcgis.com/home/item.html?id=7b506043536246faa4194d4c3d4c921b, https://zuid-holland.maps.arcgis.com/home/item.html?id=cc804b344c8f41ae9c9806059b574bc5 en op andere pagina’s.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen. Op deze pagina staat een instructie om zelf focuszichtbaarheid te testen: https://properaccess.nl/hoe-test-ik-focus-zichtbaarheid/.

Link naar pagina: https://zuid-holland.maps.arcgis.com/home/item.html?id=7b506043536246faa4194d4c3d4c921b

Problemen met iconen zonder tekstalternatieven, afbeeldingen die functioneren als links en toetsenbordfocus zijn beschreven in eerdere secties.

Taalwisseling ontbreekt op anderstalige content

Op deze pagina staat veel tekst in een andere taal (Engels) zonder taalcodering. Bijvoorbeeld onder de koppen “3D model of Zürich, CH”, “Beschrijving”, “Lagen”, “Basiskaart” en “Gebruiksvoorwaarden”. Hetzelfde probleem geldt voor de titel van de pagina, die ook in het Engels is – “3D model of Zürich, CH”.

Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer zou juist op de taal van de zin moeten overschakelen. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.

Oplossing:

Voeg een lang-attribuut met de juiste taalcode toe aan het html-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element. In het geval van de paginatitel kan deze worden vertaald naar het Nederlands.

Alternatieve tekst van informatieve afbeelding is niet betekenisvol

Op deze pagina staat in de sectie “Gebruiksvoorwaarden” een logo met de zichtbare tekst “esri” en de alternatieve tekst "https://downloads.esri.com/blogs/arcgisonline/esrilogo_new.png". Deze tekst beschrijft de afbeelding niet goed. Een logo is een informatieve afbeelding en de alt-tekst moet de zichtbare tekst van het logo bevatten.

Afbeeldingen die informatie overdragen moeten een betekenisvolle alternatieve tekst hebben, waarin de belangrijke informatie uit de afbeelding wordt beschreven.

Oplossing:

Verander de bestaande alt-tekst zodat deze de zichtbare tekst van het logo bevat. Omdat dit logo niet als link functioneert, voeg het woord “Logo” toe ervoor – “Logo Esri”.

Overbodige lijst aanwezig op de pagina

Op deze pagina staat onder de kop “Lagen” een onzichtbare lijst met 53 lege items. Daardoor krijgen gebruikers van hulpsoftware onnodige informatie.

Een vergelijkbaar probleem staat onder de kop “Basiskaart” met een lijst van drie items.

Hetzelfde probleem is aanwezig op de pagina https://zuid-holland.maps.arcgis.com/home/item.html?id=1cfbefb12a2d4e75aa6c07bbb81f5462 in de vergelijkbare sectie “Lagen”, op pagina https://zuid-holland.maps.arcgis.com/home/item.html?id=e3ea3b0adfb64f99aa4b6cd46572274b en op andere vergelijkbare pagina’s.

Oplossing:

Verwijder de code van de onzichtbare lijst als deze niet nodig is, of vul de lijst aan met beschrijvende items.

De focusvolgorde is niet correct

Op deze pagina opent na het klikken op de knop “Metadata weergeven” een dialoogvenster. In het dialoogvenster blijft het toetsenbordfocus vastzitten op de knop “x” en gaat het niet met de Tab-toets naar andere interactieve elementen op de pagina. Deze zijn wel bereikbaar met pijlnavigatie. Dit is verwarrend voor gebruikers van hulpsoftware.

Oplossing:

Maak de focusvolgorde logisch.

Toetsenbordfocus is alleen zichtbaar door een kleurverandering

Op deze pagina opent na het klikken op de knop “Metadata weergeven” een dialoogvenster. In het dialoogvenster verandert bij toetsenbordfocus op de schakelknop “View as plain text” alleen de randkleur van grijs naar blauw. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn.

Oplossing:

Je kunt het beste een extra visuele aanduiding toevoegen. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.

Link naar pagina: https://zuid-holland.maps.arcgis.com/home/item.html?id=cc804b344c8f41ae9c9806059b574bc5

Problemen met koppen, overbodige attributen, iconen “opent in een nieuw browsertabblad” en andere problemen zijn beschreven in eerdere secties.

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op deze pagina opent na het klikken op de knop “Kolomzichtbaarheid” op het tabblad “Gegevens” een dialoogvenster. Wanneer in het dialoogvenster op het “i”-icoon naast een willekeurig veld wordt geklikt, verschijnt een lijst met velden en hun namen. De teksten “Veldbeschrijving is niet ingesteld” onder sommige velden zijn grijs (#A9A9A9) op een witte achtergrond. De contrastratio is onvoldoende: 2,4:1.

Hetzelfde probleem staat op het tabblad “Gegevens” van de pagina’s https://zuid-holland.maps.arcgis.com/home/item.html?id=e3ea3b0adfb64f99aa4b6cd46572274b, https://zuid-holland.maps.arcgis.com/home/item.html?id=1cfbefb12a2d4e75aa6c07bbb81f5462 en op andere pagina’s.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Tabel is een gegevenstabel, maar de HTML-code voor tabellen ontbreekt

Op deze pagina, op het tabblad "Gegevens" - “Velden”, is een gegevenstabel aanwezig. De opmaak van de tabel ontbreekt. Daardoor kan een schermlezer de relatie tussen de verschillende cellen niet begrijpen.

Hetzelfde probleem staat op het tabblad “Gegevens” – “Velden” van de pagina’s https://zuid-holland.maps.arcgis.com/home/item.html?id=e3ea3b0adfb64f99aa4b6cd46572274b, https://zuid-holland.maps.arcgis.com/home/item.html?id=1cfbefb12a2d4e75aa6c07bbb81f5462 en op andere pagina’s.

Oplossing:

Zorg dat tabellen met gegevens met de juiste HTML-code worden gemarkeerd. Je leest er meer over op https://www.w3.org/WAI/tutorials/tables/.

Kleurcontrast van tekst is te laag

Op deze pagina staat op het tabblad “Gegevens” – “Velden” een gegevenstabel. Na een klik op een kolomkop verandert de tekstkleur van zwart naar blauw (#007AC2) en is het contrast met de witte achtergrond (#F7F7F7) onvoldoende: 4,3:1.

Hetzelfde probleem staat op het tabblad “Gegevens” – “Velden” van de pagina’s https://zuid-holland.maps.arcgis.com/home/item.html?id=e3ea3b0adfb64f99aa4b6cd46572274b, https://zuid-holland.maps.arcgis.com/home/item.html?id=1cfbefb12a2d4e75aa6c07bbb81f5462 en op andere pagina’s.

Oplossing:

Zorg dat de contrastratio voor kleine tekst niet lager is dan 4,5:1.

Bezoekers die inzoomen tot 200% en 400% kunnen niet meer alle functies gebruiken

Op deze pagina staat op het tabblad “Gegevens” – “Velden” een gegevenstabel. Wanneer de tekst op deze pagina wordt ingezoomd tot 200%, zijn drie kolommen van de tabel niet zichtbaar. Bij een zoomniveau van 400% zijn de tabbladen “Gegevens” en “Visualisatie” niet te gebruiken.

Hetzelfde probleem staat op andere vergelijkbare pagina’s: https://zuid-holland.maps.arcgis.com/home/item.html?id=e3ea3b0adfb64f99aa4b6cd46572274b, https://zuid-holland.maps.arcgis.com/home/item.html?id=1cfbefb12a2d4e75aa6c07bbb81f5462 en op andere pagina’s.

Oplossing:

Zorg dat alles nog werkt als een bezoeker inzoomt tot 200% en 400% op een scherm van 1280 bij 1024 pixels.

Link naar pagina: https://zuid-holland.maps.arcgis.com/home/item.html?id=e3ea3b0adfb64f99aa4b6cd46572274b

Problemen met koppen, overbodige attributen, iconen “opent in een nieuw browsertabblad”, contrast en andere problemen zijn beschreven in eerdere secties.

Link naar pagina: https://zuid-holland.maps.arcgis.com/home/item.html?id=1cfbefb12a2d4e75aa6c07bbb81f5462

Problemen met koppen, overbodige attributen, iconen “opent in een nieuw browsertabblad”, contrast en andere problemen zijn beschreven in eerdere secties.

Link naar pagina: https://zuid-holland.maps.arcgis.com/home/item.html?id=6ff3109656494ec1a857d6ea4022de17

Opsomming is niet opgebouwd met het HTML-element ul

Op deze pagina staan in de sectie “Beschrijving” onder de kop “Samenvatting” vier lijsten, maar ze hebben geen correcte markering.

Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets). Meestal is hier een knop voor in de content-editor van een CMS. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt. Meer over lijsten en waarom ze belangrijk zijn lees je op deze pagina https://properaccess.nl/waarom-correcte-html-lijsten-het-verschil-maken-in-toegankelijkheid/.

Oplossing:

Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.

Link naar pagina: https://zuid-holland.maps.arcgis.com/sharing/oauth2/authorize?client_id=arcgisonline&response_type=code&state={"portalUrl"%3A"https%3A%2F%2Fzuid-holland.maps.arcgis.com"%2C"uid"%3A"HUjlGLv9XPSLvzCTOS7E_H6ozKkal_5nQF9YUBP9EBo"%2C"useLandingPage"%3Atrue%2C"clientId"%3A"arcgisonline"}&expiration=20160&locale=nl&redirect_uri=https%3A%2F%2Fzuid-holland.maps.arcgis.com%2Fhome%2Faccountswitcher-callback.html&force_login=true&redirectToUserOrgUrl=true&code_challenge=15bH_YCJp_d3VzSYB54FrkzoFyu0Yt1gYS0FXvKme8M&code_challenge_method=S256&display=default&hideCancel=true&showSignupOption=true&canHandleCrossOrgSignIn=true&signuptype=esri&allow_verification=true

Logo heeft geen alternatieve tekst

Op deze pagina staat een logo zonder tekstalternatief.

Als het alt-attribuut van een afbeelding leeg is (alt=""), negeren schermlezers de afbeelding. Door de alt-tekst niet in te vullen, zeg je eigenlijk: deze afbeelding is puur decoratief, geeft geen informatie. Er wordt dan dus niets voorgelezen. Daarom moet je informatieve afbeeldingen zoals een logo altijd een alt-tekst geven.

Oplossing:

Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op deze pagina staat een link “Privacy”, die blauw is (#0079C1) op een witte achtergrond (#F4F4F4). De contrastratio is te laag: 4,2:1.

Oplossing:

Zorg ervoor dat het kleurcontrast niet minder is dan 4,5:1.

Kwaliteit van de foutmeldingen

Op deze pagina bevat een formulier foutmeldingen die de invoerproblemen niet goed beschrijven. De huidige meldingen zijn instructies (bijvoorbeeld "Een geldige gebruikersnaam is vereist") in plaats van uitleg wat er mis is gegaan. Foutmeldingen moeten specifieker zijn en de aard van de fout uitleggen. Bijvoorbeeld, in plaats van de huidige melding zou een betere melding zijn “Dit veld is niet ingevuld” of nog beter “Vul uw [veldnaam] in”.

Oplossing:

Verander de teksten van de foutmeldingen, zodat bezoekers weten wat zij niet goed hebben gedaan.

Link naar pagina: https://zuid-holland.maps.arcgis.com/sharing/oauth2/troubleshoot?oauth_state=aZWBsZMdsIvpIG3UeyoaHbQ..mjQgy6eS93bbJ7mSRhRoL4jXF_0yAQAZxrCM3OZogYj1aB0_Ewy-QwI8UgubaRNEk-9BU8sItoIEvVxL6-CUlvIKHZG6zQuyUdGvAbBENJ9uNfRlz6BFsukGRUuOuxOVEm4_jcnpq0pl-xelbAoMV4UpjuNCk6wYW6mjLtuGoYimuT1F9hW2zGh4r-vcbbC6jW3A36zLZqR1cdcNKMAqLTkxF--7ajwSUIdrYmajbnQhlayh39FyKwPgZc4yTHIbyj6djouIlLIetSMP7TXhfaABeIP__LO2uAbr9FwIlxsk6432mU7mD5q2itOH1qic_IyVp76k5ZX2u0SbN-dv46ceSX5ivi-SCc5qghs15rdo7ImAj6G8VrHZMZu-s2TNpQAH-wVrzwlq1RawBE5ngEZmYJ6543HPHhpZ4vKtZtlLFVD91pGjpohaYYjHtntVfB9LGTdB7LQueoGZNQhyt2dVtZE7_hRLcHDt0Jiahic0JOZj7F7MYTQouXt7Et8OHLBxyIj2V53jnp3Fvnck0yPx9KwaRiQxYjZWf5KRTEH4SaT1ANfQFV4twqSLBNgP5iJQnPDdDY8899K77Ds5m2HsdYTBh1oGinPG_zSgknOKNNZOxElHu5F_3qTcCaGdSsdWREBGIz45QDW1nFRbmhFlbnaPfRxBX_kTaLg0mDnMUFyqASZtEMUpNljkY2-UgrFHAYci2gNhczeVrNl0Ll4Mt0QiAtOWpOdp4S9HTcdGKrckUMssOpL24vOPKyNai96TG0ATkiUjOjPg_igFuw..&forgotMy=username

Toetsenbordfocus is niet logisch

Op deze pagina wordt na het verzenden van het formulier met lege of onjuiste gegevens een foutmelding weergegeven zonder dat de pagina opnieuw wordt geladen. De focus wordt echter niet automatisch verplaatst naar de eerste foutmelding, maar gaat naar de adresbalk van de browser.

Oplossing:

Zorg dat de eerste foutmelding de eerst volgende focusbar element na de verzendknop wordt. Zo wordt de bezoeker meteen over de fout geïnformeerd en kan hij zijn invoer aanpassen.

Blinde bezoekers krijgen geen bericht van de foutmelding

Op deze pagina staat een formulier. Wanneer er een fout wordt gemaakt in het formulier, verschijnt er een foutmelding. De melding krijgt geen focus en wordt niet door de schermlezer aangekondigd. Als de foutmelding geen toetsenbordfocus krijgt op het moment dat deze verschijnt, krijgen mensen die blind zijn geen melding van hun schermlezer.

Oplossing:

Voeg aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.

Link naar pagina: https://zuid-holland.maps.arcgis.com/home/search.html?restrict=true&sortField=relevance&sortOrder=desc&searchTerm=werk#content

Visueel meerdere alinea’s, in de code maar één

Wanneer het zijpaneel wordt geopend door op een zoekresultaat te klikken (bijvoorbeeld “Bedrijventerreinen - Locatie [ags]”), verschijnt de sectie “Beschrijving” waarin de volledige inhoud van de sectie in één div-element is opgenomen.

Visueel is het een tekstblok met meerdere alinea’s, maar in de code is het onjuist gemarkeerd als één enkel div-element. De visuele structuur van de inhoud moet correct worden weergegeven in de HTML.

Een vergelijkbaar probleem doet zich voor in hetzelfde dialoogvenster in de sectie “Details” bij het tekstblok onder de kop “Gebruiksvoorwaarden”, evenals op pagina’s https://zuid-holland.maps.arcgis.com/home/item.html?id=cc804b344c8f41ae9c9806059b574bc5 en https://zuid-holland.maps.arcgis.com/home/item.html?id=6ff3109656494ec1a857d6ea4022de17 bij de teksten onder de koppen “Beschrijving” en “Gebruiksvoorwaarden”, en op andere pagina’s.

Oplossing:

Wanneer de inhoud visueel uit meerdere alinea’s bestaat, moet elke alinea in een eigen p-element worden geplaatst. Dit zorgt ervoor dat de semantische structuur van de inhoud correct wordt doorgegeven aan hulpsoftware, zodat alle bezoekers dezelfde structurele informatie ontvangen.

Alternatieve tekst van informatieve afbeelding is niet betekenisvol

Wanneer de zijkolom wordt geopend door op een zoekresultaat te klikken (bijvoorbeeld “Bedrijventerreinen - Locatie [ags]”), wordt in de sectie “Beschrijving” een link “Open metadata” weergegeven. Naast deze link staat een informatieve afbeelding met de alternatieve tekst “Open link icon”. Deze tekst is niet erg beschrijvend ( succescriterium 1.1.1) en bovendien is deze in het Engels, terwijl de hoofdtaal van de pagina Nederlands is ( succescriterium 3.1.2). Informatieve afbeeldingen hebben betekenisvolle alternatieve tekst nodig die de belangrijkste informatie van de afbeelding juist en beknopt weergeeft – in dit geval dat de link in een nieuw browsertabblad wordt geopend.

Hetzelfde probleem doet zich voor op pagina https://zuid-holland.maps.arcgis.com/home/item.html?id=ad83a58fba2147578ea5003cc322b811 met een identieke afbeelding naast de link “Locatie weergeven” die zichtbaar is wanneer de afbeelding onder “Geo-hub Zuid-Holland” focus krijgt, op pagina https://zuid-holland.maps.arcgis.com/home/item.html?id=7b506043536246faa4194d4c3d4c921b met dezelfde afbeelding naast de link “Openen in Scene Viewer” die zichtbaar is wanneer de afbeelding onder “3D model of Zürich, CH” focus krijgt, op pagina https://zuid-holland.maps.arcgis.com/home/user.html?user=PZH_publisher en op andere pagina’s.

Oplossing:

Wijzig de alternatieve tekst in: “Opent in een nieuw browsertabblad”.

Logo heeft geen tekstalternatief (alt-attribuut ontbreekt)

Wanneer het zijpaneel wordt geopend door te klikken op bijvoorbeeld “Bedrijventerreinen - Locatie [ags]”, wordt in de sectie “Details” het logo “Provincie Zuid-Holland” weergegeven. Dit logo is geïmplementeerd met een img-element maar mist een alt-attribuut.

Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is. Zo weten bezoekers die het plaatje niet kunnen zien, ook wat er staat.

Hetzelfde probleem doet zich voor op pagina’s https://zuid-holland.maps.arcgis.com/home/item.html?id=cc804b344c8f41ae9c9806059b574bc5 en https://zuid-holland.maps.arcgis.com/home/item.html?id=6ff3109656494ec1a857d6ea4022de17 met hetzelfde logo in de sectie “Gebruiksvoorwaarden”.

Oplossing:

Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

Informatieve afbeelding is verborgen met aria-hidden="true"

Wanneer op een van de zoekresultaten wordt geklikt (bijvoorbeeld “Bedrijventerreinen - Locatie [ags]”) verschijnt een zijpaneel. In de sectie “Kaartlagen (1)” opent de optie “Bedrijventerreinen - Locatie” twee tabbladen: “Velden” en “Overzicht”. Op het tabblad “Velden” staat een lijst met veldnamen met iconen die het gegevenstype aangeven: “abc”, “int”, “123”. Deze iconen zijn informatief maar zijn verborgen voor hulpsoftware met aria-hidden="true". Daardoor kunnen schermlezers de informatie over het gegevenstype niet voorlezen, terwijl dit belangrijk kan zijn om de inhoud van het veld goed te begrijpen.

Hetzelfde probleem doet zich voor op pagina’s https://zuid-holland.maps.arcgis.com/home/item.html?id=cc804b344c8f41ae9c9806059b574bc5, https://zuid-holland.maps.arcgis.com/home/item.html?id=1cfbefb12a2d4e75aa6c07bbb81f5462 en andere, met vergelijkbare iconen in de tabel op het tabblad “Gegevens” – “Velden” in de kolom “Type”.

Oplossing:

Voorzie deze iconen van toegankelijke tekstalternatieven (bijv. “text field”, “integer”, “numeric field”) met aria-label of met visueel verborgen

img-element heeft geen alt-attribuut

Wanneer een zijpaneel wordt geopend door te klikken op "Gebiedsprofiel Gouwe Wiericke", verschijnen in de sectie "Beschrijving" verschillende afbeeldingen. Ze zijn toegevoegd met behulp van een img-element, maar het alt-attribuut ontbreekt.

Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.

Oplossing:

Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding laat je de waarde leeg, bij een informatieve afbeelding voeg je een duidelijke alternatieve tekst toe.

Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, raakt de tekst “Provincie Zuid-Holland” in de kaarten gedeeltelijk uit beeld.

Oplossing:

Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Link naar pagina: https://zuid-holland.maps.arcgis.com/home/user.html?user=PZH_publisher

Problemen met koppen, de iconen “opent in een nieuw browsertabblad”, de namen van de driepuntknoppen en andere problemen zijn beschreven in eerdere secties.

Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en een zoomniveau van 400%, is de link “Alles weergeven” onder de kop “Groepen” niet zichtbaar en niet bedienbaar.

Hetzelfde probleem is op pagina https://zuid-holland.maps.arcgis.com/home/user.html?user=Ruimte_RWB_pzhNL.

Oplossing:

Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.