Toegankelijkheidsonderzoek

Issues:
Systeemaudit digitale toegankelijkheid Mett 3

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Mett 3
Datum 26 september 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • De techniek van het Mett 3 platform.
Buiten de scope van het onderzoek valt:
  • De content en de huisstijl op het Mett 3 platform. Afnemers kunnen hiervoor een eigen content-onderzoek aanvragen.
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 65

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: In de link in de footer komt naast de link 'Kwetsbaarheid melden' een icoon voor dat aangeeft dat de link naar een externe pagina verwijst. Deze informatie is niet beschikbaar voor bezoekers die het scherm niet kunnen zien. Geef dit icoon een alternatieve tekst.

Bevinding 2: Op pagina https://toegankelijkheid.mett.nl/overzicht+widgets/default.aspx komen afbeeldingen voor, die linken naar een pagina. Bijvoorbeeld onder 'Participatie' en 'Forum'. Deze afbeeldingen hebben geen alternatieve tekst. In plaats daarvan is het alt-attribuut op het a-element (link) geplaatst, maar dit heeft geen effect. Nu wordt daarom de bestandsnaam van de afbeelding voorgelezen als linkdoel. Dit is geen goede alternatieve tekst en daarom geen duidelijk linkdoel. In dit geval komt de link echter twee keer voor, zowel bij de afbeelding als bij de 'Lees meer over x' link. Overweeg daarom de link op de afbeelding te verwijderen en de afbeelding decoratief te maken door hier een alt-attribuut te plaatsen maar geen waarde in te vullen. Als de link blijft staan, moet er een goede alternatieve tekst aanwezig zijn die het linkdoel beschrijft, bijvoorbeeld door een alternatieve tekst op de afbeelding te plaatsen, of bijvoorbeeld door een aria-label op het a-element te plaatsen. Dit doet zich op meerdere pagina's voor, waaronder op pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/default.aspx, op pagina https://toegankelijkheid.mett.nl/alle+modules/eparticipatie/default.aspx en op pagina https://toegankelijkheid.mett.nl/alle+modules/eparticipatie/stemmen/default.aspx.

Bevinding 3: Op pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/1630723.aspx?t=Deze-website-wordt-getest-op-WCAG-21 kunnen bezoekers een reactie plaatsen. Onder de reactie staat vervolgens een knop waarmee bezoekers de reactie leuk kunnen vinden en het aantal 'vind ik leuks'. De naam van de knop bestaat nu alleen uit het cijfer (bijvoorbeeld 0), de rest van de informatie is niet beschikbaar voor hulpsoftware. Zorg ervoor dat deze informatie ook als alternatieve tekst voorkomt. Dit komt op meerdere pagina's voor, ook bovenaan de pagina zoals op pagina https://toegankelijkheid.mett.nl/alle+modules/blog/1620435.aspx?t=Blogpost.

Bevinding 4: Op pagina https://toegankelijkheid.mett.nl/alle+modules/documenten/default.aspx staat naast de naam van de eigenaar van de map een icoon. Dit icoon heeft geen alternatieve tekst, terwijl het icoon wel informatief is. Zorg ervoor dat die aanwezig is, bijvoorbeeld 'Aangemaakt door'.

Bevinding 5: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=contentTab kunnen bezoekers bij 'Afspraakkleur' de afspraak een kleur geven in de agenda. De omschrijving van de kleur is nu enkel een cijfer, dit is onvoldoende beschrijvend.

Bevinding 6: Op pagina https://toegankelijkheid.mett.nl/shortcuts/sendcontactmessage.aspx wordt gebruik gemaakt van hCaptcha. Deze manier van authenticatie is op dit moment niet toegankelijk, omdat bezoekers afbeeldingen zonder alternatieve tekst moeten identificeren. Er wordt een alternatief aangeboden. Echter, omdat bezoekers hier privégegevens moeten achterlaten is dit geen voldoende toegankelijk alternatief.

