Issues:
Content-audit digitale toegankelijkheid website Kaartbank Provincie Noord-Brabant

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: Het logo van de provincie Noord-Brabant heeft wel de alternatieve tekst 'https://www.brabant.nl/', maar bevat niet de organisatienaam. De alternatieve tekst van een logo moet altijd tenminste de naam van de organisatie en eventuele overige tekst in de afbeelding bevatten. Daarnaast kan je de afbeelding een beschrijvend linkdoel geven als de afbeelding ook is opgemaakt als link. Bijvoorbeeld 'naar de Website van de Provincie Noord-Brabant' zou een goede alternatieve tekst zijn.

Bevinding 2: Als bijvoorbeeld onder de knop 'Kaartlagen Natuur' het vinkvakje 'Natuurbeheerplan' aangevinkt is verschijnt er in het legenda venster een aantal afbeeldingen met een kleur of patroon. Voor blinden bevatten de afbeeldingen geen informatie omdat het om een kaart-legenda gaat, een tekst alternatief is dan ook niet nodig. Maar de afbeelding moet wel verborgen zijn voor hulpsoftware, dit kan bijvoorbeeld door aria-hidden=true te plaatsen op het svg-element, bij img-elementen is een leeg alt-attribuut voldoende.

Bevinding 3: In het venster onder het de knop 'Over' staan een afbeeldingen van grafische onderdelen van de website met alternatieve teksten die de afbeeldingen niet goed beschrijven. Bijvoorbeeld het home icoon met de alternatieve tekst '02_home.png' of een voorbeeld van een pop-up met informatie over een object met de alternatieve tekst '03a_popup.png'. Dit zijn informatieve afbeeldingen, pas de alternatieve teksten aan.
Hetzelfde komt vaker voor in de website, bijvoorbeeld onder het de knop 'Externe gegevens toevoegen' tabblad 'Bestand' bij de afbeelding met de alternatieve tekst 'Shapefile'.

Bevinding 4: Opmerking: De afbeelding van de kaart in de PDF die onder de knop 'Afdrukken' gemaakt wordt heeft op dit moment geen beschrijving omdat de PDF geen codelaag heeft. Voor informatieve afbeeldingen geldt dat ze een beschrijving moeten hebben van de informatie die erin staat. Er is een uitzondering op deze regel voor kaarten, maar er zou toch een beschrijving gegeven kunnen worden of de afbeelding kan als decoratief aangemerkt worden. Zorg ervoor dat wanneer de PDF een codelaag krijgt de afbeelding een beschrijving krijgt of decoratief wordt gemaakt.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 5: De knop 'Legenda' opent een venster met legenda gegevens. Als bijvoorbeeld onder de knop 'Kaarten Algemeen' de vinkvakjes 'Provincie Noord-Brabant' en 'Gemeentegrenzen' aangevinkt zijn, staan die titels in het legenda venster. De titels zijn niet opgemaakt als kop maar als een tabel met één data-cel.
Gebruik semantisch correcte opmaak, maak koppen op met het H-element.

Bevinding 6: In het venster 'Over' zijn teksten dikgedrukt gemaakt met het b-element. Het b-element heeft een semantische waarde en geeft aan hulpsoftware aan dat een tekst belangrijk is. Hierdoor leest bijvoorbeeld voorleessoftware deze tekst met nadruk voor. Daarom is het b-element alleen bedoeld om te gebruiken op één of enkele woorden, en niet voor de visuele opmaak van teksten. Verwijder het b-element en maak deze teksten dikgedrukt via CSS.

