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/ wordt gekozen voor de optie 'Erkenning kind' zijn bij stap 2 verschillende zinnen te zien die visueel te herkennen zijn als tekst die niet in een lijst staat, bijvoorbeeld 'Is het kindje nog niet geboren?'. In HTML is de tekst met het strong-element opgemaakt. Het strong-element is bedoeld om één woord of enkele woorden te benadrukken, maar niet om een tekst visueel anders te stylen. Er zijn verschillende oplossingen mogelijk. Een daarvan is om deze teksten op te maken met h3-elementen in plaats van strong. Een soortgelijk probleem doet zich op meerdere plekken voor bij stap 2, bijvoorbeeld bij keuze-optie 'Hervestiging vanuit het buitenland' en 'Hulp bij invullen (digitale) aanvragen individuele Studietoeslag'.

Bevinding 2: Bij stap 2 van keuze-optie 'Parkeervergunning Aanvragen' op pagina https://sudwestfryslan.mijnafspraakmaken.nl/ is de introtekst onder de kop 'Parkeervergunning Aanvragen' dikgedrukt gemaakt met het strong-element. Het strong-element is niet bedoeld om een hele introtekst mee te stylen, maar alleen om één woord of enkele woorden te benadrukken. Maak de tekst op andere wijze op, bijvoorbeeld door het strong-element te verwijderen en de tekst te stylen met behulp van de eigenschappen van de CSS.

Bevinding 3: 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 4: Bij stap 2 nadat op pagina https://sudwestfryslan.mijnafspraakmaken.nl/ is gekozen voor 'Paspoort afhalen', is een opsomming van drie items te zien. Deze opsomming is niet op de juiste manier opgemaakt, waardoor voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader onduidelijkheid kan ontstaan over de structuur van de content. Opsommingen moeten worden opgemaakt als lijst, waarbij een lijst-item wordt opgemaakt met het li-element en de lijst-items gegroepeerd worden in een lijst met het (in het geval van een ongeordende lijst zoals op deze pagina) ul-element. Op die manier wordt door hulpsoftware voorgelezen dat zich hier een lijst met drie items bevindt, waarna de afzonderlijke items voorgelezen worden. Pas de opmaak van de opsomming aan in HTML. Ditzelfde komt voor bij stap 2 na keuze-optie 'Ondersteuningsverklaring'.

Bevinding 5: Na het kiezen voor optie 'Hulp bij invullen (digitale) aanvragen Individuele Inkomenstoeslag' op pagina https://sudwestfryslan.mijnafspraakmaken.nl/, is bij stap 2 ('Benodigdheden') een opsomming te vinden. Deze opsomming is in HTML niet op correcte wijze opgemaakt. Het lijst element ('ul') mag alleen lijst-items ('li') als directe child-elementen bevatten. Het vierde item in de lijst bevat echter een sublijst die als child-element van het ul-element is opgemaakt met het ul-element. Door hulpsoftware wordt de totale lijst hierdoor voorgelezen als 'lijst met negen items', terwijl de lijst acht items heeft. Ook wordt bij de sublijst niet goed voorgelezen dat dit een sublijst van het vierde lijst-item is. De structuur van de lijst is hierdoor onduidelijk voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader. Los dit op door de sublijst (ul-element met vier li-elementen) binnen het vierde lijst-item (li-element) te plaatsen. Een soortgelijk probleem doet zich op meerdere plekken voor, bijvoorbeeld bij stap 2 van 'Hulp bij invullen (digitale) aanvragen Minima en Kindpakket' en 'Hulp bij invullen (digitale) aanvragen bijzondere bijstand'.

