Issues:
Audit digitale toegankelijkheid website Storing melden LMS

(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: In de header op pagina https://lmsapp.nl/report/outage/terschelling staat het logo van LMS. Dit logo heeft geen alternatieve tekst, waardoor bezoekers die het scherm niet kunnen zien niet weten dat hier een logo staat. Ook is het logo opgemaakt als link en zonder alternatieve tekst voor het logo heeft de link ook geen toegankelijke naam (zie succescriterium 2.4.4. en 4.1.2). Zorg ervoor dat er een alternatieve tekst aanwezig is voor het logo, bijvoorbeeld 'Logo LMS'. Dit kan bijvoorbeeld door gebruik te maken van een aria-label op het a-element of door een visueel verborgen tekst op de pagina te plaatsen.

Bevinding 2: Bij elke stap in het proces op pagina https://lmsapp.nl/report/outage/terschelling staat een kaart die is geplaatst via een canvas-element. Deze kaart heeft geen alternatieve tekst. Geef deze kaart een beschrijvende alternatieve tekst, bijvoorbeeld 'Kaart van Nederland waarop alle lichtmasten op Terschelling zijn aangegeven'. Dit kan bijvoorbeeld via een aria-label op het canvas-element, dan moet ook een role=img worden gebruikt.

Bevinding 3: In de kaart bij onder andere stap één op pagina https://lmsapp.nl/report/outage/terschelling staan twee knoppen om mee in en uit te zoomen. Deze knoppen zijn gelabeld met een + en -. Er is een title attribuut aanwezig, maar dat wordt overschreven omdat + en - zijn gebruikt. Voor deze iconen is daarom geen alternatieve tekst aanwezig. Hierdoor is het voor gebruikers van hulpsoftware moeilijk te bepalen wat deze knoppen doen. Zorg ervoor dat er een alternatieve tekst aanwezig is voor deze iconen. Dat mag bijvoorbeeld door gebruik te maken van een aria-label op het button-element.

Bevinding 4: Wanneer bezoekers bij stap drie op pagina https://lmsapp.nl/report/outage/terschelling een bestand hebben geüpload, verschijnt er een knop waarmee bezoekers het bestand weer kunnen verwijderen. Deze knop is gelabeld met een vuilnisbakicoon. Er is geen alternatieve tekst voor dit icoon aanwezig. Zorg ervoor dat er een alternatieve tekst voor het icoon aanwezig is en deze dezelfde informatie overbrengt als dat het icoon visueel doet. Dat kan bijvoorbeeld door gebruik te maken van een aria-label.
Dit geldt ook voor het vinkje dat visueel aanwezig is als een bestand succesvol is geüpload.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 5: Op pagina https://lmsapp.nl/report/outage/terschelling wordt visueel duidelijk aangegeven waar bezoekers zich bevinden in het proces doordat de '1' een andere kleur heeft. Deze informatie is niet beschikbaar voor bezoekers die het scherm niet kunnen zien en gebruikmaken van hulpsoftware. Zorg ervoor dat deze visuele informatie ook aanwezig is in de code, bijvoorbeeld door gebruik te maken van aria-current=step. Dit moet worden toegepast bij elke stap in het proces.

Bevinding 6: Bij stap één op pagina https://lmsapp.nl/report/outage/terschelling staan twee invoervelden met het visuele label 'Zoek adres of plaatsnaam'. Deze invoervelden hebben geen toegankelijke naam (zie succescriterium 4.1.2), maar ook geen label voor hulpsoftware. Er is visueel bij beide velden een label aanwezig, maar dit visuele label is verborgen voor hulpsoftware door middel van aria-hidden=true. Ook staat er nog een label-element bij de invoervelden, die elementen zijn gekoppeld aan de input-elementen van het invoervelden. Het tweede label element is zowel visueel als voor hulpsoftware verborgen door het gebruik van de CSS eigenschap visibility: hidden;. Op deze manier zijn beide labels verborgen voor hulpsoftware en hebben de invoervelden geen label en geen toegankelijke naam. Zorg ervoor dat één van de twee labels zichtbaar is voor hulpsoftware. Het beste zou zijn om dit label ook te koppelen aan het input-element van het bijbehorende veld zodat het een toegankelijke naam heeft.

Bevinding 7: Wanneer bezoekers in het proces op pagina https://lmsapp.nl/report/outage/terschelling bij stap twee zijn, is de kop 'Geselecteerde items' zichtbaar. Deze kop is alleen opgemaakt met het strong-element. Hiervoor is het element niet geschikt. Zorg ervoor dat deze kop wordt opgemaakt met een kop-element (bijvoorbeeld een h2-element) en verwijder het strong-element van de tekst.
Dit probleem komt ook voor bij de naam van een lichtmast als een item op de kaart is geselecteerd en in het venster dat geopend kan worden bij stap twee via de knop 'Bekijk status'. Ook staat bij stap drie de kop 'Houd me op de hoogte' die niet is opgemaakt met een kop-element.

Bevinding 8: Bij stap twee op op pagina https://lmsapp.nl/report/outage/terschelling kunnen bezoekers een dialoog openen met de knop 'Bekijk status'. Het dialoog dat verschijnt wordt niet opgemerkt door hulpsoftware. Zorg ervoor dat hulpsoftware de verschenen content opmerkt. Dit kan bijvoorbeeld door toetsenbordfocus te plaatsen op de hele dialoog of in de dialoog zodra het verschijnt. Als focus wordt geplaatst op de hele dialoog maak dan gebruik van een tabindex=-1 zodat het dialoog niet in de focus volgorde voorkomt.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 9: Wanneer bezoekers bij stap drie op pagina https://lmsapp.nl/report/outage/terschelling het selectievakje 'Houd me op de hoogte' hebben aangevinkt, verschijnen er invoervelden die vragen om een naam en e-mailadres. De invoer van deze velden moet programmatisch bepaald kunnen worden. Dit kan bijvoorbeeld door gebruik te maken van het autocomplete-attribuut op het input-element. Zorg ervoor dat bij elke veld de juiste waarde wordt gegeven aan het autocomplete-attribuut, bij het veld e-mailadres is dat bijvoorbeeld 'email'.
Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: https://www.w3.org/tr/wcag21/#input-purposes.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 10: Op pagina https://lmsapp.nl/report/outage/terschelling wordt de huidige stap aangegeven doordat de '1' een andere tekst-kleur heeft dan de '2' en '3'. Omdat de turquoise '1' (HEX #00C4B5) een contrastverhouding heeft van 1,4:1 met de grijze '2' en '3' (HEX #CECECE), is het voor sommige bezoekers niet goed te zien welke stap de huidige stap is. Zorg ervoor dat deze twee kleuren een minimale contrastverhouding van 3:1 hebben, of gebruik naast kleur een andere methode om de huidige stap aan te geven. Dat kan bijvoorbeeld door de huidige stap te onderstrepen. Ook de afgeronde stappen worden enkel aangegeven met kleur, door ze groen te maken.

Bevinding 11: Wanneer bezoekers op pagina https://lmsapp.nl/report/outage/terschelling een plaatsnaam hebben opgezocht, moeten zij bij stap twee een item op de kaart selecteren. Wanneer een items is geselecteerd op de kaart, verandert deze van groen (HEX #00962A) naar blauw (HEX #0056C0). Deze twee kleuren hebben een contrastverhouding van 1,7:1, waardoor de verandering van de niet-geselecteerde staat naar de geselecteerde kaart voor sommige bezoekers moeilijk is te zien. Gebruik twee kleuren met voldoende contrast of maak gebruik van een andere methode naast kleur om aan te geven wanneer een item is geselecteerd.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 12: Op pagina https://lmsapp.nl/report/outage/terschelling staat de groene tekst 'Vind mijn locatie' (HEX #4CAE4C) op een lichtgroene achtergrond (HEX #E9F5E9). Deze kleurencombinatie heeft onvoldoende contrast. De contrastverhouding is hier 2,5:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 13: Op pagina https://lmsapp.nl/report/outage/terschelling staat een turquoise '1' (HEX #00C4B5) op een witte achtergrond. Deze kleurencombinatie heeft onvoldoende contrast. De contrastverhouding is hier 2,2:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 14: Op pagina https://lmsapp.nl/report/outage/terschelling staat de 'Volgende' knop. Deze witte tekst op een groene achtergrond (HEX #4CAE4C) heeft onvoldoende contrast. De contrastverhouding is hier 2,8:1, waar dat minimaal 4,5:1 moet zijn.
Deze kleurencombinatie komt vaker voor in het proces op deze pagina, bijvoorbeeld bij de knop 'Sluiten' in vensters met meer informatie over lichtmasten.

Bevinding 15: Wanneer bezoekers bij stap twee op pagina https://lmsapp.nl/report/outage/terschelling een item op de kaart geselecteerd hebben, is de groene tekst 'Bekijk status' (HEX #4CAE4C) zichtbaar op een blauwe achtergrond (HEX #E0E7F8). Deze twee kleuren hebben onvoldoende contrast. De contrastverhouding is hier 2,2:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 16: Wanneer bezoekers het proces op pagina https://lmsapp.nl/report/outage/terschelling hebben doorlopen en de melding hebben verstuurd, verschijnt een scherm waarin is aangegeven dat de melding succesvol is verstuurd. In dit scherm staat de grijze tekst 'Onbekend' (HEX #9E9E9E). Op de witte achtergrond heeft deze tekst onvoldoende contrast. De contrastverhouding is hier 2,6:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 17: Wanneer bezoekers bij stap twee op pagina https://lmsapp.nl/report/outage/terschelling een lichtmast selecteren waarvoor al een melding is gedaan (deze lichtmasten zijn rood op de kaart) verschijnt er een melding op het scherm. De oranje tekst van de melding (HEX #FB8C00) heeft onvoldoende contrast op de lichtoranje achtergrond (HEX #FEF1E0). De contrastverhouding is hier 2,1:1, waar dat minimaal 4,5:1 moet zijn.
Ook de oranje knop 'Bekijk openstaande storing' (HEX #FB8C00) heeft onvoldoende contrast op de blauwe achtergrond (HEX #E0E7F8). De kleurencombinatie heeft een contrastverhouding van 1,9:1, waar dat ook minimaal 4,5:1 moet zijn.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 18: Wanneer bezoekers bij stap één op pagina https://lmsapp.nl/report/outage/terschelling inzoomen bij een schermbreedte van 1280 bij 1024 pixels, worden de labels van invoervelden vanaf 175% deels afgekapt met punten (...). Hierdoor is niet meer het volledige label van de invoervelden leesbaar. Zorg ervoor dat inzoomen geen verlies van content en functionaliteiten veroorzaakt. De volledige labels van invoervelden moeten in beeld blijven staan. Het moet mogelijk zijn om bij de aangegeven schermbreedte in te zoomen tot 400%.
Dit komt ook voor bij de invoerelementen die bij de andere stappen van het proces op deze pagina staan.

Bevinding 19: Wanneer bezoekers bij stap één op pagina https://lmsapp.nl/report/outage/terschelling inzoomen bij een schermbreedte van 1280 bij 1024 pixels, is vanaf 250% de tekst 'Vind mijn locatie' niet meer volledig leesbaar. Zorg ervoor dat teksten volledig in beeld blijven staan als bezoekers inzoomen. Het moet mogelijk zijn om in te zoomen tot 400% bij een eerder aangegeven schermbreedte.
Dit probleem komt ook voor bij de 'Vorige' en 'Volgende' knoppen en andere knoppen en links die bij de andere stappen die in het proces op deze pagina staan.

Bevinding 20: Opmerking: Wanneer bezoekers inzoomen op pagina https://lmsapp.nl/report/outage/terschelling staat de tekst in het linker venster ("Als er gevaar is of spoed bij uw melding dan verzoeken wij u te bellen met 038 – 22 22 468...") nog steeds aan de linker kant van het scherm. Als bezoekers inzoomen tot 400% bij een schermbreedte van 1280 bij 1024 pixels, wordt deze tekst getoond in een erg smal venster en is het moeilijk leesbaar. Het advies is om alle content om de pagina te herschalen wanneer bezoekers inzoomen, op deze manier wordt alle content onder elkaar geplaatst op de pagina en wordt de tekst over de volledige breedte van het scherm getoond.

Bevinding 21: Opmerking: Bij een schermgrootte van 1280 bij 1024 pixels en inzoomen tot 400% is de kaart bijna niet meer zichtbaar. Omdat het om tweedimensionale content gaat, mag onder de kaart zelf (dus niet over de hele pagina) een scrollbalk worden toegevoegd om de kaart beter zichtbaar te maken.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 22: Wanneer toetsenbordgebruikers navigeren over de pagina https://lmsapp.nl/report/outage/terschelling, wordt focus aangegeven met een lichtblauwe focusrand (HEX #7ABBFD). Deze focusrand heeft onvoldoende contrast op verschillende achtergronden. Op de witte achtergrond heeft deze focusrand een contrastverhouding van 2:1, waar dat minimaal 3:1 moet zijn. Ook op de grijze achtergrond (HEX #DBDBDB) van de invoervelden heeft de focusrand onvoldoende contrast. Hier is de contrastverhouding 1,4:1.

Bevinding 23: In het proces op pagina https://lmsapp.nl/report/outage/terschelling worden invoervelden aangegeven met een grijze lijn (HEX #A5A5A5) op een witte achtergrond. Deze grijze lijn heeft te weinig contrast op de achtergrond. De contrastverhouding is hier 2,4:1, waar dat minimaal 3:1 moet zijn.
Dit geldt ook voor het selectievakje bij stap drie.

Bevinding 24: Bij stap drie in het proces op pagina https://lmsapp.nl/report/outage/terschelling staat de combobox 'Type klacht'. Wanneer toetsenbordgebruikers focus plaatsen op de optie in deze combobox, wordt dat aangegeven met een lichtgrijze focusrand (HEX #C6C6C6). Op de witte achtergrond heeft deze focusrand een contrastverhouding van 1,7:1, waar dat minimaal 3:1 moet zijn.

Bevinding 25: Bij stap drie in het proces op pagina https://lmsapp.nl/report/outage/terschelling staat het selectievakje 'Houd me op de hoogte'. Wanneer toetsenbordgebruikers focus plaatsen op dit selectievakje, wordt dit aangegeven met een grijze cirkel. Deze grijze cirkel (HEX #E4E4E4) heeft een contratsverhouding van 1,2:1 op de witte achtergrond, wat minimaal 3:1 zou moeten zijn.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 26: Op pagina https://lmsapp.nl/report/outage/terschelling staat in het tweede invoerveld 'Zoek adres of plaatsnaam' een knop met de toegankelijke naam 'Open'. Het is voor toetsenbordgebruikers mogelijk om focus te plaatsen op deze knop en het uit te klappen. Het is niet mogelijk voor toetsenbordgebruikers om de knop weer in te klappen, terwijl dat wel kan met de muisaanwijzer. In het eerste invoerveld staat deze knop ook, hier kunnen bezoekers die gebruik maken van het toetsenbord deze knop niét openen.
Zorg ervoor dat deze functionaliteiten ook beschikbaar zijn voor toetsenbordgebruikers.

Bevinding 27: Wanneer bezoekers op pagina https://lmsapp.nl/report/outage/terschelling een adres of plaatsnaam hebben ingevuld, moeten zij een item selecteren op de kaart. Deze functie is niet beschikbaar voor toetsenbordgebruikers. Zorg ervoor dat het voor toetsenbordgebruikers mogelijk is om focus te plaatsen op de items in de kaart en deze te selecteren. Of zorg voor een toegankelijk alternatief, bijvoorbeeld een lijst met alle items in de plaats waarop bezoekers hebben gezocht. Bezoekers moeten dan met het toetsenbord de items in de lijst kunnen selecteren.
Let op dat wanneer de elementen in de kaart bedienbaar zijn gemaakt voor toetsenbordgebruikers, deze ook een toegankelijke naam en rol nodig hebben.

Bevinding 28: Wanneer bezoekers bij stap drie op pagina https://lmsapp.nl/report/outage/terschelling een bestand hebben geüpload, verschijnt er een knop waarmee bezoekers het bestand weer kunnen verwijderen. Toetsenbordgebruikers kunnen focus plaatsen op deze knop, maar het is niet mogelijk om de knop te activeren met het toetsenbord. Zorg ervoor dat deze knop te activeren is met de Entertoets.
Dit probleem doet zich ook voor de bij de knop die visueel gelabeld is met een paperclip bij dezelfde stap.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 29: Opmerking: De paginatitel van https://lmsapp.nl/report/outage/terschelling is 'Storing melden | LMS Nederlands Licht Instituut'. Dit omschrijft de inhoud van de pagina en het proces erop voldoende. Maar het proces op deze pagina is specifiek voor het meldingen van een storing in de gemeente Terschelling. Als er nog andere pagina's zijn met soortgelijke processen voor andere gemeenten, moet in de paginatitel vermeld worden voor welke gemeente bezoekers een storing kunnen melden.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 30: Wanneer toetsenbordgebruikers het proces op pagina https://lmsapp.nl/report/outage/terschelling doorlopen, blijft de toetsenbordfocus staan op de knop 'Volgende' terwijl nieuwe content boven deze knop is geladen. Hierdoor zouden toetsenbordgebruikers bijvoorbeeld bij stap drie terug moeten navigeren (via de shift en tab combinatie) om het formulier te kunnen invullen. Dit is geen logische focus volgorde en zit de bediending van het proces in de weg. Zorg ervoor dat wanneer toetsenbordgebruikers de 'Volgende' hebben geactiveerd en de volgende stap visueel geladen is, de toetsenbordfocus wordt verplaatst naar het eerste bedienbare element binnen deze stap.

Bevinding 31: Wanneer bezoekers bij stap 2 op 'Bekijk status' klikken na het selecteren van een lichtmast, opent een dialoogvenster. Na het doorlopen van alle interactieve items in het dialoogvenster, komt de focus in de adresbalk van de browser. Zorg ervoor dat de focus in het dialoogvenster blijft totdat de bezoeker het venster heeft gesloten.

Bevinding 32: Wanneer bezoekers bij stap 2 op 'Bekijk status' klikken na het selecteren van een lichtmast, opent een dialoogvenster. Nadat de bezoeker dit dialoogvenster sluit, verschuift de toetsenbordfocus weer naar het begin van de pagina in plaats van verder te gaan waar de bezoeker was gebleven. Zorg ervoor dat de focus weer op 'Bekijk status' staat na het sluiten van het dialoogvenster.

Bevinding 33: In stap drie in het proces komt een onzichtbaar div-element met de rol listbox voor, met tabindex=0 waardoor bezoekers die gebruik maken van het toetsenbord focus kunnen plaatsen op dit element. Dit is verwarrend, omdat er geen daadwerkelijk interactief element aanwezig is. Verwijder het overbodige element uit de focusvolgorde.

Bevinding 34: Opmerking: Bij stap drie in het proces krijgt zowel de knop met het paperclip-icoon (bestand toevoegen) als de optie 'Upload foto's en bestanden' toetsenbordfocus. Overweeg om één van de twee niet-interactief te maken aangezien het nu dubbelop is.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 35: Het logo van LMS op pagina https://lmsapp.nl/report/outage/terschelling is opgemaakt als link. Deze link heeft geen toegankelijke naam. Hierdoor is het voor gebruikers van hulpsoftware lastig om te bepalen waar de link naar verwijst. Zorg ervoor dat deze link een toegankelijke naam krijgt, bijvoorbeeld door gebruik te maken van een aria-label op het a-element. In dit geval is het voldoende om de link de toegankelijke naam 'Logo LMS' te geven, maar het zou beter zijn om ook het linkdoel te vermelden in deze toegankelijke naam. Zie ook succescriterium 1.1.1 en 4.1.2.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 36: Advies: Op pagina https://lmsapp.nl/report/outage/terschelling worden de stappen van het proces aangeven met de cijfers '1', '2' en '3'. De betekenis van deze cijfers is visueel duidelijk, maar mogelijk niet voor gebruikers die het scherm niet kunnen zien en voorleessoftwaregebruiken. Overweeg om hier een kop te plaatsen om aan te geven waar de cijfers voor staan. Deze kop mag ook visueel verborgen zijn.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 37: Op https://lmsapp.nl/report/outage/terschelling is een skiplink aanwezig, maar wanneer toetsenbordfocus geplaatst wordt op deze skiplink is de link niet zichtbaar. Hierdoor is het voor ziende toetsenbordgebruikers moeilijk te bepalen welk element op dat moment focus heeft. Zorg ervoor dat de skiplink altijd zichtbaar is bij focus.

Bevinding 38: In de kaart op pagina https://lmsapp.nl/report/outage/terschelling staan twee knoppen om in en uit te zoomen. Wanneer toetsenbordgebruikers focus plaatsen op deze knoppen wordt dat niet aangegeven met een visuele indicator. Hierdoor weten sommige ziende toetsenbordgebruikers niet welk element focus heeft. Zorg ervoor dat focus altijd wordt aangegeven met een visuele indicator, bijvoorbeeld een focusrand (met voldoende contrast).

Bevinding 39: Wanneer bezoekers bij stap twee op pagina https://lmsapp.nl/report/outage/terschelling een items geselecteerd hebben in de kaart, kan met de knop 'Bekijk status' een venster worden geopend. In dit venster staan twee links; 'Streetview' en 'Bekijk lichtmast'. Wanneer toetsenbordgebruikers focus plaatsen op deze link is dat visueel niet zichtbaar. Hierdoor weten ziende toetsenbordgebruikers niet welk element focus heeft. Zorg ervoor dat de focus hier visueel wordt aangegeven, bijvoorbeeld met een focusrand.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 40: Wanneer bezoekers bij stap drie in het proces een veld niet invullen en verder gaan naar een volgend veld, verschijnt boven het niet-ingevulde veld de melding 'Required'. Hiervoor is geen taalwissel aangegeven. Vertaal de melding naar het Nederlands. Dit geldt ook voor de melding 'Invalid e-mail'. Zie ook succescriteria 3.3.1 en 3.3.3.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Bevinding 41: Wanneer toetsenbordgebruikers bij stap drie op pagina https://lmsapp.nl/report/outage/terschelling het selectievakje 'Houd me op de hoogte' selecteren met de Entertoets, wordt het formulier verstuurd. Dit is een niet gewenste actie, omdat de bezoekers mogelijk nog niet klaar is met het invullen van het formulier. Zorg ervoor dat wanneer bezoekers een selectievakje selecteren, er geen wijzing van context (zoals het versturen van een formulier) plaatsvindt.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 42: Bij stap drie van het proces op pagina https://lmsapp.nl/report/outage/terschelling staat een formulier. In dit formulier is het verplicht om de combobox 'Type klacht' in te vullen. Wanneer dat niet gebeurt verschijnt hier de foutmelding 'Required.'. Deze foutmelding geeft niet duidelijk genoeg aan welke fout de bezoeker heeft gemaakt. Zorg er voor dat foutmeldingen altijd aangeven welke fout de bezoekers heeft gemaakt. Idealiter wordt ook aangegeven bij welk veld de foutmelding is gemaakt, maar dat is alleen verplicht wanneer de foutmelding niet bij het veld staat. Pas de foutmelding bij dit veld aan zodat het aangeeft welke fout de bezoeker heeft gemaakt, ook moet de foutmelding in het Nederlands zijn.
Een soortgelijke foutmelding verschijnt ook bij de invoervelden 'Naam' en 'E-mailadres' (zichtbaar wanneer het selectievakje 'Houd me op de hoogte' is aangevinkt).

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 43: Bij stap drie van het proces op pagina https://lmsapp.nl/report/outage/terschelling staat een formulier. In dit formulier wordt het verplichte veld aangegeven met een asterisk (*). Nergens op deze pagina wordt aangegeven wat deze asterisk betekend. Dat kan verwarrend zijn voor bezoekers met bepaalde cognitieve beperkingen. Zorg ervoor dat duidelijk in tekst wordt aangegeven wat de asterisk betekend.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Bevinding 44: Wanneer bezoekers bij stap drie op pagina https://lmsapp.nl/report/outage/terschelling het selectievakje 'Houd me op de hoogte' hebben geselecteerd, is het invoerveld 'E-mailadres' zichtbaar. Wanneer bezoekers een verkeerd e-mailadres invullen bij dit veld, verschijnt de foutmelding 'Invalid e-mail.'. Naast dat deze foutmelding in het Engels is, geeft het ook geen hulp aan de bezoeker hoe zij de fout moeten oplossen. Zorg ervoor dat wanneer een bepaald format is vereist voor het goed invullen van het veld, de foutmelding hulp biedt met het oplossen van deze fout. Dat kan bijvoorbeeld door een voorbeeld format van een e-mailadres in de foutmelding te tonen. Zorg er ook voor dat de foutmelding in het Nederlands is.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 45: Op pagina https://lmsapp.nl/report/outage/terschelling is het logo van LMS opgemaakt als een link. Deze link heeft geen toegankelijke naam. Hierdoor is de link moeilijk te bedienen als bezoekers gebruikmaken van hulpsoftware. Zorg ervoor dat de link een toegankelijke naam krijgt. Zie ook succescriterium 1.1.1 en 2.4.4.

Bevinding 46: Bij stap één op pagina https://lmsapp.nl/report/outage/terschelling staan twee invoervelden met het visuele label 'Zoek adres of plaatsnaam'. Deze invoervelden hebben geen toegankelijke naam. Hierdoor zijn de invoervelden moeilijk te bedienen met hulpsoftware. Zorg ervoor dat deze invoervelden een toegankelijke naam krijgen die overeenkomt met het visuele label. Dat kan bijvoorbeeld door het label-element dat gekoppeld is aan het input-element niet te verbergen met de CSS eigenschap visibility: hidden;. Op deze manier is het label ook verborgen voor hulpsoftware (zie ook succescriterium 1.3.1).

Bevinding 47: Bij stap twee op op pagina https://lmsapp.nl/report/outage/terschelling kunnen bezoekers een dialoog openen met de knop 'Bekijk status'. Deze dialoog heeft geen toegankelijke naam en rol. Geef deze aan het div-element van de dialoog door bijvoorbeeld gebruik te maken van role=dialog en een aria-label.

Bevinding 48: Bij stap drie op pagina https://lmsapp.nl/report/outage/terschelling staat in de code een listbox die geen toegankelijke naam heeft. Dat is verwarrend voor gebruikers van hulpsoftware. De listbox is visueel aanwezig wanneer er een bestand is geüpload, maar is ook focusbaar met het toetsenbord wanneer er geen bestanden zijn geüpload. Het gebruikt van role=listbox op deze plek lijst niet gepast. De listbox bevat namelijk niet de juiste child elements en werkt niet als een listbox. Een mogelijk oplossing is hier om de role=listbox te verwijderen.

Bevinding 49: Bij stap drie op pagina https://lmsapp.nl/report/outage/terschelling staat een combobox met het visuele label 'Type klacht'. Deze combobox heeft geen toegankelijke naam. Hierdoor is het voor gebruikers van hulpsoftware moeilijk te bepalen wat zij hier moeten selecteren. Zorg ervoor dat de combobox een toegankelijke naam krijgt die overeenkomt met het visuele label, bijvoorbeeld door gebruik te maken van een aria-label.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 50: Wanneer bezoekers het proces op pagina https://lmsapp.nl/report/outage/terschelling helemaal hebben doorlopen en de melding hebben verstuurd, verschijnt onder andere de melding 'Bedankt voor het melden van de storing.' op het scherm. Dit wordt niet opgemerkt door hulpsoftware. Hierdoor kunnen gebruikers van bijvoorbeeld een screenreader mogelijk niet opmerken dat de melding succesvol is verstuurd. Zorg ervoor dat hulpsoftware de verschenen melding opmerkt, dat kan bijvoorbeeld door gebruik te maken van role=alert of aria-live.

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

• Proces:
  https://lmsapp.nl/report/outage/terschelling

Ondersteunende technieken

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

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.