Bevinding 7: Op pagina https://toegankelijkheid.mett.nl/alle+modules/Smoelenboek/default.aspx zijn de profielafbeeldingen verborgen, terwijl het feit dát er profielafbeeldingen (of juist niet) aanwezig zijn, wel belangrijke informatie is. Voeg daarom alternatieve teksten toe, bijvoorbeeld 'Profielafbeelding (naam gebruiker)' of 'Geen profielafbeelding ingesteld'. Dit doet zich overal waar profielafbeeldingen voorkomen voor, bijvoorbeeld op pagina https://toegankelijkheid.mett.nl/alle+modules/groepen/1620461.aspx?t=Open-groep#tab=membersTab.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 8: Op pagina https://toegankelijkheid.mett.nl/Beheer/Formulierenmodule/1630539.aspx?t=Formulier komt een groep keuzerondjes voor. Daar is de tekst 'Vormen' niet gekoppeld aan de groep. Hierdoor weten bezoekers die gebruik maken van voorleessoftware niet op welke vraag zij antwoord geven. Maak gebruik van een fieldset en legend combinatie, zoals de selectievakjes onder 'Keuzevakjes' wel het geval is.

Bevinding 9: Op onder andere pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/1630723.aspx?t=Deze-website-wordt-getest-op-WCAG-21 staat een tekstverwerker met daarboven de tekst 'Schrijf een reactie'. Deze tekst is geplaatst in een label-element, maar een applicatie kan niet gekoppeld zijn aan een label-element omdat het geen input-element is. Maak hier daarom in plaats daarvan een kop-element van.

Bevinding 10: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/default.aspx is de toegankelijke lijstweergave in een tabel geplaatst. De kolomkoppen zijn goed opgemaakt als th-element, maar de namen van de afspraken moeten ook als headercel worden opgemaakt omdat ze een relatie hebben met de begin- en eindtijd. Maak deze kolom daarom ook op als th-cellen. Dit doet zich op meer pagina's voor, waaronder op pagina https://toegankelijkheid.mett.nl/alle+modules/taken/default.aspx.

Bevinding 11: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=imageTab komt visueel een tabel voor (tabblad 'Afbeelding'), maar in de code is dit geen tabel maar diverse div-elementen met losse teksten. Hierdoor is er ook geen relatie tussen de teksten en de informatie. Zorg ervoor dat de relaties wel beschikbaar zijn voor hulpsoftware, bijvoorbeeld door een tabel toe te voegen.

Bevinding 12: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/agenda+timeline/default.aspx#2021 staat een tabel die visueel uit drie kolommen bestaat, maar in HTML bevat deze een vierde kolom. Deze vierde kolom bevat geen content, maar wordt wel voorgelezen door hulpsoftware. Dit kan verwarrend werken. Verwijder de vierde kolom.

Bevinding 13: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=contentTab komt visueel een select-element voor met als titel 'Afspraakkleur'. Dit is een uitklapbare knop. Deze informatie is echter niet beschikbaar voor hulpsoftware, omdat het attribuut op een div-element zonder rol is geplaatst. Maak gebruik van bijvoorbeeld aria-expanded om dit probleem op te lossen.
Idealiter wordt hier echter gebruik gemaakt van een select-element, omdat het nu verwarrend is dat iets dat eruit ziet als een select-element niet bedienbaar is als een select-element met het toetsenbord. Een andere optie is bijvoorbeeld een groep radio-buttons, of de juiste implementatie van een listbox (zie https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role).
Er is hier een listbox gebruikt maar deze is niet op de juiste manier geïmplementeerd en niet op de juiste manier bedienbaar met het toetsenbord. Zie succescriterium 2.1.1. Zo heeft de listbox bijvoorbeeld geen beschrijving via een aria-label of zichtbare tekst waar aria-labelledby naar verwijst en is aria-selected niet gebruikt om het huidige geselecteerde item te identificeren.

Bevinding 14: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=usersTab, onder het tabblad 'Uitnodigen' komen twee select-elementen voor zonder toegankelijke naam. Er is een visueel label aanwezig maar dat is niet gekoppeld, dit zijn nu kopteksten in plaats van labels.

Bevinding 15: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=usersTab, onder het tabblad 'Uitnodigen' komen twee select-elementen voor. Hierin zijn visueel selectievierkantjes aanwezig, met daarnaast tekst, maar al deze informatie is niet beschikbaar voor hulpsoftware. Bezoekers die bijvoorbeeld gebruik maken van voorleessoftware horen nu enkel 'Leeg'. Informatie over welk item geselecteerd is is daardoor ook niet beschikbaar. De aanwezige labels zijn nergens aan gekoppeld en worden dus ook niet voorgelezen.

