Audit digitale toegankelijkheid van website GeoWeb-Basis_open PZH

#1 - Koppen zijn niet als kop gemarkeerd

Wanneer je deze website voor het eerst bezoekt, verschijnt er een dialoogvenster met een kopje “Welkom”. In dit dialoogvenster zijn de volgende teksten bedoeld als koppen, maar de kop-elementen ontbreken. Het <strong>-element wordt gebruikt om deze teksten eruit te laten zien als koppen. Dit geldt bijvoorbeeld voor “Quick Start: Hoe gebruik ik deze applicatie?” en “Proclaimer”.

Het strong-element is niet bedoeld om koppen mee te markeren. Dit moet je altijd doen met een kop-element, zoals h3. Koppen gebruik je om een tekst te structureren. Alleen wanneer je ze als kop markeert met een kop-element, begrijpt hulpsoftware deze betekenis.

Oplossing:

Verwijder dit element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h3 of h4. Dit element wordt vaak toegevoegd met een knop “B” in een tekstbewerker.

#2 - Elementen met de rol <menuitem> hebben geen geldige ouderrol

Wanneer je met het toetsenbord vanuit de browser adresbalk de focus naar de website verplaatst, verschijnt een dialoogvenster. In dit dialoogvenster zijn elementen met de rol <menuitem> aanwezig, maar deze elementen hebben geen juiste ouderrol, zoals <menu>, <menubar> of <group>.

Op https://www.w3.org/WAI/ARIA/apg/patterns/menu/ staat wat er nodig is om een toegankelijke navigatie met role="menubar" te bouwen.

Oplossing:

Zorg ervoor dat elementen met de rol <menuitem> een correcte ouderrol hebben, zoals <menu>, <menubar> of <group>.

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

Wanneer je met het toetsenbord vanuit de browser adresbalk de focus naar de website verplaatst, verschijnt een dialoogvenster met het kopje “Snelkoppelingenmenu”. Wanneer deze website wordt bekeken bij een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, gaat de tekst “Snelkoppelingenmenu” deels verloren. Ook de navigatie-elementen onder deze kop zijn vrijwel niet zichtbaar en niet bedienbaar.

Oplossing:

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

#4 - Taalcode klopt niet

De primaire taal van deze pagina is Nederlands, maar het lang-attribuut is onjuist ingesteld op "en".

Je moet de primaire taal van de pagina aangeven met de juiste taalcode via het lang-attribuut op het html-element, in dit geval lang="nl". Schermlezers gebruiken deze code om de juiste uitspraakregels toe te passen. Als hier een verkeerde code staat, wordt de inhoud van de pagina met onjuiste uitspraakregels voorgelezen. De voorgelezen tekst is dan moeilijk te begrijpen.

Oplossing:

Stel de taalcode correct in voor elke pagina door lang="nl" te gebruiken.

#5 - Het <title>-element beschrijft de inhoud niet

De titel van deze pagina, "GeoWeb-Basis_open PZH", geeft 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 dit correct is 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.

#6 - Tekstalternatief van het logo beschrijft de inhoud onvolledig

Het logo bovenaan de website toont de volledige tekst “Provincie Zuid-Holland”, maar het tekstalternatief (alt-tekst) bevat alleen “Een korte uitleg over de afbeelding”. Hierdoor is de informatie in het logo niet volledig beschikbaar voor bezoekers die de afbeelding niet kunnen waarnemen.

Oplossing:

Zorg ervoor dat het tekstalternatief (alt-tekst) van het logo de volledige tekst bevat die in het logo zichtbaar is, namelijk “Provincie Zuid-Holland”.

#7 - Het <tree>-element mist kind-elementen die erbij horen

Op het tabblad “Kaartlagen” is een element aanwezig met de rol <tree>. Dit element bevat elementen die niet zijn toegestaan, zoals <div> en <li>. Dit element mag alleen elementen bevatten met de rol <treeitem>.

Oplossing:

Zet <div> en <li> elementen om in <treeitem> elementen.

