Issues:
Content audit digitale toegankelijkheid website afspraak maken gemeente Súdwest-Fryslân

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 1: Als op pagina https://sudwestfryslan.mijnafspraakmaken.nl/ de optie 'Gezondheidsverklaring' wordt gekozen, is bij stap 2 ('Benodigdheden') de kop 'Gezondheidsverklaring' te zien. Bij deze kop, die is opgemaakt op kopniveau h2, staat geen content. Bezoekers die gebruik maken van hulpsoftware zoals een screenreader kunnen de koppenstructuur opvragen en op die manier over de pagina navigeren. De functie van een kop is dat het de bijbehorende content goed beschrijft, waardoor de structuur van de pagina duidelijk is en efficiënt genavigeerd kan worden. Zonder deze content heeft de kop niet de functie die bij een kop verwacht wordt. Los dit op door de tekst op andere wijze op te maken (bijvoorbeeld als gewone tekst waarbij voor de styling gebruik gemaakt wordt van de eigenschappen van de CSS), of door content op de pagina toe te voegen onder de kop. Als de bezoeker niets mee hoeft te nemen naar dit type afspraak, kan er bijvoorbeeld voor gekozen worden om net als bij keuze-optie 'Hulp bij invullen (digitale) aanvragen Mantelzorgwaardering' een tekst zoals 'Je hoeft voor deze afspraak niets mee te nemen' toe te voegen.

Bevinding 2: Bij stap 4 ('Datum en tijd') is een tabel op de pagina te vinden. De vetgedrukte datum in de eerste kolom (bijvoorbeeld 'Maandag 11 maart') is niet op de juiste manier gekoppeld aan de datacellen in de tabelrij. Daardoor is voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader de relatie tussen de selecteerbare datum en de overige datacellen in de rij (bijvoorbeeld de cel waarin een tijdkeuze kan worden gemaakt) niet duidelijk. Op de betreffende tabelcel is nu scope="row" gebruikt. Dit attribuut werkt niet op een td-element, maar wel op een th-element. Een mogelijke oplossing is om dit td-element om te zetten in een th-element.

Bevinding 3: Bij stap 6 ('Samenvatting') is onder de kop 'Afspraakgegevens' een opsomming te zien van de door de bezoeker geselecteerde en ingevulde gegevens. Doordat elk item uit deze opsomming in HTML is opgemaakt als aparte lijst (ul-element) met één lijst-item (li-element), is de structuur van de opsomming voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader niet duidelijk. Bij elk item wordt voorgelezen dat zich hier een lijst met één item bevindt, waarna het item wordt voorgelezen. Maak de opsomming op andere wijze op, bijvoorbeeld door alle items op te maken als lijst-items (met het li-element) binnen één lijst die is opgemaakt met het ul-element.