Bevinding 16: Advies: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=contentTab kunnen bezoekers een datum kiezen. De comboboxen hebben allemaal een beschrijvend (niet zichtbaar, zie succescriterium 3.3.2) label, behalve de eerste in de rij. Hier is het zichtbare label 'Kies begintijd van de afspraak' als label gekoppeld, met toegevoegd een title-attribuut met daarin de beschrijving. Het is duidelijker om van de tekst 'Wanneer is de afspraak?' een koptekst te maken en van 'Begintijd van de afspraak' een fieldset en legend combinatie te maken, waarin alle comboboxen gegroepeerd worden. Op die manier kan de combobox waarmee bezoekers een dag kiezen een eigen beschrijvend label krijgen. Een vergelijkbare situatie doet zich voor op pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/Articles_AddArticle.aspx#tab=imageTab.

Bevinding 17: Advies: Op onder andere pagina https://toegankelijkheid.mett.nl/alle+modules/eparticipatie/stemmen/default.aspx is een zij-menu aanwezig. Deze is opgemaakt met een ul-element. Overweeg gebruik te maken van een nav-element en deze via het arialabelledby-attribuut een toegankelijke naam te geven.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Niet aanwezig

Bevinding 18: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 19: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/default.aspx komt de linktekst 'toegankelijke lijstweergave' voor. Deze linktekst is alleen herkenbaar als link door een kleurverandering ten opzichte van de rest van de tekst. Zorg ervoor dat kleur niet de enige manier is om informatie te onderscheiden. Voeg nog minimaal één andere manier toe, bijvoorbeeld door de linktekst te onderstrepen.

Bevinding 20: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/agenda+timeline/default.aspx#2021 wordt met kleur aangegeven welke fase behaald is en welke nog niet. Zorg ervoor dat kleur niet de enige manier is om informatie te onderscheiden. Voeg nog minimaal één andere manier toe, bijvoorbeeld met tekst of een ander icoon (met alternatieve tekst). Dit komt ook voor pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/agenda+timeline/default.aspx.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 21: In de cookiemelding komt grijze tekst voor, die aangeeft dat noodzakelijke cookies standaard aanstaan. Deze tekst moet wel alsnog leesbaar zijn. De contrastratio tussen de grijze tekst (HEX #868E96) en de witte achtergrond is is 3,3:1 waar dat minimaal 4,5:1 moet zijn. Dit doet zich ook voor op pagina https://toegankelijkheid.mett.nl/Beheer/toegankelijkheidsverklaring/default.aspx#settings=cookies.

Bevinding 22: Op de website komen enkele problemen voor waarbij bij muishover teksten niet meer leesbaar zijn. Omdat dit zich ook voordoet bij iconen is dit bij Op verschillende pagina's komt tekst voor die bij muishover onvoldoende contrast heeft met de achtergrond en daardoor niet (goed) leesbaar is. Bijvoorbeeld op pagina https://toegankelijkheid.mett.nl/overzicht+widgets/default.aspx, waar de 'Toon meer' links bij muishover niet meer leesbaar zijn door het veranderen van de achtergrondkleur en op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/default.aspx#tab=acceptedTab waar de namen van de afspraken bij hover niet meer leesbaar zijn. Zorg dat de contrastratio (ook bij muishover) minimaal 4,5:1 is.

Bevinding 23: Advies: Op meerdere plekken komen interactieve elementen voor die muishover een te laag contrast hebben met de achtergrond, bijvoorbeeld de linktekst in de cookiemelding en linkteksten in lopende teksten zoals op pagina https://toegankelijkheid.mett.nl/Beheer/toegankelijkheidsverklaring/default.aspx#settings=cookies. Omdat dit in een content-onderzoek onder huisstijl wordt onderzocht, is hier slechts het advies opgenomen ervoor te zorgen dat afnemers van het platform op de hoogte zijn dat zij hier rekening mee moeten houden bij het kiezen van de gebruikte kleuren op de website.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Niet aanwezig

Bevinding 24: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 25: Wanneer bezoekers op de homepage https://toegankelijkheid.mett.nl/home/default.aspx inzoomen naar 400% met een viewport van 1280 bij 1024 en met het toetsenbord navigeren, is de tekst 'Titel van de header' en 'Omschrijving van de header' niet meer leesbaar als de link 'Naar Mett website' focus heeft. Zorg ervoor dat inzoomen niet zorgt voor verlies van informatie en functionaliteit.