#8 - Onzichtbaar element krijgt toetsenbordfocus

In het tabblad “Kaartlagen” komt de toetsenbordfocus na de knop met het “+”-icoon terecht op een onzichtbaar element.
De toetsenbordfocus mag niet terechtkomen op onzichtbare elementen.

Oplossing:

Zorg ervoor dat alleen zichtbare elementen toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch en voorspelbaar blijft.

#9 - Afbeelding heeft geen tekstalternatief (alt-attribuut ontbreekt)

Op het tabblad “Legenda” staat onder de kop “grijs” een afbeelding van een legenda zonder een alt-attribuut.
Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan gebruik je alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.

Dit probleem is ook aanwezig bij een legenda in het paneel dat wordt geopend via de knop “Open legenda rechts”.

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.

#10 - Tekst is als afbeelding geplaatst

Dit is slechts een advies omdat kaarten onder een uitzondering vallen.
Op het tabblad “Legenda” staat onder de kop “grijs” een afbeelding van een legenda met tekst die in de afbeelding is verwerkt.

Als je een tekst als afbeelding plaatst, kunnen veel bezoekers er niets meer mee. Dit komt doordat ze de tekst in de afbeelding niet kunnen vergroten of aanpassen.

Oplossing:

Het is beter om deze tekst gewoon als normale tekst op de pagina te plaatsen. Op die manier kunnen mensen de grootte, kleur of het lettertype aanpassen zodat het voor hen leesbaarder wordt. Als de tekst in de afbeelding zit gebakken, kunnen ze dit niet doen.

#11 - Alleen kleur is gebruikt in legenda bij kaart

Dit is slechts een advies omdat kaarten onder een uitzondering vallen.
In het tabblad “Legenda” staat onder de kop “grijs” een afbeelding van een legenda. In deze legenda en op de kaart wordt alleen kleur gebruikt om informatie over te brengen. Zie het onderdeel onder “BODEMGEBRUIK” in de legenda.

Alleen als je de kleuren kunt zien en van elkaar kunt onderscheiden zie je welke balk / lijn bij welke categorie in de legenda hoort.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering of datalabels in tekst.

#12 - Kleurcontrast tussen lijnen of balken in legenda is niet voldoende