Bevinding 6: 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 7: Bij stap 4 ('Datum en tijd') is een tabel te zien waarin de eerste kolom (onder de heading 'Dag') bestaat uit keuzerondjes waarbij de betreffende dag en datum staan. Bijvoorbeeld 'Maandag 11 maart'. Voor bezoekers die kunnen zien, is de relatie tussen de keuzerondjes en de specifieke datum duidelijk. Voor bezoekers die niet kunnen zien en die gebruik maken van hulpsoftware zoals een screenreader, is dit niet duidelijk wanneer zij via de browse modus door de tabel heen gaan. Dat komt doordat hulpsoftware de tekst 'Dag' voorleest als label bij elk keuzerondje. De keuzerondjes zijn via een aria-labelledby attribuut gekoppeld aan de tabelkop 'Dag'. Als via de tabtoets de focus naar een keuzerondje wordt gebracht wordt de bijbehorende datum wel goed voorgelezen, maar als de bezoeker eerst de hele tabel wil doorlopen (via de browse modus) voordat een keuze wordt gemaakt gaat dit niet goed. Zorg ervoor dat de juiste informatie wordt voorgelezen bij het juiste keuzerondje. Los dit bijvoorbeeld op door het aria-labelledby attribuut te koppelen aan de dag en datum die visueel bij het keuzerondje te zien zijn. Zie succescriterium 2.5.3.

Bevinding 8: 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.

Bevinding 9: Advies: Na het kiezen voor optie 'Hulp bij invullen (digitale) aanvragen Individuele Inkomenstoeslag' op pagina https://sudwestfryslan.mijnafspraakmaken.nl/, is bij stap 2 ('Benodigdheden') een opsomming te vinden. Hierin hebben de eerste drie items een andere styling dan de overige items. Voor sommige bezoekers die kunnen zien kan dit verwarrend werken, omdat hierdoor de indruk kan ontstaan dat de eerste drie items van andere aard zijn dan de andere items. Omdat in de praktijk niet te verwachten is dat hierdoor problemen ontstaan voor bezoekers die kunnen zien (de tekst is inhoudelijk duidelijk genoeg), wordt dit niet op toegankelijkheid afgekeurd. Toch zou het de begrijpelijkheid van de lijst ten goede komen als het lettertype bij elk item hetzelfde is. Los dit bijvoorbeeld op door het font-element te verwijderen en voor de styling van de gehele lijst gebruik te maken van de eigenschappen van de CSS. Een soortgelijk probleem komt op meerdere plekken voor in stap 2, bijvoorbeeld bij 'Hulp bij invullen (digitale) aanvragen Individuele Studietoeslag'.

Bevinding 10: Advies: Bij stap 2 na het kiezen van 'Uittreksel Burgerlijke Stand' is in HTML een ul-element te vinden die geen lijst-items ('li') bevat, maar alleen een span-element. Dit gaat niet om de opsomming die zichtbaar is op de pagina, die heeft wel een ul met li-elementen, maar om de overige ul-elementen op deze pagina. Doordat deze onjuiste code genegeerd wordt door hulpsoftware wordt dit niet afgekeurd, maar het advies is om dit wel op te lossen. Een soortgelijk probleem doet zich voor bij keuze-optie 'Bewijs van in leven zijn', waar de lijst (ul-element) behalve lijst-items (li-element) ook een 'o:p'-element bevat.

2. Bedienbaar

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 11: 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 12: 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'.

Bevinding 13: Door op pagina https://sudwestfryslan.mijnafspraakmaken.nl/ bij ‘Stap 4 - Datum en tijd’ gebruik te maken van het aria-labelledby attribuut, voldoen de keuzerondjes in de eerste kolom van de tabel niet aan de eisen van dit succescriterium. Met name voor bezoekers die gebruik maken van spraaksoftware is het belangrijk dat de tekst die vlak naast het keuzerondje staat, in de toegankelijke naam voorkomt (het liefst vooraan). Door het gebruik van aria-labelledby is de toegankelijke naam van elk van die keuzerondjes nu ‘Dag’. Een mogelijke oplossing is om het aria-labelledby attribuut op de input-elementen in de eerste kolom weg te halen. De toegankelijk naam van de keuzerondjes wordt dan weer de tekst die in het label-element staat.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 14: 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 15: 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 16: 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.