Bevinding 26: Wanneer bezoekers op pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/default.aspx inzoomen naar vanaf 300% met een viewport van 1280 bij 1024, is het label van de zoekfunctie niet meer volledig leesbaar. Vanaf 300% is alleen nog 'Zoeken binnen de' leesbaar en vanaf 400% alleen nog 'Zoeken binnen'. Zorg ervoor dat inzoomen niet zorgt voor verlies van informatie en functionaliteit.

Bevinding 27: Advies: Op onder andere pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/default.aspx valt, wanneer bezoekers inzoomen, het broodkruimelpad en de knoppen om te volgen of een pagina favoriet te maken constant als een brede balk over de pagina wanneer bezoekers naar beneden scrollen. De content is nog leesbaar, maar het is wel hinderlijk. Overweeg deze informatie niet mee te laten scrollen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 28: Wanneer bezoekers met het toetsenbord door het navigatiemenu bovenaan iedere pagina navigeren en het accountmenu focus heeft, kleurt de achtergrond donker maar blijft het account icoon zwart, waardoor het niet meer goed zichtbaar is. Dit komt voor wanneer de ingelogde bezoeker geen profielfoto heeft ingesteld. De contrastratio is dan slechts 1,4:1 waar dit minimaal 3:1 moet zijn. Aangezien de andere iconen in dit menu wel van kleur veranderen (naar wit), maar deze niet, is dit een technische bevinding en geen vormgeving bevinding.