Dit is slechts een advies omdat kaarten onder een uitzondering vallen.
In het tabblad “Legenda” staat onder de kop “grijs” een afbeelding van een legenda. Sommige kleurcombinaties hebben een onvoldoende contrastratio. Bijvoorbeeld lichtgeel (#FFF9DC) op een witte achtergrond. De contrastratio is 1,1:1.

Oplossing:

Zorg dat het contrast tussen informatieve elementen van een legenda minimaal 3,0:1 is, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de legenda voldoende contrast hebben.

#13 - Invoerveld heeft geen toegankelijke naam

Boven de kaart staat de knop “Project”, die een submenu opent. In het submenu “Project” staat een knop “Project opslaan” die een dialoogvenster opent met een invoerveld. Dit invoerveld heeft geen toegankelijke naam.
Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.
Dit probleem is ook gerelateerd aan succescriterium 2.5.3, omdat de zichtbare tekst “Voer een titel voor het projectbestand in:” niet is opgenomen in een toegankelijke naam en het invoerveld daardoor niet met spraak kan worden bediend.

Oplossing:

Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen. Andere oplossingen zijn ook mogelijk. Zet de zichtbare tekst in het label-element.

<label>-element is niet (correct) gekoppeld aan invoerveld

Boven de kaart staat de knop “Project”, die een submenu opent. In het submenu “Project” staat een knop “Huidige kaartbeeld delen” die een dialoogvenster opent met een invoerveld. Het label-element met de tekst "Deel de huidige status van de toepassing via URL of QR-code." is niet expliciet gekoppeld aan het bijbehorende invoerveld.

label-elementen moeten altijd zijn gekoppeld aan de bijbehorende invoervelden. Hierdoor krijgt het invoerveld een toegankelijke naam en wordt het klikgebied van het label vergroot, wat de toegankelijkheid en bruikbaarheid verbetert. Omdat het invoerveld geen toegankelijke naam heeft, wordt deze bevinding ook onder succescriterium 4.1.2.
Wanneer de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element bovendien niet met spraakbediening worden geactiveerd. Commando’s gebaseerdop de zichtbare tekst zullen dan niet werken. Dit valt onder het succescriterium 2.5.3.

Oplossing:

Koppel de <label>-elementen aan hun bijbehorende invoervelden door het for-attribuut op het <label>-element te gebruiken. In dit attribuut staat het id van het invoerveld waar het label bij hoort.
Zorg ervoor dat de zichtbare tekst voorkomt in de toegankelijke naam, bij voorkeur aan het begin.

#14 - De teken- en meetfuncties zijn niet toegankelijk met het toetsenbord

Dit is slechts een advies omdat kaarten onder een uitzondering vallen.
Op deze website zijn teken- en meetfuncties aanwezig. Deze functies zijn niet toegankelijk met het toetsenbord.

Oplossing:

Zorg ervoor dat alle interactieve functies ook toegankelijk zijn met het toetsenbord.

#15 - Zichtbare tekst van het zoekveld staat niet in de toegankelijke naam

Boven de kaart staat een knop “Zoeken” die een zoekveld opent met de zichtbare tekst (placeholder tekst) “Zoeken naar...”. De toegankelijke naam is echter “Typ uw zoektermen” en komt uit het aria-label.

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 ervoor dat de toegankelijke naam de zichtbare tekst bevat, bij voorkeur aan het begin van de naam. De toegankelijke naam mag ook hetzelfde zijn als de zichtbare tekst.

#16 - Keuzelijst heeft geen toegankelijke naam

Naast het zoekveld staat een knop voor zoekinstellingen die een dialoogvenster opent. In dit dialoogvenster staat onder de kop “Geocoder” een keuzelijst (select-element) zonder toegankelijke naam. Hierdoor is de keuzelijst niet toegankelijk voor mensen die hulp software gebruiken.

Dit probleem is ook gerelateerd aan succescriterium 2.5.3, omdat de zichtbare tekst “Geocoder” niet is opgenomen in een toegankelijke naam en het select-element daardoor niet met spraak kan worden bediend.

Oplossing:

Geef het select-element een toegankelijke naam.

#17 - De relatie tussen selectievakjes is niet in de code vastgelegd

In de zoekinstellingen staat onder het selectievakje “Selecteer zichtbaar” een groep selectievakjes, voorafgegaan door de tekst “Lagen”. Deze elementen zijn visueel gegroepeerd, maar deze relatie ontbreekt in de HTML.

Oplossing:

Je lost dit op door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kun je het legend-element gebruiken. Plaats hierin de tekst “Lagen”.

#18 - Invoerveld heeft geen toegankelijke naam

Boven de kaart staat een knop “Gegevens” die een submenu opent. De knop “Filter” opent een extra tab in het zijmenu. In deze tab staat onder het label “Gegevensbron” een invoerveld met role="combobox". Dit combobox-element heeft echter geen toegankelijke naam.

Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij moeten invullen. Het <label>-element met de tekst “Gegevensbron” is niet gekoppeld aan de combobox en aria-labelledby is toegepast op een generiek <div>-element in plaats van op het combobox-element zelf.

Oplossing:

Koppel het element met role="combobox" aan het <label>-element, zodat het een toegankelijke naam krijgt. Hiervoor zijn aanvullende wijzigingen nodig om het <label> correct te koppelen aan het element met role="combobox".
Het aria-labelledby-attribuut moet worden verwijderd van het generieke <div>-element, omdat dit attribuut niet is toegestaan op elementen met een generieke rol.

Een alternatieve oplossing is om het aria-labelledby-attribuut direct toe te passen op het element met role="combobox", waarbij wordt verwezen naar het element met de zichtbare label.

#19 - Keuzelijst (select-element) heeft geen permanent zichtbaar label

Op het tabblad “Filter” staat een knop “Voorwaarde toevoegen” die extra filterinstellingen opent. In deze instellingen zijn select-elementen aanwezig zonder permanent zichtbare labels. De eerste optie in het select-element kan niet als label dienen, omdat deze verdwijnt wanneer een andere optie wordt geselecteerd.

Hierdoor weten de bezoekers niet waar de keuzelijst over gaat. De teksten van de opties zijn in dit geval niet zelfverklarend. Dit probleem komt ook voor in het tabblad “Query”.

Oplossing:

Geef dit element een label dat altijd zichtbaar is.

#20 - De kleur van de rand van de schakelaar heeft niet genoeg contrast

Op het tabblad “Filter” staat een schakelaar “Geavanceerde modus”. De contrastratio tussen de grijze rand (#B1B1B1) en de witte achtergrond van de pagina is 2,1:1.
Dit probleem komt ook voor in het tabblad “Query”.

Oplossing:

De randen van interactieve elementen zoals schakelaar moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

#21 - Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Bovenaan de kaart staat een knop met een gebruikersicoon die een dialoogvenster opent met informatie over de gebruiker. Dit dialoogvenster heeft geen juiste rol en geen 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".

#22 - Koppen zijn niet als kop gemarkeerd

Bovenaan de kaart staat een knop met een gebruikersicoon die een dialoogvenster opent met informatie over de gebruiker. In dit dialoogvenster staat een kop “Webrichtlijnen”, maar het kop-element ontbreekt. Er wordt een <strong>-element gebruikt om de tekst eruit te laten zien als een kop.

Het strong-element is niet bedoeld om koppen mee te markeren. Dit moet je altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen wanneer je ze als kop markeert met een kop-element, begrijpt hulpsoftware deze betekenis.

Oplossing:

Verwijder dit element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h2 of h3. Dit element wordt vaak toegevoegd met een knop “B” in een tekstbewerker.

<strong>-element is gebruikt voor opmaak

In dit dialoogvenster wordt het <strong>-element gebruikt voor opmaak bij de links “WCAG 2.1 AA standaard” en “Digitoegankelijk standaard”.
Het <strong>-element heeft een semantische betekenis: het geeft aan dat tekst extra nadruk krijgt. Gebruik dit element daarom niet uitsluitend voor een visueel effect (vetgedrukte tekst).

Oplossing:

Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken. Je kunt ook een <b>-element gebruiken om tekst vetgedrukt te maken.

#23 - Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

In de bovenhoek van de kaart staat een knop met het icoon “?” die een dialoogvenster opent. Dit dialoogvenster heeft geen juiste rol en geen 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".

#24 - Koppen zijn niet als kop gemarkeerd

In dit dialoogvenster staan koppen, maar de kop-elementen ontbreken. Het <strong>-element wordt gebruikt om deze teksten eruit te laten zien als koppen. Zie “Kaartlagen en groeplagen”, “Opties kaartlagen” en andere koppen.

Het strong-element is niet bedoeld om koppen mee te markeren. Dit moet je altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen wanneer je ze als kop markeert met een kop-element, begrijpt hulpsoftware deze betekenis.

Oplossing:

Verwijder het dit element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h2 of h3. Dit element wordt vaak toegevoegd met een knop “B” in een tekstbewerker.

#25 - Het kleurcontrast van het gemarkeerde gebied op de kaart is onvoldoende

Dit is slechts een advies omdat kaarten onder een uitzondering vallen.
Wanneer een bezoeker op de kaart klikt, wordt een specifiek gebied gemarkeerd in lichtblauw (#21FCFD) op een witte of grijze achtergrond. De contrastratio op een witte achtergrond is 1,3:1.

Oplossing:

Zorg dat het contrast tussen informatieve elementen van een kaart minimaal 3,0:1 is, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de kaart voldoende contrast hebben.