Bevinding 7: De PDF die onder de knop 'Afdrukken' gemaakt wordt 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 succescriteria met betrekking tot de PDF code laag zoals semantische koppen en alt-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Bevinding 8: Opmerking: De knop 'Legenda' opent een venster met legenda gegevens. Als bijvoorbeeld onder de knop 'Kaartlagen Natuur' het vinkvakje 'Natuurbeheerplan' aangevinkt is verschijnt er in het legenda venster een tabel onder 'Natuurbeheerplan - Beheertypenkaart Natuurtypen' met in kolom 1 afbeeldingen en in kolom 2 natuurtypen. Gebruik tabellen liever niet voor grafische opmaak van een pagina omdat hulpsoftware de tabelstructuur voorleest, of gebruik role=presentation om er zeker van te zijn dat de tabelstructuur verborgen is voor hulpsoftware.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Bevinding 9: In bijvoorbeeld het venster 'Over' wordt verwezen naar elementen aan de hand van hun uiterlijk, bijvoorbeeld 'Door op het pijltje in de rode titelbalk' en 'door op het kruisje te klikken'. Sommige bezoekers kunnen het visuele uiterlijk of kleur van een element niet waarnemen. Daarom mag niet alleen naar een element worden verwezen op basis van uiterlijk, vorm of kleur. Een oplossing voor dit probleem is om ook de toegankelijke naam van het element te benoemen.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 10: Advies: Voor online kaarten en karteringsdiensten geldt een uitzondering. Kaarten hoeven zelf niet verplicht toegankelijk te zijn. Echter als bij het ontwerpen van kaarten rekening wordt gehouden met toegankelijkheid kan een groter aandeel bezoekers bedient worden. Een grote groep van potentiële bezoekers heeft moeite met zien. Deze bezoekers hebben veel baat bij duidelijke contrasten en waar mogelijk een manier van informatie verstrekking die niet uitsluitend afhankelijk is van kleur. Bij complexe informatie zoals onder de knop 'Kaartlagen Natuur' bij het aanvinken van 'Natuurbeheerplan' tevoorschijn komt is een kleurafhankelijke legenda niet te voorkomen, maar er zou bijvoorbeeld meer gebruik gemaakt kunnen worden van arceringen.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 11: Bij het eerste bezoek is er een welkom scherm over de pagina. In Chrome is het contrast tussen de standaard linkkleur (HEX #0000EE) of gevolgde linkkleur (HEX #551A8B) met de grijze achtergrond (HEX #696969) is te laag. De contrastverhoudingen zijn 1,7:1 en 2:1 waar dit minstens 4,5:1 moet zijn. In Firefox hebben deze kleuren (HEX #0066CC) en (HEX #551A8B) de contrastverhoudingen 1,1:1 en 2:1. Geef dit venster een andere achtergrondkleur om dit probleem op te lossen.

Bevinding 12: Bij het eerste bezoek is er een welkom scherm over de pagina met een knop met de tekst 'OK'. Het contrast van deze witte tekst met de lichtblauwe achtergrond (HEX #518DCA) is te laag. De contrastverhouding is 3,5:1 waar dit tenminste 4,5:1 moet zijn.

Bevinding 13: In het zoekveld heeft de grijze placeholder-tekst 'Adres of plaats zoeken' (HEX #999999) Op witte achtergrond een te laag contrast. De contrastverhouding is 2,9:1 waar dit tenminste 4,5:1 moet zijn.

Bevinding 14: De roze tekst 'Toegankelijkheidsverklaring' in de header (HEX #CFA3A3) op rode achtergrond (HEX #DD0000) heeft een te laag contrast. De contrastverhouding is 2,3:1 waar dit tenminste 4,5:1 moet zijn.

Bevinding 15: Onder de knop 'Kaartlagen algemeen' staan een aantal koppen, bijvoorbeeld 'Introductie' en 'Grenzen' in grijze tekst (HEX ##86909C) op een grijze achtergrond (HEX #D9DDE0) met een te laag contrast. De contrastverhouding is 3,4:1 waar dit tenminste 4,5:1 moet zijn. Dit komt op meer plaatsen in de website voor, bijvoorbeeld onder de knop 'Kaartlagen Water'.

Bevinding 16: Onder 'Delen' heeft de lichtblauwe tekst, bijvoorbeeld 'Linkopties' (HEX #24B5CC) op witte achtergrond een te laag contrast. De contrastverhouding is 2,5:1 waar dit tenminste 4,5:1 moet zijn. Dezelfde kleurencombinatie komt vaker voor in de website, bijvoorbeeld onder de knop 'Externe gegevens toevoegen' voor het label van het actieve tabblad.

Bevinding 17: Onder de knop 'Externe gegevens toevoegen' tabblad 'Bestand' staat een afbeelding met een aantal mappen met daarop bestandstypen die in de applicatie geplaatst kunnen worden. Het contrast van de witte teksten op de kleur van de mappen is te laag. Bijvoorbeeld bij de oranje map (HEX #F2BE92) is de contrastverhouding 1,7:1 waar dit tenminste 4,5:1 moet zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Bevinding 18: In het venster onder de knop 'Over' staat een afbeelding met tekst, een voorbeeld van pop-up met informatie over een object. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. De tekst op de afbeelding komt verder niet voor op de pagina. Plaats deze tekst daarom als HTML-tekst op de pagina.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 19: De roze icoontjes, bijvoorbeeld 'Delen' en 'Over' (HEX #FF9999) op donkerrode achtergrond (HEX #DD0000) hebben een te laag contrast. De contrastverhouding is hier 2,5:1 waar het tenminste 3:1 moet zijn. De donker rode icoontjes, bijvoorbeeld 'Kaarten Algemeen' (HEX #580000) op dezelfde rode achtergrond hebben ook een te laag contrast. De contrastverhouding is hier 2,9:1 waar het tenminste 3:1 moet zijn.

Bevinding 20: Onder Icoon 'kaartlagen' staan selectievakjes. De grijze randen van niet aangevinkte vakjes (HEX #999999) en de lichtblauwe aangevinkte vakjes (HEX #00B8CF) hebben een te laag contrast met de witte achtergrond. De contrastverhouding is hier 2,8:1 en 2,4:1 waar het tenminste 3:1 moet zijn.

Bevinding 21: Onder de knop 'Delen' hebben de witte socialmedia icoontje, bijvoorbeeld die van Facebook, op grijze achtergrond (HEX #BFBFBF) een te laag contrast. De contrastverhouding is hier 1,8:1 waar het tenminste 3:1 moet zijn.

Bevinding 22: Onder de knop 'Delen' hebben de randen van de invoervelden (HEX #d9dde0) een te laag contrast met de witte achtergrond. De contrastverhouding is 1,4:1 waar dit tenminste 3:1 moet zijn.

Bevinding 23: Onder de knop 'Externe gegevens toevoegen' is een groene schakelknop 'Binnen kaart...' (HEX #50AD4E) die rood wordt bij uitschakelen (HEX #DD0000) op een lichtgrijze achtergrond (HEX #F8F8F8). Het contrast van de groene knop is te laag. De contrastverhouding is 2,7:1 waar dit tenminste 3:1 moet zijn.

Bevinding 24: Als elementen in de website toetsenbordfocus hebben is dat te zien aan een transparante lichtblauwe rand rond het element. Omdat de rand transparant is past de kleur zich aan aan de achtergrond waardoor het contrast vrijwel altijd te laag is. Bijvoorbeeld op een witte achtergrond is de contrastverhouding van de lichtblauwe rand (HEX ##24B5CC) 2,5:1 waar dit tenminste 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.

Bevinding 25: Onder de knop 'Meting' verschijnt een venster met drie iconen. De eerste twee iconen hebben een te laag contrast. Bijvoorbeeld de lichtbruine afbeelding van een meetlat (HEX #BD986B) op witte achtergrond heeft een contrastverhouding van 2,7:1 waar dit tenminste 3:1 moet zijn.

Bevinding 26: Advies: Voor online kaarten en karteringsdiensten geldt een uitzondering. Kaarten hoeven zelf niet verplicht toegankelijk te zijn. Echter als bij het ontwerpen van kaarten rekening wordt gehouden met toegankelijkheid kan een groter aandeel bezoekers de kaarten gebruiken. Een grote groep van potentiële bezoekers heeft moeite met zien. Deze bezoekers hebben veel baat bij duidelijke contrasten. Bij complexe informatie zoals onder de knop 'Kaartlagen Natuur' bij het aanvinken van 'Natuurbeheerplan' tevoorschijn komt is een kleurafhankelijke legenda niet te voorkomen, maar er is hier een kleurenselectie mogelijk met een groter contrast ten opzichte van de achtergrond van de kaart.

2. Bedienbaar

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 27: De titel van de pagina is 'Kaartbank', het is niet duidelijk dat dit over Noord-Brabant gaat.

Bevinding 28: De PDF die onder de knop 'Afdrukken' gemaakt wordt heeft geen documenttitel in de eigenschappen. Zorg voor een titel die de inhoud van het document beschrijft en dat niet de bestandsnaam maar de titel van het document wordt getoond.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Bevinding 29: In de eigenschappen van PDF die onder de knop 'Afdrukken' gemaakt wordt is de taal niet ingevuld. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 30: Advies: Als de taalinstelling van de browser op Engelstalig staat dan passen de teksten van sommige knoppen op de website zich daaraan aan. Bijvoorbeeld de knop 'Tekenen' wordt 'Draw' en opent een venster met de titel 'Draw'. Hulpsoftware leest deze tekst met Nederlandse uitspraak. Zorg ervoor dat de teksten niet van taal veranderen of geef een taalwisseling aan. Dit kan door de omliggende html-code een lang="en" toe te voegen.

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 31: De toegankelijke naam van de inzoom widget is: "ZoomSlider. Druk op Enter om de focus binnen deze widget te plaatsen. Als de focus binnen is, druk dan op Esc om weer op de widget te focussen." Het beschrijving 'Zoomslider' van de widget is niet duidelijk, geef een duidelijke Nederlandstalig label. Hetzelfde geldt voor 'Search'.

Bevinding 32: Dit kan mogelijk een technisch probleem zijn:
Onder de knop 'Afdrukken' opent een venster. Hierin zijn de labels 'Kaarttitel', 'Lay-out' en 'Opmaak' niet geassocieerd met het bijbehorende invoerveld. Tekst labels moeten gekoppeld worden aan invoervelden door gebruik te maken van het for-attribuut bij het label-element die verwijst naar een id-attribuut bij het invoerveld. Zo krijgt een bezoeker die gebruik maakt van een screenreader direct te horen om welk veld het gaat als direct naar het invoerveld wordt gesprongen.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 33: Dit kan mogelijk een technisch probleem zijn:
Onder de knop 'Afdrukken' opent een venster. Hierin zijn de labels 'Kaarttitel', 'Lay-out' en 'Opmaak' niet geassocieerd met het bijbehorende invoerveld waardoor deze geen toegankelijke naam hebben. Tekst labels moeten gekoppeld worden aan invoervelden door gebruik te maken van het for-attribuut bij het label-element die verwijst naar een id-attribuut bij het invoerveld. Zo krijgt een bezoeker die gebruik maakt van een screenreader direct te horen om welk veld het gaat als direct naar het invoerveld wordt gesprongen. Hetzelfde komt vaker voor in de website, bijvoorbeeld onder de knop 'Delen' bij het veld 'Zoek de locatie of functie en zoom erop in' en selectievakjes in het venster 'Kaartlagen Algemeen'.

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

• One-pager:
  https://noord-brabant.maps.arcgis.com/apps/webappviewer/index.html?id=b6414403ef5e4e9aa8875a7c366209c6
• PDF (Afdrukken):
  https://utility.arcgisonline.com/arcgis/rest/directories/arcgisoutput/Utilities/PrintingTools_GPServer/x_____xnc8MobAxP9aimjKP4PJmvA..x_____x_ags_6bf8e8e5-ab09-11ee-ad5f-0afa9f6e927d.pdf

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• ECMAScript 5
• DOM
• SVG
• PDF

Bronnen

• Evaluatiedocument WCAG 2.0
  www.drempelvrij.nl/over-het-waarmerk
• Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
  www.w3.org/Translations/WCAG20-nl
• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.