Bevinding 29: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=contentTab kunnen bezoekers onder 'Afspraakkleur' een kleur kiezen. Het huidige geselecteerde item is zichtbaar door een grijze achtergrondkleur (HEX #EEEEEE). De contrastratio met de witte achtergrond is 1,1:1 waar dat minimaal 3:1 moet zijn. Een mogelijke oplossing is het toevoegen van een tekstueel hulpmiddel, bijvoorbeeld 'Geen kleur (geselecteerd)'.

Bevinding 30: Op pagina https://toegankelijkheid.mett.nl/Shortcuts/Users_EditProfile.aspx#tab=imageTab kunnen bezoekers een afbeelding uploaden. Wanneer een bezoeker een afbeelding upload en aanpast, verschijnt een blauwe rand om de afbeelding (HEX #4493E2). Deze rand heeft onvoldoende contrast met de donkergrijs (HEX #666666) en lichtgrijze (HEX #7F7F7F) blokjes. De contrastwaarden zijn hier 1,7:1 en 1,2:1 waar dat tenminste 3:1 moet zijn. Er is een alternatief aanwezig waarbij bezoekers zelf het aantal pixels kunnen instellen, maar aangezien zij daarmee niet kunnen bepalen welk deel van de foto geselecteerd is, is dat niet voldoende.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 31: Op onder andere pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/1630723.aspx?t=Deze-website-wordt-getest-op-WCAG-21 komt een tekstverwerker voor. In de beschrijving van het iframe staat dat de bezoeker via alt 0 instructies kan opvragen. In deze instructies staat hoe de bezoeker de tekstverwerker met het toetsenbord kan bedienen. Een bezoeker weet dit echter alleen als de bezoeker een voorleeshulp of brailleregel gebruikt. Een bezoeker die met het toetsenbord navigeert en geen verdere hulpsoftware gebruikt, weet niet dat alt 0 beschikbaar is. Plaats deze informatie bijvoorbeeld boven of onder de tekstverwerker. Dit doet zich ook voor op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=contentTab, met de toetsenbordcombinatie alt f10 om in de tekstverwerker opties te komen.

Bevinding 32: Op onder andere pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/1630723.aspx?t=Deze-website-wordt-getest-op-WCAG-21 komt een tekstverwerker voor. Bezoekers kunnen met de muis met het pijlicoon het veld groter maken. Deze functionaliteit is niet aanwezig voor bezoekers die gebruik maken van het toetsenbord. Dit doet zich ook voor op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=contentTab. Dit is ook afkeurbaar in WCAG 2.2 onder succescriterium 2.5.7.

Bevinding 33: Op pagina https://toegankelijkheid.mett.nl/alle+modules/eparticipatie/stemmen/default.aspx, wanneer bezoekers gestemd hebben op een artikel, veranderd de tekst 'Stem' in 'Gestemd'. Bij muishover verschijnt vervolgens de tekst 'Opheffen'. Dit gebeurt niet bij toetsenbordfocus. Zorg ervoor dat deze informatie ook beschikbaar is voor bezoekers die gebruik maken van het toetsenbord, bijvoorbeeld door een extra knop toe te voegen in plaats van gebruik te maken van één knop.

Bevinding 34: Op pagina https://toegankelijkheid.mett.nl/shortcuts/Users_ShowProfile.aspx#tab=updatesTab komt een aria tablist voor, met de rol tab op ieder tabblad. De toetsenbordbediening gaat hier niet goed. Bezoekers moeten nu met de tab-toets door de tabbladen navigeren, in plaats van met de pijltoetsen. Lees meer over de juiste bediening op pagina https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role. Dit doet zich alle pagina's met deze functionaliteit voor, waaronder op pagina https://toegankelijkheid.mett.nl/Shortcuts/Users_EditProfile.aspx#tab=imageTab. Dit doet zich daarnaast ook voor op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=contentTab, onder 'Welke extra informatie wil je toevoegen?' en in de tabbladen in de Groep, bijvoorbeeld op https://toegankelijkheid.mett.nl/alle+modules/groepen/1620461.aspx?t=Open-groep#tab=updatesTab.

Bevinding 35: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=contentTab komt visueel een select-element voor met als titel 'Afspraakkleur'. Dit is een uitklapbare knop, met daarin een aria-listbox. De huidige toetsenbordbediening komt niet overeen met de toetsenbordbediening voor een listbox. Zie ook https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role.

Bevinding 36: Op onder andere pagina https://toegankelijkheid.mett.nl/alle+modules/eparticipatie/default.aspx wordt gebruik gemaakt van een Youtube videospeler. De sneltoetsen zijn correct uitgeschakeld met het attribuut disablekb1. Echter, dit veroorzaakt momenteel een probleem in de toetsenbordbediening binnen het iframe, waarbij bezoekers de ondertiteling en verschillende instellingen niet meer kunnen wijzigen. Op dit moment is de Youtube videospeler dan ook geen toegankelijke manier om video's in te tonen. Overweeg daarom een eigen videospeler toe te voegen, zodat afnemers niet afhankelijk zijn van een derde partij.

Bevinding 37: Advies: Op pagina https://toegankelijkheid.mett.nl/alle+modules/beeldbank/default.aspx verschijnen de knoppen om naar een volgende of vorige slide te gaan pas bij de tweede afbeelding. Dit is mogelijk verwarrend. Zorg ervoor dat de knoppen direct aanwezig zijn.

Bevinding 38: Opmerking: Op meerdere pagina's, waaronder op pagina https://toegankelijkheid.mett.nl/overzicht+widgets/default.aspx lijkt er een drag and drop functie aanwezig te zijn in de header van de pagina. Dit lijkt echter geen verder geen functie te hebben. Mocht dit wel het geval zijn, bijvoorbeeld als later meerdere headerafbeeldingen aanwezig zijn en deze met de muis versleept kunnen worden, moet hier een toegankelijk alternatief voor zijn dat zowel met het toetsenbord bedienbaar is, als zonder sleepbeweging met de muis bedienbaar is (vanwege succescriterium 2.5.7 in WCAG 2.2).

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 39: Op meerdere pagina's, waaronder op pagina https://toegankelijkheid.mett.nl/alle+modules/eparticipatie/eensoneens/default.aspx, verwijst de link 'Direct naar pagina inhoud' naar het zoekvenster op de pagina, waardoor bezoekers alsnog door de zoekfunctie en de filteropties moeten navigeren. Aangezien dit herhalende content is, moeten deze functies ook overgeslagen kunnen worden.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 40: Wanneer bezoekers op pagina het formulier verzenden, worden zij automatisch doorverwezen naar pagina https://toegankelijkheid.mett.nl/Beheer/Formulierenmodule/1630539.aspx?t=Formulier&submitted=true. Dit is de bevestiging dat het formulier verzonden is. De titel is echter wel alleen 'Formulier' en dat is op deze pagina niet beschrijvend genoeg. Pas de titel aan, bijvoorbeeld naar 'Formulier verzonden' om dit probleem op te lossen.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 41: Op pagina https://toegankelijkheid.mett.nl/overzicht+widgets/default.aspx, in het blok 'Participatie' krijgen interactieve elementen in de volgende slide al focus terwijl die niet zichtbaar zijn. Zorg ervoor dat deze elementen pas focus krijgen als de bezoeker naar de volgende slide is genavigeerd.

Bevinding 42: Wanneer bezoekers op pagina https://toegankelijkheid.mett.nl/alle+modules/documenten/default.aspx een map openen, verschijnt de inhoud van die map bóven de geopende map. Wanneer bezoekers verder navigeren met het toetsenbord, komt de nieuwe inhoud niet voor in de verdergaande focusvolgorde. Zorg ervoor dat bezoekers met het toetsenbord op een logische manier door de inhoud op de pagina kunnen navigeren, bijvoorbeeld door de nieuwe inhoud in de accessibility tree ónder de geopende map te plaatsen.

Bevinding 43: Wanneer bezoekers op pagina https://toegankelijkheid.mett.nl/alle+modules/documenten/default.aspx een map openen, verschijnt de inhoud van die map bóven de geopende map. Naast een bestand verschijnt een knop waarmee bezoekers de instellingen kunnen wijzigingen. Na het activeren van de knop opent een menu. Wanneer bezoekers daar doorheen navigeren met het toetsenbord en daarna vérder navigeren, blijft het menu open staan, over andere content heen. Zorg ervoor dat het menu automatisch sluit.

Bevinding 44: Op onder andere pagina https://toegankelijkheid.mett.nl/alle+modules/eparticipatie/stemmen/default.aspx kunnen bezoekers met de knop 'Filteropties' filters selecteren. Wanneer deze knop opent en de bezoeker verder navigeert, blijft de inhoud daarna geopend staan. Zorg ervoor dat de content automatisch sluit of dat de bezoeker in het menu blijft totdat deze gesloten wordt met bijvoorbeeld een sluitknop.

Bevinding 45: Op pagina https://toegankelijkheid.mett.nl/Shortcuts/Users_EditProfile.aspx#tab=imageTab kunnen bezoekers hun profielfoto uploaden, bijsnijden en draaien. Nadat de bezoeker instellingen in een dialoogvenster heeft opgeslagen, bijvoorbeeld 'Bijsnijden' sluit het venster en wordt de focus weer helemaal bovenaan de pagina gezet, in plaats van op de knop 'Bijsnijden'. Zorg ervoor dat de focus zich weer hervat vanaf de knop waarmee de bezoeker het dialoogvenster heeft geopend. Dit komt op meerdere plekken voor. Een vergelijkbaar probleem doet zich voor met de knop 'Draaien', waarbij de focus daarna naar 'Profielfoto verwijderen' gaat in plaats van op de knop 'Draaien' te blijven.

Bevinding 46: Op pagina https://toegankelijkheid.mett.nl/alle+modules/eparticipatie/kaartweergave/default.aspx komt een kaartapplicatie voor. Wanneer een bezoeker de knop 'Sneltoetsen' opent, komt de focus niet op het dialoogvenster maar gaat naar de adresbalk. Na het sluiten van het dialoogvenster keert de focus vervolgens niet terug naar de knop 'Sneltoetsen' maar naar het zoekvenster. Dit is geen logische focusvolgorde. Zorg ervoor dat de focus in het dialoogvenster komt en daar blijft tot de bezoeker het venster sluit en breng de focus daarna weer terug op de knop die het venster opende. Op meer plaatsen in de applicatie gaat het mis met de focusvolgorde, bijvoorbeeld bij het openen van de locatie. Omdat kaarten en kaartapplicaties onder een uitzondering vallen voor de Nederlandse wet, mag hiervoor een uitzondering worden geclaimd in de toegankelijkheidsverklaring.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 47: Op meerdere pagina's komen links voor zonder linkdoel, omdat er een alt-attribuut op het a-element is geplaatst in plaats van een aria-label, of een waarde achter het alt-attribuut op de afbeelding. Daarnaast zijn deze links overbodig. Zie succescriterium 1.1.1 voor meer uitleg.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 48: Op onder andere de homepage komt een knop voor waarmee bezoekers een pagina aan hun favorieten kunnen toevoegen. Deze knop heeft de vorm van een ster en heeft als toegankelijke naam 'Toevoegen aan favorieten'. Wanneer deze knop focus heeft, is dat niet zichtbaar. Zorg ervoor dat bezoekers die gebruik maken van het toetsenbord om over de website te navigeren weten waar zij zich bevinden door een duidelijk focusstijl toe te voegen.

Bevinding 49: Wanneer de knop om naar een vorige maand te gaan, op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/default.aspx, focus heeft is dat niet goed zichtbaar omdat een deel van de focusrand bedekt. Zorg ervoor dat bezoekers die gebruik maken van het toetsenbord om over de website te navigeren weten waar zij zich bevinden door een duidelijk focusstijl toe te voegen. Een vergelijkbaar probleem doet zich voor op de profielfoto op pagina https://toegankelijkheid.mett.nl/shortcuts/Users_ShowProfile.aspx#tab=updatesTab, op pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/Articles_AddArticle.aspx#tab=imageTab en op pagina https://toegankelijkheid.mett.nl/alle+modules/beeldbank/default.aspx bij de te selecteren afbeeldingen.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 50: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=contentTab kunnen bezoekers een omschrijving van een afspraak schrijven in een tekstverwerker. Het zichtbare label is 'Omschrijving van de afspraak' maar de toegankelijke naam van de applicatie is 'Tekstverwerker - omschrijving van het punt'. Zorg ervoor dat de zichtbare naam tenminste voorkomt in de toegankelijke naam, zodat bezoekers die gebruik maken van spraakgestuurde navigatie deze applicatie makkelijker kunnen bereiken. Dit doet zich ook voor op pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/Articles_AddArticle.aspx#tab=imageTab.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 51: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/default.aspx#tab=acceptedTab hebben de knoppen om naar een vorige of volgende maand te gaan een Engelstalige naam. In dit geval is de toegankelijkste oplossing om de knoppen een Nederlandstalige naam te geven, bijvoorbeeld 'Volgende maand' en 'Vorige maand'.

Bevinding 52: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=imageTab kunnen bezoekers een afbeelding toevoegen. De taal in de visuele tabel is Engels, maar hier is geen taalwissel voor aangegeven. Geef een taalwissel aan, of idealiter, vertaal de teksten. Een vergelijkbare situatie doet zich voor op pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/Articles_AddArticle.aspx#tab=imageTab.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Onvoldoende

Bevinding 53: Op pagina https://toegankelijkheid.mett.nl/Shortcuts/Users_EditProfile.aspx#tab=imageTab kunnen bezoekers hun profielfoto opslaan. Nadat zij op deze pagina op opslaan hebben geklikt, wordt de bezoeker direct naar een totaal andere pagina verwezen, namelijk https://toegankelijkheid.mett.nl/Shortcuts/Users_ShowProfile.aspx#tab=updatesTab. Dit is verwarrend en storend. Zorg ervoor dat ofwel 'Opslaan' alleen de pagina opslaat (en eventueel ververst), ofwel pas de naam aan naar 'Opslaan en terug naar profiel'.

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 54: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=contentTab kunnen bezoekers een datum kiezen door via de comboboxen getallen te kiezen die gezamenlijk één datum vormen. Visueel is alleen de tekst 'Begintijd van de afspraak' en 'Eindtijd van de afspraak' aanwezig. Hierdoor is het voor sommige bezoekers niet duidelijk welke informatie zij precies selecteren. In de toegankelijke naam van de comboboxen is wel een duidelijke beschrijving aanwezig, bijvoorbeeld 'Kies een maand'. Zorg ervoor dat deze informatie ook zichtbaar is als label boven de combobox. Een vergelijkbare situatie doet zich voor op pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/Articles_AddArticle.aspx#tab=imageTab.

Bevinding 55:
Op pagina https://toegankelijkheid.mett.nl/alle+modules/eparticipatie/kaartweergave/default.aspx komt een kaartapplicatie voor. Het zoekvenster heeft als visueel label alleen een placeholdertekst, dit is niet voldoende. Zorg ervoor dat er een permanent zichtbaar label aanwezig is. Er is wel een afbeelding aanwezig van een vergrootglas, maar dat is onderdeel van een losstaande knop en daardoor ook niet voldoende. Omdat kaarten en kaartapplicaties onder een uitzondering vallen voor de Nederlandse wet, mag hiervoor een uitzondering worden geclaimd in de toegankelijkheidsverklaring.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 56: Bovenaan iedere pagina staat een navigatiemenu. Deze is opgemaakt in een div-element zonder rol, waar een aria-labelledby attribuut op is gebruikt. Dit attribuut is niet bedoeld voor elementen zonder rol. Gebruik bij voorkeur een nav-element (zodat deze gelijk de juiste toetsenbordfunctionaliteit bevat), of geef het div-element een geschikte rol (voeg hierbij de juiste toetsenbordfunctionaliteit toe).

Bevinding 57: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=contentTab komt onder 'Welke extra informatie wil je toevoegen?' een tablist voor. In die tablist zijn a-elementen genest. Zorg ervoor interactieve elementen niet in andere interactieve elementen zijn genest, dit kan bij verschillende combinaties van browsers en hulpsoftware voor toegankelijkheidsproblemen zorgen. Dit doet zich ook voor in de listbox onder 'Afspraakleur', waar linkelementen zijn genest in een element met de rol 'option'.

Bevinding 58: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=contentTab komt visueel een select-element voor met als titel 'Afspraakkleur'. Dit is een uitklapbare knop. Het aria-expanded attribuut is op een div-element zonder rol geplaatst, dit is niet toegestaan.

Bevinding 59: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=usersTab, onder het tabblad 'Uitnodigen' komen twee select-elementen voor zonder toegankelijke naam. Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=imageTab komen drie select-elementen voor zonder toegankelijke naam. Een vergelijkbare situatie doet zich voor op pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/Articles_AddArticle.aspx#tab=imageTab.

Bevinding 60: Op pagina https://toegankelijkheid.mett.nl/alle+modules/agenda/Events_AddEvent.aspx#tab=usersTab, onder het tabblad 'Uitnodigen' komen twee select-elementen voor. Hierin zijn visueel selectievierkantjes aanwezig, met daarnaast tekst. Deze elementen hebben geen naam en geen rol. Een vergelijkbare situatie doet zich voor op pagina https://toegankelijkheid.mett.nl/alle+modules/nieuws/Articles_AddArticle.aspx#tab=imageTab.

Bevinding 61: Op pagina https://toegankelijkheid.mett.nl/alle+modules/standaard/default.aspx is een iframe zonder titel aanwezig. Zorg ervoor dat iframes een beschrijvende titel hebben.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 62: Wanneer bezoekers het formulier op pagina https://toegankelijkheid.mett.nl/Beheer/Formulierenmodule/1630539.aspx?t=Formulier verzenden, verschijnt de melding 'Een momentje...'. Deze informatie is niet beschikbaar voor hulpsoftware. Zorg ervoor dat statusmeldingen beschikbaar zijn en voorgelezen kunnen worden.

Bevinding 63: Op pagina https://toegankelijkheid.mett.nl/Shortcuts/Users_EditProfile.aspx#tab=imageTab kunnen bezoekers onder andere een profielfoto uploaden en draaien. Na het draaien is er een statusupdate aanwezig in de code, maar omdat deze het attribuut display: none bevat is deze ook niet beschikbaar voor hulpsoftware. Daarom wordt nu enkel het woord 'Leeg' voorgelezen. Zorg ervoor dat statusmeldingen beschikbaar zijn en voorgelezen kunnen worden.

Bevinding 64: Op pagina https://toegankelijkheid.mett.nl/alle+modules/beeldbank/default.aspx komt een beeldbank voor, waarbij als een bezoeker daar focus op heeft, de gehele inhoud wordt voorgelezen. Hierdoor hoort een bezoeker bijvoorbeeld '1 keer gelezen. 5 keer gelezen. 4 keer gelezen. 3 reacties. 2 reacties. 0 reacties. link'. Dit is heel erg verwarrend en wordt veroorzaakt door de verschillende aria status settings die zijn gebruikt in de widget. Verwijder deze onnodige statusupdates.

Bevinding 65: Ook op pagina https://toegankelijkheid.mett.nl/alle+modules/faq/default.aspx worden aria-live statussen gebruikt, waar dat niet relevant en niet nodig is. Hierdoor wordt de inhoud van het hele blok content al voorgelezen, terwijl die nog niet zichtbaar is. Ook zorgt dit dat wél relevante informatie (bijvoorbeeld na het klikken op een uitklapbare knop) niet meer wordt voorgelezen. Verwijder deze onnodige statusupdates.

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

Ondersteunende technieken

Bronnen

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

Geprint: 2024-11-24 12:09:32 v2.4-011