2. Bedienbaar

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 4: De paginatitel van de pagina https://sudwestfryslan.mijnafspraakmaken.nl/ verandert mee met de naam van elke stap. De paginatitel moet altijd het onderwerp of doel beschrijven. Dat doel is hier het maken van een afspraak bij Gemeente Súdwest-Fryslân. Het probleem zit onder andere in stap 3. Daar is de paginatitel ‘Locatie | Gemeente Súdwest-Fryslân’. Die titel geeft de suggestie van een pagina waarop de locatie van de gemeente als geheel duidelijk wordt gemaakt. Een soortgelijke argumentatie kan ook gemaakt worden voor de paginatitels ‘Datum en tijd | Gemeente Súdwest-Fryslân’ en ‘Samenvatting | Gemeente Súdwest-Fryslân’. Het advies is dan ook om altijd de tekst ‘afspraak maken’ in de paginatitel te laten staan. De huidige paginatitel heeft de vorm ‘[wisselende tekst] | Gemeente Súdwest-Fryslân’. Deze zou aangepast kunnen worden naar ‘[wisselende tekst] | Afspraak maken bij Gemeente Súdwest-Fryslân’. Op die manier is altijd helemaal duidelijk dat de gebruiker in de afspraak module van de Gemeente Súdwest-Fryslân zit.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 5: Als alle stappen om een afspraak te maken zijn doorlopen, komt een pagina in beeld waarop de gegevens van de afspraak terug te lezen zijn onder de kop 'Mijn afspraak'. Hierbij staat een uitvouwbaar keuzemenu waarin de bezoeker uit een aantal acties kan kiezen. In dit keuzemenu is de tekst 'Acties' te zien als label, maar voor hulpsoftware is de naam van het keuzemenu 'Options'. Dit komt door het aria-label met de tekst 'Options'. Voor bezoekers die gebruik maken van spraaksoftware, kan het hierdoor lastig zijn om de functionaliteit van het keuzemenu aan te spreken en te bedienen. Zorg ervoor dat de toegankelijke naam overeenkomt met de tekst die op de pagina zichtbaar is bij het keuzemenu, bijvoorbeeld door de tekst van het aria-label te wijzigen naar 'Acties'.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 6: Advies: Als alle stappen om een afspraak te maken zijn doorlopen, komt een pagina in beeld waarop de gegevens van de afspraak terug te lezen zijn onder de kop 'Mijn afspraak'. Hierbij staat een uitvouwbaar keuzemenu waarin de bezoeker uit een aantal acties kan kiezen. Dit keuzemenu heeft via een aria-label de naam 'Options' gekregen. Voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader en die geen Engels spreken, kan deze Engelstalige tekst onduidelijk zijn. De taal van de pagina is Nederlands, daarom is het beter om voor een Nederlandstalige term te kiezen bij het aria-label. Het Engelse woord verschilt niet veel verschilt van het Nederlandse woord 'Opties' waardoor dit in de praktijk weinig problemen zal opleveren, en daarnaast is het om aan succescriterium 2.5.3 te voldoen nodig om de tekst van het aria-label aan te passen. Daarom wordt dit niet afgekeurd onder dit succescriterium. Zie succescriterium 2.5.3.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 7: Als bij stap 5 ( 'Jouw gegevens') het veld 'Telefoonnummer*' niet wordt ingevuld en het formulier wordt verstuurd, verschijnt een foutmelding bij het veld. De tekst 'Vul een waarde in voor 'Telefoonnummer' of 'Mobiel nummer', Dit is een verplicht veld' bevat een suggestie voor het oplossen van het probleem, maar de tekst maakt onvoldoende duidelijk wat er fout is gegaan. Vul de tekst van de foutmelding aan, bijvoorbeeld met de tekst 'Het veld 'Telefoonnummer' is leeg'. De tekst 'Dit is een verplicht veld' kan verwijderd worden, omdat de bezoeker kan kiezen tussen de velden 'Telefoonnummer' en 'Mobiel nummer' en het verplicht is één hiervan in te vullen (het kan verwarrend zijn als bij beide velden de tekst 'Dit is een verplicht veld' in de foutmelding staat). Ditzelfde geldt voor het invoerveld 'Mobiel nummer'.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 8: Advies: Als op pagina https://sudwestfryslan.mijnafspraakmaken.nl/ een keuze-optie wordt geselecteerd (bijvoorbeeld 'Aangifte geboorte') verschijnt bij stap 1 de mogelijkheid om het aantal personen te selecteren waarvoor de afspraak wordt gemaakt, en de knop 'Verwijderen' waarmee de keuze verwijderd worden. Bezoekers die gebruik maken van hulpsoftware zoals een screenreader krijgen bij deze knop alleen de tekst 'Verwijderen' te horen, uit deze tekst wordt niet gelijk duidelijk bij welke keuze-optie de knop hoort. Omdat dit wel af te leiden is aan de context waarin de knop geplaatst is, wordt dit niet op toegankelijkheid afgekeurd. Wel zou het, zeker wanneer meerdere keuze-opties geselecteerd zijn en er dus meerdere knoppen met de tekst 'Verwijderen' op de pagina staan, het navigeren kunnen vergemakkelijken als aan de knoppen een label wordt toegevoegd waarin een tekst staat die duidelijk maakt waar de knop bij hoort. Voeg bijvoorbeeld een tekst toe die alleen zichtbaar is voor hulpsoftware.

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

• Afspraak maken (begin van proces):
  https://sudwestfryslan.mijnafspraakmaken.nl/

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• ECMAScript 5
• DOM
• 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.