Issues:
Audit digitale toegankelijkheid website Grafzoeker

(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 Centric in de footer heeft geen alt-attribuut. Het alt-attribuut is verplicht voor zowel decoratieve als informatieve afbeeldingen. Dit is een informatieve afbeelding dus het alt-attribuut moet ook nog een waarde bevatten, de zogeheten alt-tekst. Voeg het alt-attribuut toe en verzorg alt-tekst voor het logo. Hou rekening dat de alternatieve tekst het woord ‘logo’ en alle tekst die op de afbeelding te zien is moet bevatten.

Bevinding 2: De status van een graf (in gebruik, geblokkeerd, gereserveerd, grafrechten verlopen,...) is enkel via de kaart af te lezen, wat impact heeft op bezoekers die blind zijn. Zorg dat alle informatie die men uit de kaart kan krijgen, een toegankelijk alternatief heeft.

Bevinding 3: De afbeelding waarop de kaart te zien is, heeft geen alternatieve tekst. Daardoor is voor bezoekers die niet kunnen zien niet bekend dat zich hier een kaart bevindt. Los dit op door een alternatieve tekst toe te voegen.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 4: Als men een resultaat in het zoekscherm heeft gekozen en terugkeert naar de applicatie, worden de gegevens van de persoon en het graf weergegeven. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader is het lastig om de structuur van de informatie te begrijpen. Alle gegevens worden achter elkaar voorgelezen. Dit komt doordat de visuele opmaak niet in de HTML code terugkomt. Los dit bijvoorbeeld op door dit op te maken als een description list (dl-, dt-, dd-element).

Bevinding 5: Als een overledene is opgezocht via het zoekscherm, zijn de gegevens op de pagina te zien. Visueel zijn de teksten 'Begraafplaats:...', 'Overledene:...' en 'Ook in dit graf' te herkennen als koppen. Als iets eruit ziet als een kop en zich gedraagt als een kop, dient het ook als een kop opgemaakt te worden. Het overbrengen van . Los dit op door de teksten op te maken als koppen op het juiste kopniveau.

Bevinding 6: Advies: onder de kaart in de applicatie bevindt zich een balk met o.a. de schaalvermelding en twee knoppen. De inhoud van de balk is in een tabel ondergebracht. Het gebruik van een tabel voor lay-out is geen inbreuk, maar het beste is om tabellen enkel te gebruiken om data weer te geven. Gebruik CSS voor de opmaak en positionering van de balk en de elementen die het bevat. Een role=presentation gebruiken op de deze tabel is ook een mogelijkheid.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Bevinding 7: De status van een graf (in gebruik, geblokkeerd, gereserveerd, grafrechten verlopen,...) is alleen af te leiden uit visuele informatie zoals de kleur en locatie, wat impact heeft op bezoekers die blind zijn. Zorg dat alle informatie die men uit de kaart kan krijgen, een toegankelijk alternatief heeft en niet enkel leunt op het kunnen zien.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 8: De legenda van de grafstatus in de applicatie communiceert de status van een graf enkel in kleur (zodra een graf van een specifiek persoon in de kaart is aangeduid verdwijnt zelfs het grafnummer). Dit heeft impact op kleurenblinden. Gebruik een patroon naast de kleur om de legenda en de aanduidingen van de grafstatus op de kaart toegankelijker te maken.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 9: In de applicatie zijn er knoppen om in en uit te zoomen op de kaart. Deze bieden echter onvoldoende contrast. De tekens (HEX #B7BED8) hebben een contrastverhouding van 1,8:1 met de achtergrondkleur (wit) van de knop. Dit moet minstens 4,5:1 zijn. Pas de kleur van de leestekens aan.

Bevinding 10: De grafnummers op de kaart hebben onvoldoende contrast: de groene tekst (HEX #006622) op de groene (HEX #2DA954) achtergrond geeft een contrastverhouding van 2,4:1 waar het minstens 4,5:1 moet zijn. Vermijd ook enige vorm van transparantie in de tekst.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 11: In de applicatie staat in de HTML-code bij meta name="viewport" de volgende instellingen: "maximum-scale=1". Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat dit attribuut weg.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 12: Bij het gebruik van de applicatie in portretmodus (zonder vergroten van de tekst) kan men, als men het zoekscherm sluit, niet meer terug het zoekscherm oproepen. In landschapsmodus heeft de applicatie namelijk een knop beschikbaar om het zoekvenster te openen. Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% is dit ook het het geval. Daarnaast (bij een schermgrootte van 1280x1024px en inzoomen tot 400%) valt er content buiten beeld, zoals bijvoorbeeld de inhoud van keuzelijsten bij het zoekscherm). Zorg dat in alle gevallen de content meeschaalt en zich aanpast aan het vergroten van tekst en aanpassen van de viewport en dat alle opties in de applicatie werken en bereikbaar plus bedienbaar zijn.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 13: In de applicatie is er een knop met een lichtgrijze pijl die het paneel voor kaartlagen opent. De pijl (HEX #B7BED8) hebben een contrastverhouding van 1,8:1 met de achtergrondkleur (wit) van de knop. Dit moet minstens 3:1 zijn. Pas de kleur van de pijl aan. Hetzelfde geldt voor de geselecteerde checkboxen in het paneel als deze geopend is en de pijltjes voor de checkboxen om uit te klappen. Deze hebben dezelfde kleur lichtgrijs, wat dezelfde lage contrastverhouding oplevert. Ook daar moet het minimaal 3:1 zijn.

Bevinding 14: Als men een zoekopdracht heeft uitgevoerd en daar een persoon heeft geselecteerd, wordt het graf volledig rood (HEX #FF0000) gemarkeerd. Dit heeft onvoldoende contrast met de groene (HEX #2DA954) graven eromheen, het zorgt voor een contrastverhouding van 1,3:1 waar het minimaal 3:1 moet zijn. Gerelateerd advies: als de andere kleuren voor de status van een graf (zoals te zien in het paneel Kaartlagen) ook in de kaart gebruikt gaan worden, dient men te zorgen dat die kleurencombinaties ook voldoende contrast hebben.

Bevinding 15: Advies: de lijnen tussen de graven hebben onvoldoende contrast, waardoor voor sommige bezoekers niet goed te onderscheiden is waar de graven zich bevinden. Bij bijvoorbeeld de groene (HEX #2DA954) graven zorgt de lijnen (#HEX #089B38) voor een contrastverhouding van 1,2:1 waar het mininaal 3:1 moet zijn. Hoewel door de grafnummers de locatie gecommuniceerd wordt, kunnen de lijnen behulpzaam zijn voor bezoekers.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 16: De applicatie heeft een knop om een paneel voor de kaartlagen te openen. Deze knop is echter niet bedienbaar met het toetsenbord, omdat er een div-element (div class="layerPanelHideButton" style="display: block;")wordt gebruikt in plaats van een button-element. Vervang de div door een button-element. Dit geldt ook voor de pijlen in het uitgeklapte paneel om bepaalde kaartlagen verder uit te klappen.

Bevinding 17: In het paneel voor kaartlagen zijn er checkboxen aanwezig. Deze zijn ook niet bedienbaar met het toetsenbord, De checkboxen zijn niet bedienbaar, omdat deze in de CSS uit de DOM worden verwijderd met visibility:hidden. Als een gestylde checkbox de voorkeur heeft boven de native checkbox, is het belangrijk de cliptechniek te gebruiken om de native checkbox (die achter de gestylde zit) buiten beeld te plaatsen. Hierdoor ontvangt hij wel focus en is deze te bedienen met het toetsenbord. Een andere oplossing is gewoon de native checkbox te gebruiken.

Bevinding 18: In het zoekscherm zijn de zoekresultaten niet bedienbaar met het toetsenbord, enkel met de muis is de fiche van een persoon te openen. Dit heeft impact op bezoekers die navigeren via het toetsenbord. Dit komt omdat er geen interactief element gebruikt is. Gebruik een link of knop bij ieder resultaat, zodat alle fiches in de resultaten bedienbaar worden.

Bevinding 19: In het zoekscherm is de sluitknop niet te bedienen met het toetsenbord. Dit komt omdat er geen gebruik wordt gemaakt van het button-element. Dit heeft impact op bezoekers met een screenreader of bezoekers die spraakbesturing nodig hebben. Gebruik het button-element voor de sluitknop om dit op te lossen.

2.4 Navigeerbaar

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 20: Als men de applicatie opent, heeft men meteen een zoekscherm beschikbaar. De focus blijft echter enkel in dit zoekscherm en niet op de achterliggende website. Een buitenlandse bezoeker met hulptechnologie kan hierdoor niet bij de taalkeuzes komen en de taal aanpassen. Laat de applicatie openen zonder het zoekscherm, zodat een bezoeker de taal kan aanpassen en dan het zoekvenster kan openen met de beschikbare knop in de applicatie.

Bevinding 21: Advies: Als men een persoon/fiche kiest uit de zoekresultaten in het zoekscherm wordt het zoekscherm gesloten en keer je terug naar de applicatie, waar de gegevens van die persoon geladen zijn. Maar de focus wordt verplaatst naar de browser. Omdat de content van de pagina is vernieuwd, wordt deze verplaatsing van de focus niet afgekeurd onder dit succescriterium. Toch kan het voor de bezoeker een logischer focusvolgorde opleveren als de focus verplaatst wordt naar de titel "Begraafplaats: [naam van de begraafplaats]".

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 22: Als men in de applicatie een andere taal kiest, wordt de tekst vertaald, maar blijft de taal van het HTML-document op Nederlands staan. Het is belangrijk dat ook programmatisch de taal wordt aangepast. Zorg voor de juiste taalcodering in de HTML zodat hulpsoftware de tekst op correcte wijze voorleest als er een andere taal is gekozen.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 23: In het zoekscherm heeft de knop om de kalender te openen bij het veld overlijdensdatum, het label "Open calender". In de kalender zelf hebben de knoppen om de maand en jaar te kiezen en de knoppen om naar de vorige of volgende maand (of jaar) te gaan ook Engelstalige labels. Dit heeft impact op bezoekers die spraakbesturing gebruiken. Vertaal deze labels naar het Nederlands.

Bevinding 24: In het zoekscherm staat bij de lijst om het aantal weer te geven zoekresultaten per pagina aan te passen, de tekst "Results per page". Vertaal dit naar het Nederlands.

Bevinding 25: Op de kaart is een knop aanwezig om je locatie in te schakelen. Het label "Location" is Engelstalig. Vertaal dit naar het Nederlands.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 26: Op https://grafzoeken.nl/ hebben de knoppen om een taal te kiezen, geen label. Labels zijn belangrijk voor bezoekers met een screenreader om te begrijpen wat een knop gaat doen en wat de context is. Ook voor bezoekers die spraakbesturing gebruiken is het belangrijk dat knoppen een label hebben, zodat ze deze kunnen activeren met hun stem. Geef deze knoppen een label met tekst tussen <button> en </button>. Met de CSS clip techniek kan men de tekst visueel verbergen, maar programmatisch behouden voor hulpsoftware.

Bevinding 27: In de applicatie zijn er knoppen om in en uit te zoomen op de kaart. Deze hebben als label "+" en "-". Deze zijn niet beschrijvend genoeg voor bezoekers met screenreaders of spraakbesturing. Voeg een aria-label attribuut toe aan de knoppen dat als waarde geeft "Inzoomen" en "Uitzoomen". Om technisch te voldoen aan criterium 3.1.2 verwijder de Engelse tekst in het title-attribuut.

Bevinding 28: In het zoekscherm heeft de sluitknop geen label. Dit heeft impact op bezoekers met een screenreader of bezoekers die spraakbesturing nodig hebben. Zorg dat de knop een label krijgt.

Bevinding 29: In het zoekscherm zijn er knoppen om naar de volgende of vorige pagina zoekresultaten te gaan. Er zijn ook knopen om naar de eerste en laatste pagina met zoekresultaten te gaan. Al deze knoppen hebben echter geen label. Dit heeft impact op bezoekers met een screenreader of bezoekers die spraakbesturing nodig hebben.

Bevinding 30: Het invoerveld ‘Overlijdensdatum’ in het zoekscherm heeft als attribuut ariahaspopup=”dialog”, waardoor wordt voorgelezen dat dit invoerveld een dialoogvenster opent. Dit klopt niet. Verwijder het attribuut van het invoerveld.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 31: Als men in het zoekscherm een zoekopdracht uitvoert, verschijnen resultaten onder het zoekformulier. Dit wordt niet gecommuniceerd naar screenreaders. Verzorg een kop boven de zoekresultaten en zet daar een live region op om dit op te lossen, of zorg dat focus naar eerste zoekresultaat gaat.

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

• Applicatie:
  https://grafzoeken.nl/#/

Ondersteunende technieken

• HTML5
• CSS
• DOM
• ECMAScript 5
• SVG

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.