Toegankelijkheidsonderzoek

Rapport:
Deelonderzoek techniek platform Mett (2022)


Onderzoeker
200 OK, Jules Ernst
Datum
20 april 2022
Opdrachtgever
Mett, Jasper Ludolph

Samenvatting onderzoeksresultaat

De website Mett voldoet nog niet aan WCAG 2.1 niveau AA. Er zijn 23 van de 50 succescriteria waar één of meer fouten zijn gevonden. In dit document is vastgelegd in hoeverre de website voldoet aan de toegankelijkheidseisen die vastgelegd zijn in WCAG, de Web Content Accessibility Guidelines.

Het platform van Mett is onderzocht in maart/april 2022. Het onderzoek is uitgevoerd aan de hand van de evaluatiemethode WCAG-EM. De website voldoet niet aan alle succescriteria. Voor dit systeemonderzoek/platformonderzoek zijn alle templatetypes, componenten en functionaliteit gecontroleerd. Op 2 websites die live staan zijn bevindingen vergeleken om een goed beeld te krijgen van de technische opbouw van het platform. Organisaties die gebruik maken van dit platform op een ander domein- of subdomeinnaam kunnen een deelonderzoek uit te laten voeren op de content en het kleurgebruik. De 2 rapporten bepalen gezamenlijk in welke mate de website voldoet. Tevens kunnen de 2 rapporten gezamenlijk gebruikt worden in de toegankelijkheidsverklaring.

Het onderzoek richt zich specifiek op de toegankelijkheid van de website voor mensen met een functiebeperking, zoals mensen die blind, doof, laaggeletterd zijn of andere functieproblemen hebben. Voor hen is het van belang dat de website technisch en inhoudelijk zo is ingericht dat de site voor hen goed bruikbaar is. Een website optimaliseren voor toegankelijkheid heeft meer voordelen; het maakt de website beter bruikbaar voor iedereen (bijvoorbeeld ook voor mensen die op hun mobieltje kijken in een zonnige omgeving) en het maakt de site beter vindbaar in zoekmachines.

Scope van de evaluatie

Naam website Mett
Scope van de website
  • Alle templates, componenten en functionaliteit op toegankelijkheid.mett.nl
  • Niet de pagina's op andere subdomeinen of het hoofddomein van mett.nl
  • Niet de content voor zover dit probleem door de redacteur is veroorzaakt.
Als extra controle en voorbeeld zijn 2 websites in het technisch onderzoek gebruikt.
Conformiteitsdoel WCAG 2.1 niveau AA
Verdere evaluatievereisten Deze audit betreft een systeemonderzoek. Alle beschikbare functionaliteit van het platform is onderzocht. Deelnemers van het platform moeten een eigen deelonderzoek op de content laten uitvoeren. De twee rapporten bepalen samen de mate van conformiteit.
Basisniveau van toegankelijkheid ondersteund Gangbare browsers en hulpsoftware

Overzicht toetsresultaat

Principe Voldoende Onvoldoende Onbekend
1 Waarneembaar 12 8 0
2 Bedienbaar 9 8 0
3 Begrijpelijk 6 4 0
4 Robuust 0 3 0
Totaal 27 23 0

Leeswijzer

Dit onderzoek is een momentopname. De website kan inmiddels veranderd zijn. De gevonden problemen zijn slechts voorbeelden. Ga daarom bij elk probleem de gehele website na of dit ook op andere plaatsen voorkomt. Dit onderzoek is slechts een steekproef van een aantal pagina's. Er zijn zo veel mogelijk verschillende type pagina's opgenomen in de sample om zo een goede indruk te krijgen van de toegankelijkheid. Let op! Bij het aanbrengen van verbeteringen of wijzigingen op de website/app kunnen nieuwe problemen ontstaan. Succescriteria gemarkeerd met "Niet aanwezig" worden automatisch goedgekeurd. Succescriteria gemarkeerd met "Onbekend" worden niet goedgekeurd.

Uitgebreide toetsresultaten


1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve voor de hierna vermelde situaties.

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevindingen: In de header is het Mett-logo te zien met daarachter het woord demo. In de alternatieve tekst bij de afbeelding ontbreekt de naam 'Mett'. Zorg dat de tekst uit het logo in de alt-tekst voorkomt. Bijvoorbeeld: 'Mett demo logo'. In de 2 voorbeeld-websites hebben de logo's een correcte alternatieve tekst.

In de footer (id="bottom") is het Mett-logo te zien met een slogan erachter. Het logo is een afbeelding waar de alt-tekst van leeg is gelaten. Hier moet als alternatieve tekst 'Mett-logo' komen te staan.

Bij het inlogscherm zijn de verplichte velden gemarkeerd met een sterretje. Nergens staat de betekenis van het sterretje. Niet elke screenreader leest '*' voor, zorg er daarom voor dat er op een andere manier doorgegeven wordt dat er het veld verplicht is. Bijvoorbeeld door toevoegen van de tekst '(Verplicht)' via 'screenReaderContent'.

Bij het uploaden van bestanden op democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/… kan je meerdere afbeeldingen kiezen. Dit wordt netjes getoond in een rood rondje met een wit cijfer erin. De screenreader leest op die plek voor 'link Afbeelding 3'. Zet achter het cijfer een tekst waarmee verduidelijkt wordt wat dit cijfer op deze plek betekent, bijvoorbeeld ' gekozen bestanden'.

Op pagina democommunity.mett.nl/vind-elkaar/leden+-+experts/ kan je filteren. Als je opties hebt ingesteld voor het filteren zie je een rood rondje met een wit getal bij het filter. Dit getal (en de betekenis) wordt niet altijd voorgelezen door screenreadeers. Onduidelijk is waarom dit niet doorgegeven wordt. Zorg dat deze tekst altijd beschikbaar is voor een screenreader.

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+stellingen/ (Stelling) is in een balkje van rood en groen 2 percentages te zien, namelijk het percentage eens en oneens. Mensen die het scherm niet (goed) kunnen zien en gebruikmaken van een screenreader krijgen enkel de percentages voorgelezen, '85% 15%'. Zorg dat ook duidelijk wordt gemaakt waar 85% en waar 15% bij hoort, door bijvoorbeeld de tekst 'Eens' en 'Oneens' toe te voegen.

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+stemmen/ (Stemmen) staat bij de resultaten achter de stemknop '8 / 16 stemmen'. De screenreader leest dit voor als '8 slash 16 stemmen'. Niet duidelijk is wat hier de bedoeling van is. Ik vermoed dat er maximaal 16 leden zijn en dat er inmiddels 8 hebben gestemd. Het is beter om de '/' een alternatieve tekst te geven ' van ', zodat deze tekst betekenisvoller wordt voorgelezen.

Op pagina democommunity.mett.nl/vind-elkaar/user.aspx staat het telefoonnummer vermeld met ervoor een icoon van een telefoonhoorn. De alt-tekst bij deze icoon luidt 'Telefoon (1)'. Als deze regel wordt voorgelezen lijkt het net of de 1 het eerste nummer is van het telefoonnummer. Zorg dat de alt-tekst hier 'Telefoon' is om verwarring te voorkomen. Als er meerdere telefoonnummers zijn wordt visueel ook geen nummertje gebruikt. Overigens wordt de telefoonhoorn voor zowel 'Telefoon' als 'Mobiel' gebruikt. Hierdoor heeft iemand met een screenreader betere informatie dan iemand die het scherm kan zien.

Op een van de twee live websites is in de footer het twitter-logo aanwezig. Deze afbeelding is klikbaar en moet dan ook een goede linktekst bevatten. Zorg dat in de alttekst 'Twitter' wordt opgenomen. Deze bevinding is ook gerelateerd aan SC 2.4.4 en 4.1.2.

Op de homepage van een van de twee live websites is de hele introtekst opgemaakt met het strong-element. Het probleem is dat strong bedoeld is om nadruk te geven aan een of enkele woorden, niet voor een hele zinnen. Gebruik geen strong maar zorg dat in het CMS de mogelijkheid is om een introtekst op te geven die op de website met een vet lettertype getoond wordt.


1.2 Op tijd gebaseerde media

1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (Niveau A)

Voor media met vooraf opgenomen louter-geluid en vooraf opgenomen louter-videobeeld is het volgende waar, behalve als de audio of video een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld:

Informatie over succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)

Uitkomst: Niet aanwezig

Bevindingen: Succescriteria 1.2.1 tot en met 1.2.5 gaan over audio en video. Dit zit niet standaard op het platform van Mett. Deze content kan door de redacties via het platform gepubliceerd worden. In dit onderzoek is deze content buiten beschouwing gelaten.


1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Er worden ondertitels voor doven en slechthorenden geleverd voor alle vooraf opgenomen audiocontent in gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Niet aanwezig


1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Er wordt een alternatief geleverd voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen videocontent geleverd voor gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Niet aanwezig


1.2.4 Ondertitels voor doven en slechthorenden (live) (Niveau AA)

Er worden ondertitels voor doven en slechthorenden geleverd voor alle live audiocontent in gesynchroniseerde media.

Informatie over succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)

Uitkomst: Niet aanwezig


1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Er wordt een audiodescriptie geleverd voor alle vooraf opgenomen videocontent in gesynchroniseerde media.

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Niet aanwezig


1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevindingen: Op de homepage democommunity.mett.nl/ is de koppenstructuur niet helemaal duidelijk. De laatste kop met kopniveau 2 is 'Uitstel locatie zonnevelden Utrecht'. Alle volgende koppen hebben een kopniveau 3 en lijken daardoor te vallen onder het laatste actuele bericht. Gebruik op niveau 3 een kopniveau 2, of maak gebruik van visueel niet zichtbare kopjes van niveau 2 die de onderliggende content beschrijven.

Op de homepage van democommunity.mett.nl/ wordt in het blok 'Neem een kijkje' een opsomming van 4 items met vinkje getoond. Deze content zou in een ul-element met li-elementen geplaatst moeten worden. (Dit is waarschijnlijk een contentissue).
Dit komt ook voor onder het kopje 'Wat vind je in deze community?'

De streep onder het menu-item 'Nieuws' op de nieuwsberichten van een van de twee live websites geeft aan dat de bezoeker zich op die pagina bevindt. In de code wordt dit niet aangegeven en kan hulpsoftware niet opmaken dat 'Nieuws' de huidige pagina is.
Dit komt ook voor op democommunity.mett.nl/de-kennisbank/ ; hier is de huidige pagina herkenbaar aan het witte vlak in het menu.

Op de welkom-pagina democommunity.mett.nl/community/ lopen de kopniveaus nogal door elkaar. Zo heeft 'Duurzame initiatieven' een h3 en 'Warme wijken - spin off' een h2. Visueel zouden de kopniveaus omgekeerd moeten zijn. Dit geldt ook voor 'Stelling van de week' en de onderliggende stelling.

Wanneer een foutmelding verschijnt op de login-pagina van een van de 2 live-websites is de hele tekst 'Let op: Het formulier kon niet verzonden worden. Los de volgende punten op en verstuur het formulier opnieuw.' opgemaakt in een H2-element. Maak niet van hele alinea's een kop; houd de kop kort en bondig. Wellicht is het hier zinvol om hier een kop boven de alinea te plaatsen met een korte tekst dat aanduidt dat er fouten zijn gevonden.

Op de welkom-pagina democommunity.mett.nl/community/ zijn de teksten in de 3 call-to-action knoppen (beginnend bij 'Deel je kennis Leer van elkaar') als kop opgemaakt. De kop bevat geen content omdat deze direct wordt opgevolgd door de volgende kop 'Vraag elkaar Stel je vraag'. Bezoekers die gebruikmaken van voorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Maak van de kop gewone tekst.

Advies: Op pagina democommunity.mett.nl/agenda/ ontbreekt een kop met kopniveau 1. De kop is wel aanwezig in de code, maar is met 'display: none' onzichtbaar gemaakt. De kop zou ook alleen visueel onzichtbaar gemaakt kunnen worden en wel zichtbaar gehouden kunnen worden voor hulpsoftware. Nog beter is om de kop te tonen zodat mensen die op 'Agenda' in de hoofdnavigatie hebben geklikt zien dat ze op de juiste pagina staan.

De agenda (Kalender) heeft het uiterlijk van een tabel. Alleen de informatie (dagen, dag, en maand) zijn niet duidelijk. Er zijn toegankelijke alternatieven. Zorg dat de bezoeker weet dat deze verschijningsvorm niet de toegankelijke variant is.

Op pagina democommunity.mett.nl/in-gesprek/ is een tekst als kop is een kop 'Op het prikbord' met kopniveau 2. Onder deze kop staat direct weer een kop met kopniveau 2. Dit zijn de koppen van de berichten eronder. Zorg dat deze een kopniveau 3 krijgen zodat 'Op het prikbord content bevat.'.
Overigens ontbreekt op deze pagina de H1, maar dat is een best practice.

Advies: Op pagina democommunity.mett.nl/agenda/agenda+-+timeline/default.aspx (agenda-timeline) zijn er koppen aangebracht voor de voorgaande jaren. Voor het huidige jaar ontbreekt deze. Het zou voor een screenreadergebruiker handig zijn als ook voor het huidige jaar een kop met kopniveau 2 aanwezig is.

Op pagina democommunity.mett.nl/agenda/agenda+-+timeline/default.aspx (agenda-timeline) is de scheiding tussen de evenementen niet duidelijk. Dit is bijvoorbeeld op te lossen door de naam van het evenement als een kop van kopniveau 3 te markeren.

Op pagina democommunity.mett.nl/in-gesprek/ is de koppenstructuur niet logisch. Zo is de kop 'Het openbaar vervoer (OV) moet goedkoper' van kopniveau 2. Alle volgende koppen op de pagina hebben kopniveau 3 waardoor het lijkt alsof al deze informatie onder het bericht van het openbaar vervoer valt.

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+stellingen/default.aspx (Stelling) is een filterknop met daarin een cijfer. Hier is gebruikgemaakt van een span-element zoals in een vorig onderzoek was geadviseerd. Helaas werkt deze methode om content met aria-label voor te laten lezen niet op een span-element. Dit moet op een andere wijze opgelost worden, bijvoorbeeld door middel van 'screenReaderContent''.

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+groepen/1844795.aspx zijn 4 tabjes 'Updates', 'Omschrijving', 'Leden' en 'Bestanden'. Onder bestanden zie je een overzicht. Hier verwacht je een opsomming of zoals het er visueel uitziet een tabel. Het is nu geen van beide. Een oplossing met een ul-element of table-element zorgt ervoor dat blinden en slechtzienden beter geïnformeerd worden over bijvoorbeeld de hoeveelheid informatie. In dit geval opsomming met X items of tabel met X rijen. Gebruik semantiek die hoort bij de visuele weergave.

In de footer van een van de 2 live websites is de groep links in de footer waar onder andere de link 'Privacyverklaring' in staat opgemaakt als een lijst. In dit ul-element staan meerdere lege li-elementen.


1.3.2 Betekenisvolle volgorde (Niveau A)

Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een correcte leesvolgorde door software bepaald worden.

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevindingen: Op de homepage democommunity.mett.nl/ zijn onder 'Actueel' zogenaamde cards met daarop allerlei informatie die betrekking hebben op één bericht. Zo zie je een afbeelding, een kop, een datum en tekst. De volgorde van deze informatie klopt niet. De afbeelding met een alt-tekst staat boven de kop. Hierdoor lijkt het alsof de afbeelding van het 2e bericht bij het 1e bericht hoort. Zorg dat in de HTML alle content die bij de kop van het bericht hoort onder deze kop komt te staan. Visueel mag deze volgorde wel aangehouden worden.

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+deel+je+kennis/ zijn cards (itemContent) met een klikbare afbeelding met alternatieve tekst en daaronder de kop. In de leesvolgorde zou je eerst de kop en dan de afbeelding verwachten. Visueel is de volgorde in orde, voor voorleessoftware zou eerst de kop bij zo'n contentblok voorgelezen moeten worden.

Op pagina democommunity.mett.nl/vind-elkaar/user.aspx (Profiel van een persoon) verschijnt in de content achtereenvolgens een afbeelding met als alternatieve tekst 'Profielfoto wijzigen', de knop 'Volgen' en dan pas de kop van de pagina, de naam van de persoon. Omdat de profielfoto en de knop boven de kop staat kan deze informatie gemist worden door iemand die met hulpsoftware door de pagina navigeert.

Op pagina democommunity.mett.nl/vind-elkaar/leden+-+experts/ staan de persoongegevens. Hier staat de voornaam en de afbeeldingen met de alt-tekst 'Profiel wijzigen' voor de kop. Zorg dat eerst de kop komt en dan de rest van alle informatie op een card.

Op het contactformulier van een van de 2 live websites kan een akkoord gegeven worden op het gebruik van de contactgegevens. Groepeer de radio-button en het label met de tekst die boven de radio-button staat door middel van fieldset en legend. Overigens is het beter om in plaats van een radio-button een checkbox te gebruiken.


1.3.3 Zintuiglijke eigenschappen (Niveau A)

Instructies die geleverd worden om content te begrijpen en te bedienen zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, visuele locatie, oriëntatie of geluid.

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Voldoende

Bevindingen: Op pagina democommunity.mett.nl/in-gesprek/interactie+-+stellingen/1490951.aspx kun je een reactie geven onder 'ik stem voor' of 'ik stem tegen'. Deze reactie wordt onder in kolommen geplaatst. Het is echter niet duidelijk waar de eerste kolom begint en weer eindigt; voor mensen die het scherm niet (goed) kunnen zien is dan ook niet duidelijk welke reactie bij een en welke bij oneens hoort. Omdat ook niet duidelijk is voor mensen die het wel kunnen zien is dit geen reden tot afkeur volgens WCAG. Maar als de kolommen echt betekenis hebben, dan zou dit ook in de mobiele variant zichtbaar moeten zijn.


1.3.4 Weergavestand (Niveau AA)

De content beperkt de weergave en bediening niet tot een enkele presentatie-oriëntatie, zoals staand of liggend, tenzij een specifieke presentatie-oriëntatie essentieel is.

Informatie over succescriterium 1.3.4 Weergavestand

Uitkomst: Voldoende


1.3.5 Identificeer het doel van de input (Niveau AA)

Het doel van elk invoerveld waarmee informatie van de gebruiker wordt verzameld, kan door software bepaald worden wanneer:

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Voldoende


1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevindingen: De links in de lopende tekst op pagina democommunity.mett.nl/agenda/agenda+-+lijst/, zijn niet herkenbaar in de lopende tekst. Deze zien er hetzelfde uit als de woorden 'evenementen' en 'bijeenkomsten' die benadrukt zijn in dezelfde alinea. Zorg ervoor dat hyperlinks in lopende tekst visueel onderscheidbaar zijn bijvoorbeeld door ze te onderstrepen.

Op pagina democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx (Afspraak toevoegen) kan je de 'Titel van de afspraak' invullen. Deze mag maximaal 100 tekens bevatten. Als de 100 tekens zijn bereikt zal bij het 101e teken de rand van het veld een andere kleur krijgen. Zorg ervoor dat dit ook op een andere manier zichtbaar wordt gemaakt, bijvoorbeeld met een tekstuele foutmelding.

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/… (Stel je vraag) kun je de inhoud van je vraag typen in een zogenaamde WYSIWYG-editor. Hier zitten functies in als kleur aan tekst toevoegen, een Kop 1 selecteren en teksten onderstrepen. Laat een aantal van die functies achterwege om te voorkomen dat er (te gemakkelijk) ontoegankelijke content geproduceerd kan worden. Wellicht is het handig om een knop bij dit veld toe te voegen naar een helpscherm waar een aantal eenvoudige toegankelijkheidsonderwepen voor content kort behandeld worden.

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+stellingen/ (Stelling) is in een groene en rode balk het aantal stemmen eens en oneens in beeld gebracht. Visueel is er op een desktop al voldoende informatie om de hoeveelheid te zien. De knop 'Eens' staat links en de knop 'Oneens' rechts. Gebruik om het balkje ook voldoende onderscheid te geven een scheidingslijn tussen rood en groen. Bijvoorbeeld een zwarte verticale lijn en maak deze lijn minimaal 2 pixels breed. Op smalle schermen staan de knoppen met het duimpje niet meer naast elkaar maar onder elkaar. Dan is het verschil tussen groen en rood alleen nog door kleur zichtbaar. Zorg dus dat dit duidelijk is door bijvoorbeeld de bijbehorende duimpje in het groene en rode vlak van de balk te plaatsen.


1.4.2 Geluidsbediening (Niveau A)

Als een geluidsweergave op een webpagina automatisch meer dan 3 seconden speelt, is er of een mechanisme beschikbaar om de geluidsweergave te pauzeren of te stoppen, of er is een mechanisme beschikbaar om het geluidsvolume onafhankelijk van het overall systeemvolume te regelen.

Informatie over succescriterium 1.4.2 Geluidsbediening

Uitkomst: Niet aanwezig


1.4.3 Contrast (minimum) (Niveau AA)

De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in de volgende gevallen:

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevindingen: Op een aantal plekken is het contrast te laag. Dit valt niet onder het technisch onderzoek, omdat de kleuren per website kunnen verschillen. Het is wel goed om de demo-omgeving een uiterlijk te geven waar het contrast voldoet. Het gaat hier onder andere om de rode achtergrond met witte tekst en de combinatie van oranje met wit.

Zo wordt bijvoorbeeld bij Afspraak toevoegen lichtoranje tekst gebruikt op een gele achtergrond bij 'Begintijd van de afspraak' als je er iets fout hebt getypt.


1.4.4 Herschalen van tekst (Niveau AA)

Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit.

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevindingen: Wanneer bij een schermgrootte van 1280px breed ingezoomd wordt tot 200% dan komen op sommige pagina's delen van de content, bijvoorbeeld 'bibliotheek' in het menu, over andere elementen heen te staan. De tekst wordt daardoor slecht of niet leesbaar. Dit gebeurt op meer plekken op de pagina.

Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% dan verdwijnt op de homepage een van de twee live websites een deel van de tekst vlak onder de header buiten beeld omdat het blauwe vlak smaller wordt in hoogte.

Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 133% dan wordt op pagina van een van de twee live websites verdwijnt het kruimelpad uit beeld.

Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% dan is bij de hCaptcha de vraag met de plaatjes niet te raden. De vraag staat buiten beeld en je weet nu niet wat je moet kiezen.

In het inlogscherm van Mett wordt de volgende code gebruikt in de HTML: maximum-scale=1.0 en user-scalable=no. Mensen die de letters willen vergroten bij het inloggen kunnen dit op sommige apparaten mogelijk niet doen.


1.4.5 Afbeeldingen van tekst (Niveau AA)

Als de gebruikte technologieën de visuele weergave tot stand kunnen brengen, wordt tekst gebruikt in plaats van afbeeldingen van tekst om informatie over te brengen, behalve in de volgende gevallen:

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Voldoende


1.4.10 Reflow (Niveau AA)

Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor:

Met uitzondering van delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen.

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevindingen: Op een van de twee live websites is onderop de knop 'Cookie-instellingen'. Als je hierop klikt krijg je een dialoogvenster. Wanneer bij een schermgrootte van 1280x1024px wordt ingezoomd tot 300% dan komt de content kriskras over elkaar heen staan. Bij 400% is de content onbereikbaar. Zorg dat op lage resoluties de content goed bereikbaar blijft.

Wanneer bij een schermgrootte van 1280x1024px op alle pagina's wordt ingezoomd tot 400% is de meeste content slecht bereikbaar.


1.4.11 Contrast van niet-tekstuele content (Niveau AA)

De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren:

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevindingen: Het contrast van de lichtgrijze schakelknop op de witte achtergrond op pagina democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx (Afspraak toevoegen) is te laag. De contrastverhouding is hier 1,3:1, waar dit minimaal 3:1 moet zijn.

Op democommunity.mett.nl/in-gesprek/interactie-initiatieven/ (initiatievenkaart) is een kaartje met daarop een aantal klikbare locaties. Geef deze locaties voldoende contrast door er bijvoorbeeld een donkere rand om het klikbare element te plaatsen. In de kaart zelf komen soortgelijke afbeeldingen voor die net klikbaar zijn. Door de de afbeeldingen te omranden is daarmee ook verschil tussen de interactieve en niet-interactieve locaties duidelijk.
Overigens is er een toegankelijk variant, namelijk de lijstvorm. Dit moet dan ook als zodanig gecommuniceerd worden, iets in de trant van: dezelfde informatie is in toegankelijk vorm aanwezig in een lijst.


1.4.12 Tekstafstand (Niveau AA)

Bij content die wordt geïmplementeerd met opmaaktalen die de volgende stijleigenschappen voor tekst ondersteunen, is er geen sprake van verlies van content of functionaliteit door het instellen van alle volgende, en door het niet wijzigen van andere stijleigenschappen:

Uitzondering: Menselijke talen en scripts die geen gebruik maken van een of meer van deze stijleigenschappen voor tekst in schriftelijke tekst, kunnen voldoen aan de eisen door alleen gebruik te maken van de eigenschappen die bestaan voor de betreffende combinatie van taal en script.

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Voldoende


1.4.13 Content bij hover of focus (Niveau AA)

Wanneer aanvullende content zichtbaar wordt en daarna weer verborgen, door het gebruik van hover met de aanwijzer of focus met het toetsenbord, gelden de volgende zaken:

Uitzondering: De visuele weergave van de aanvullende content wordt beheerd door de user agent en wordt niet aangepast door de auteur.

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Voldoende


2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten.

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevindingen: Op pagina democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx (Afspraak toevoegen) kan je uit een lijst een afspraakkleur kiezen. Met het toetsenbord is geen kleur uit te kiezen. (Zie ook 4.1.2)

Op meerdere pagina's waar een bezoeker zelf een bijdrage kan toevoegen aan de website wordt er gebruikgemaakt van CKeditor, een WYSIWYG-editor die hetzelfde werkt als een tekstverwerker. Als dit veld de focus krijgt wordt direct omgeroepen door de screenreader dat er met Alt+0 hulp opgeroepen kan worden.
Vervolgens verschijnt er een helpscherm waarmee een screenreadergebruiker uitgelegd krijgt hoe met de toetsen omgegaan moet worden om alle knoppen te bedienen. Helaas is deze hulp niet beschikbaar voor iemand die het scherm kan zien en gebruikmaakt van het toetsenbord. Zorg dat er een help-knop is buiten de WYSIWYG-editor zodat een toetsenbordgebruiker zonder screenreader ook weet hoe met de editor bediend moet worden.

Advies: Op pagina democommunity.mett.nl/de-kennisbank/kennis+delen+-+documenten/ kan ja kiezen voor 'Bestand toevoegen'. Als je op deze knop klikt verschijnt er een dialoogvenster. Dit venster kan je met de sluitknop sluiten. Het is ook gebruikelijk dat dialoogvensters waar geen actie is vereist met de Escapetoets zijn te sluiten.
Dit komt ook bij andere dialoogvensters voor zoals 'Kopieer link'.
Bij het veld 'Omschrijving van de map' kan met Alt+0 een helpvenster opgeroepen worden. Hier zit die functionaliteit er wel in.


2.1.2 Geen toetsenbordval (Niveau A)

Als de toetsenbordfocus met de toetsenbordinterface verplaatst kan worden naar een component van de pagina, dan kan de focus ook met alleen de toetsenbordinterface weer van dat component weg worden bewogen. En, als er meer nodig is dan de standaard pijl- of tabtoetsen of andere standaard methoden om de focus te verplaatsen, dan wordt de gebruiker geïnformeerd over de manier waarop de focus kan worden verplaatst.

Informatie over succescriterium 2.1.2 Geen toetsenbordval

Uitkomst: Voldoende


2.1.4 Enkel teken sneltoets (Niveau A)

Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken, geldt ten minste één van de volgende zaken:

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Voldoende


2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Voor elke tijdslimiet die door de content wordt ingesteld, geldt ten minste één van de volgende zaken:

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Uitkomst: Voldoende


2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Voor alle bewegende, knipperende, scrollende of automatisch actualiserende informatie gelden alle volgende zaken:

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Uitkomst: Voldoende


2.3 Toevallen en fysieke reacties

2.3.1 Drie flitsen of beneden drempelwaarde (Niveau A)

Webpagina's bevatten niets wat meer dan drie keer flitst in enige periode van één seconde of de flits is beneden de algemene flits- en rodeflitsdrempelwaarden.

Informatie over succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde

Uitkomst: Voldoende


2.4.1 Blokken omzeilen (Niveau A)

Er is een mechanisme beschikbaar om blokken content die op meerdere webpagina's worden herhaald te omzeilen.

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevindingen: Als je niet ingelogd bent dan is de skiplink aanwezig. De eerste skiplink naar de content is goed. De tweede moet weg; er is geen hoofdnavigatie als je niet bent ingelogd.

De skiplink 'Ga direct naar pagina inhoud' op een van de twee live websites
verwijst naar de kop van de homepage. Hierdoor wordt de (niet herhalende) content net onder de hoofdnavigatie overgeslagen. Hierdoor missen blinden en slechtzienden mogelijk informatie. Zorg dat de skiplink alleen content overslaat die op elke pagina bovenin aanwezig is.


2.4.2 Paginatitel (Niveau A)

Webpagina's hebben titels die het onderwerp of doel beschrijven.

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevindingen: Als je naar pagina democommunity.mett.nl/community/ gaat dan wordt door de screenreader de volgende titel voorgelezen: 'Hi {firstName}! - Demo Community'. Na het laden begint het JavaScript te werken en zal {firstName} vervangen worden door de naam van de persoon die is ingelogd. Maar dat is dan te laat. Als iemand die blind is door de tabbladen navigeert dan zal die het tabblad 'Hi {firstName}! - Demo Community' niet meer kunnen vinden. Zorg dat de naam van de pagina direct in orde is en pas deze alleen achteraf aan als de bezoeker voor een actie kiest die de content van de pagina (volledig) verandert (bijvoorbeeld bij een single page application).

Op pagina democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx (Afspraak toevoegen) ontbreekt de titel zodra de pagina volledig geladen is. Iemand die door de browser-tabs navigeert kan nu niet snel bepalen of dit de juiste pagina is.

Dit komt op meer plekken voor, bijvoorbeeld:

democommunity.mett.nl/Beheer/Registraties/1581761.aspx


2.4.3 Focus volgorde (Niveau A)

Als een webpagina sequentieel genavigeerd kan worden en de navigatiesequenties hebben invloed op de betekenis of het gebruik, dan krijgen focusbare componenten de focus in de juiste volgorde waardoor betekenis en bedienbaarheid behouden blijft.

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevindingen: Advies: Op pagina democommunity.mett.nl/in-gesprek/ zijn de cards onder het prikbord steeds 2 dezelfde links. Omdat de afbeelding het de kop dezelfde link bevatten is het beter om daar 1 link van te maken. De afbeelding heeft dan ook geen alternatieve tekst meer nodig; alt="" volstaat dan. Ook kan gekozen worden om de afbeelding niet klikbaar maken, ook dan is het het beste om de alt="" te houden.

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/… kun je kiezen voor het uploaden van afbeeldingen of bestanden. Als je wisselt tussen 'Bestand' en 'Afbeelding' dan verwacht je naar de knop 'Afbeelding kiezen' te gaan met de tabtoets. Maar die wordt overgeslagen. Als je terugtabt kom je er weer wel op. Na klikken op 'Afbeelding' moet je op 'Afbeelding kiezen' terecht komen als je de tabtoets gebruikt.

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+stemmen/eParticipaties_AddeParticipatie.aspx (Bijdrage toevoegen) kun je kiezen wat je wilt uploaden, fo je een link of locatie wilt toevoegen en meer. Als je een van de keuzes uit die balk maakt dan gaat het goed als het eerste veld een invoerveld is. Als het eerste focusbare element een knop is. dan zie je de focus daarop niet verschijnen. Zorg dat ook in de laatste situatie de focus zichtbaar is of vooraan staat zodat duidelijk is dat je direct verder kunt gaan.

Advies: Als je op democommunity.mett.nl/de-kennisbank/kennis+delen+-+documenten/default.aspx de eigenschappen ven een document opvraagt kom je in een dialoogvenster terecht. Als je dit venster sluit komt de focus bovenaan de lijst met mappen en bestanden te staan. Je verwacht weer terug te keren op de knop bij het bestand waar je bezig was.

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+groepen/1844795.aspx zijn tabjes waar je doorheen kan navigeren. Als je een tabje activeert gaat de focusvolgorde daarna niet helemaal goed. Zo verwacht je als je op de tab 'Omschrijving' klikt en met de tabtoets 1x vooruit gaat kom je op '< Updates'. Je verwacht op de naam van de persoon terecht te komen (die ook klikbaar is). Dit gaat ook mis bij het tabje 'Bestanden'. De focus komt dan op het 2e bestand.

Wanneer een foutmelding verschijnt bij het formulier op pagina democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/… (Stel je vraag) gaat de schermweergave naar deze foutmelding boven aan de pagina. De toetsenbordfocus verplaatst niet mee en blijft op de verstuurknop staan. Dit gebeurd bij alle formulieren.


Het linkdoel kan bepaald worden uit enkel de linktekst of uit de linktekst samen met zijn door software bepaalde linkcontext, behalve daar waar het doel van de link een dubbelzinnige betekenis zou kunnen hebben voor gebruikers in het algemeen.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevindingen: In de hoofdnavigatie zijn er items die uitvouwbaar zijn, zoals 'Agenda'. Hierop zitten 2 focussen. Een om de link naar de pagina 'Agenda' te volgen en een om de subpagina's te tonen. Als je op de tweede link klikt, het pijltje omlaag, dan volgt dit ook de link naar de pagina 'Agenda'. Feitelijk zou dit een knop moeten zijn waarmee je enkel het menu in en uitklapt. Overigens is dit een lastige interface omdat het submenu ook al automatisch uitvouwt als de focus op een van de links komt.

Advies: In elke pagina wordt gebruikgemaakt van knoppen om de informatie uit die pagina te delen. Deze knoppen heten nu kortweg Facebook, Linkedin, etc. Omdat er een kopje boven staat is duidelijk gemaakt wat de bedoeling is. Met een screenreader kan je een lijst met alle knoppen opvragen. Wellicht is het daarom ook goed om elke knop met tekst uit te breiden zodat de knop afzonderlijk ook makkelijk herkenbaar is.

In de footer staat de link 'Laat het ons weten!'. Deze link leidt naar een e-mailadres. De linkdoel is nu niet duidelijk. Zorg dat getoond wordt dat de link een e-mailadres betreft.


2.4.5 Meerdere manieren (Niveau AA)

Er is meer dan één manier beschikbaar om een webpagina binnen een verzameling webpagina's te vinden, behalve wanneer de webpagina het resultaat is van, of een stap in, een proces.

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Voldoende


2.4.6 Koppen en labels (Niveau AA)

Koppen en labels beschrijven het onderwerp of doel.

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevindingen: Op de homepage democommunity.mett.nl/ is onder 'Actueel' een zoekfunctie. Het visuele label is gelijk aan het label rechts bovenin. De functie is echter anders, namelijk zoeken naar tekst in de getoonde berichten onder 'Actueel'. Zorg voor een zichtbaar label dat beschrijft wat deze zoekfunctie doet.

Dit komt ook voor op:

Op pagina democommunity.mett.nl/de-kennisbank/kennis+delen+-+documenten/ staan achter de bestanden knopjes met een icoontje erin van een tandwiel. Als je deze bij een bestand opent dan krijg je 4 keuzes: 'Kopieer link', 'Downloaden', 'Reageren' en 'Eigenschappen'. Als je 'Kopieer link' kiest dan verschijnt er een nieuw dialoogvenster. Hier ontbreekt een visueel label of instructie wat je moet doen.


2.4.7 Focus zichtbaar (Niveau AA)

Elke gebruikersinterface die met een toetsenbord te bedienen is, heeft een bedieningswijze waarbij de indicator van de toetsenbordfocus zichtbaar is.

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevindingen: Wanneer de subnavigatieitems (de gele knoppen 'Deel je kennis', etcc.) op pagina democommunity.mett.nl/in-gesprek/ focus heeft, is dat niet zichtbaar. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk interactief element focus heeft door een duidelijke focusrand toe te voegen.

Op pagina democommunity.mett.nl/de-kennisbank/kennis+delen+-+documenten/ is er een mogelijkheid om de lijst met bestanden op verschillende manieren te tonen. De focus op deze knoppen zijn niet of nauwelijks zichtbaar.

Op pagina democommunity.mett.nl/de-kennisbank/veelgestelde+vragen/ is de focus zichtbaar bij de thema's en de vragen. Op sommige plekken gaat de focusrand door de tekst heen waardoor deze slecht leesbaar wordt. Zorg dat de focus rand om het hele klikvlak komt te staan.

Op een van de pagina's van een van de live websites staan interactieve iconen (knoppen) op de kaart te zien. Deze zijn met toetsenbord te bedienen, maar de focus op deze knoppen is vaak niet zichtbaar.


2.5 Input modaliteiten

2.5.1 Aanwijzergebaren (Niveau A)

Alle functionaliteit waarmee bij de bediening gebruik wordt gemaakt van meerpunts- of padgebaseerde gebaren, kan worden bediend met een enkele aanwijzer zonder een padgebaseerd gebaar, tenzij een meerpunts- of padgebaseerd gebaar essentieel is.

Informatie over succescriterium 2.5.1 Aanwijzergebaren

Uitkomst: Niet aanwezig


2.5.2 Aanwijzerannulering (Niveau A)

Voor functionaliteit die kan worden bediend met een enkele aanwijzer, geldt ten minste één van de volgende zaken:

Informatie over succescriterium 2.5.2 Aanwijzerannulering

Uitkomst: Voldoende


2.5.3 Label in naam (Niveau A)

Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevindingen: Bij de formulieren wordt hCaptcha gebruikt. Deze heeft meerdere toegankelijkheidsissues waaronder de naam van de checkbox. Deze heet 'hCaptcha checkbox. Select in order to trigger ...' terwijl er op het scherm bij de checkbox 'I am human' staat. Hierdoor is deze checkbox niet eenvoudig met spraak te bedienen. Er wordt een toegankelijke optie aangeboden, echter de vraag is of deze equivalent is aan de aangeboden optie. Bij de toegankelijke versie vereist dat je inlogt en hierbij moet je je e-mailadres aanbieden. Daarom kan niet van een gelijkwaardig toegankelijk alternatief gesproken worden.


2.5.4 Bewegingsactivering (Niveau A)

Functionaliteit die kan worden bediend door de beweging van een apparaat of beweging van een gebruiker, kan ook worden bediend met componenten van de gebruikersinterface. De reactie op de beweging kan worden uitgeschakeld om onbedoelde activering te voorkomen, behalve wanneer:

Informatie over succescriterium 2.5.4 Bewegingsactivering

Uitkomst: Niet aanwezig


3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

De standaard menselijke taal van elke webpagina kan door software bepaald worden.

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Voldoende


3.1.2 Taal van onderdelen (Niveau AA)

De menselijke taal van elke passage of zin in de content kan door software bepaald worden, behalve waar het gaat om eigennamen, technische termen, woorden uit een onbepaalde taal en woorden of zinsdelen die deel zijn gaan uitmaken van het jargon van de onmiddellijk omringende tekst.

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevindingen: In een formulier kan hCaptcha opgenomen worden via een iframe. In een Nederlandstalige browser wordt hCaptcha in het Nederlands getoond. In de code binnen het iframe staat de taal echter ingesteld op Engels (lang="en"). Zorg dat dit "nl" wordt. Overigens gaat het in een Engelstalige browser wel goed, omdat dan de hCaptcha in het Engels wordt gepresenteerd.


3.2 Voorspelbaar

3.2.1 Bij focus (Niveau A)

Als een component van de gebruikersinterface de focus krijgt, dan veroorzaakt dat geen contextwijziging.

Informatie over succescriterium 3.2.1 Bij focus

Uitkomst: Onvoldoende

Bevindingen: Op pagina democommunity.mett.nl/vind-elkaar/leden+-+experts/ kan je filteren. Als je via de filterknop naar de filteropties gaat kan je uit dropdownlijsten een keueze maken. Als je met het toetsenbord doet een keuze opent, bijvoorbeeld 'Sorteer op'en je gaat met de pijltoets omlaag, dan activeert de focus op het eerstvolgende item direct het filter. Zorg dat je met de pijltoetsen een keuze kan maken en pas als je deze keuze bevestigt de sortering plaatsvindt.


3.2.2 Bij input (Niveau A)

Verandering van de instelling van een component van de gebruikersinterface veroorzaakt niet automatisch een contextwijziging, tenzij de gebruiker geïnformeerd is over het gedrag vóór het gebruik van de component.

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Voldoende


3.2.3 Consistente navigatie (Niveau AA)

Navigatiemechanismen, die op meerdere webpagina's binnen een verzameling webpagina's herhaald worden, komen elke keer dat ze worden herhaald in dezelfde relatieve volgorde voor, tenzij een verandering wordt geïnitieerd door de gebruiker.

Informatie over succescriterium 3.2.3 Consistente navigatie

Uitkomst: Voldoende


3.2.4 Consistente identificatie (Niveau AA)

Componenten die dezelfde functionaliteit hebben binnen een verzameling webpagina's worden consistent geïdentificeerd.

Informatie over succescriterium 3.2.4 Consistente identificatie

Uitkomst: Voldoende


3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Als een invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en wordt de fout tekstueel aan de gebruiker meegedeeld.

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevindingen: Op democommunity.mett.nl/agenda/agenda+-+lijst/events_addevent.aspx zijn een aantal velden verplicht, waaronder de 'Titel van de afspraak'. Als dit veld niet is ingevuld verschijnt er bovenin het formulier de melding 'Titel is niet ingevuld'. Zorg dat dezelfde veldnaam wordt gebruikt als het label.

Op democommunity.mett.nl/in-gesprek/interactie-initiatieven/eParticipaties_AddeParticipatie.aspx (Bijdrage toevogen) kun je een link toevoegen. Als je hier het veld 'Het internetadres (URL) van de pagina of website *' niet invult verschijnt er een foutmelding 'Link is niet ingevuld'. De naam 'Link' komt niet overeen met het veld dat niet is ingevuld.
Dit geldt ook voor andere velden die verplicht zijn.

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/default.aspx is onder de eerste alinea een zoekvak om in de reacties te zoeken. Als je bijvoorbeeld zoekt op 'prikbord' verschijnt er niks. De melding dat er geen resultaat is bij het zoeken in de reacties ontbreekt. Zorg voor een goede melding als er geen resultaat is.

Wanneer bezoekers een fout maken in het veld 'E-mailadres' in een contactformulier verschijnt hier geen foutmelding van.


3.3.2 Labels of instructies (Niveau A)

Als de content gebruikersinvoer vereist, dan worden labels of instructies geleverd.

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevindingen: Op pagina democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx (Afspraak toevoegen) kan je een begintijd en eindtijd invullen. Als je zonder muis werkt is het niet duidelijk hoe je de datum en tijd in kunt vullen. Zorg voor voldoende instructie in beeld.

Op de inlogpagina worden met sterretjes aangegeven dat de velden verplicht zijn. Er staat echter nergens wat deze sterretjes betekenen.


3.3.3 Foutsuggestie (Niveau AA)

Als een invoerfout automatisch ontdekt wordt en suggesties voor verbetering bekend zijn, dan worden de suggesties aan de gebruiker geleverd, tenzij dit de beveiliging of het doel van de content in gevaar zou brengen.

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Voldoende

Bevindingen: [controleren] Op de toegankelijkheid.mett.nl/Beheer/Formulierenmodule/1630539.aspx wordt netjes een foutmelding getoond als je bijvoorbeeld een verplicht veld niet hebt ingevuld. Zorg ook voor een verbetersuggestie, bijvoorbeeld "Vul de naam in."; dit geldt ook voor alle andere velden en formulieren.


Voor webpagina's die wettelijke verplichtingen of financiële transacties voor de gebruiker uitvoeren, die, door de gebruiker te beheren gegevens in gegevensopslagplaatsen verwijderen of wijzigen, of die antwoorden van de gebruiker verzenden, geldt minstens één van de volgende zaken:

  1. Omkeerbaar: Verzendingen kunnen ongedaan gemaakt worden.
  2. Gecontroleerd: Door de gebruiker ingevoerde gegevens worden gecontroleerd op invoerfouten en de gebruiker wordt de mogelijkheid gegeven om ze te verbeteren.
  3. Bevestigd: Er is een mechanisme beschikbaar voor het beoordelen, bevestigen en verbeteren van informatie voordat de verzending wordt voltooid.

Informatie over succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)

Uitkomst: Voldoende


4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

In content die geïmplementeerd is met opmaaktalen hebben elementen volledige begin- en eindtags, zijn elementen genest volgens hun specificatie, bevatten elementen geen dubbele attributen en zijn alle ID's uniek, behalve waar de specificatie deze eigenschappen toelaat.

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevindingen: Op pagina democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx (Afspraak toevoegen) komt een dubbele id voor, namelijk id="toolbarBottom". Dit kan problemen opleveren met hulpsoftware. Zorg dat id's unieke waarden hebben op een pagina.


4.1.2 Naam, rol, waarde (Niveau A)

Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën.

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevindingen: In de header bevindt zich een belletje. Hiermee kan je een uitklapmenu opvragen met daarin een knop om naar de pagina 'Updates' te gaan. Initieel staat er een aria-expanded-attribuut op met de waarde 'true'. Dit moet 'false' zijn. Bij het openen en sluiten van het uitklapmenu gaat er ook wat mis met dit attribuut.
Ditzelfde gaat ook mis bij de profielknop.

Advies: in de header bevindt zich een belletje en het profielmenu. Deze zijn opgemaakt met een a-element. De 2 knoppen openen alleen een menu, het gebruik van button hier zou betere zijn. Gebruik het a-elementen om navigatie naar een ander deel van de pagina of naar een andere webpagina te markeren. Gebruik knoppen als er een actie wordt uitgevoerd, zoals: uitklappen van content, bladerknopen in een slider of het verzenden van een formulier.

Als je op de profielknop drukt verschijnen er 3 navigatie-elementen: 'Updates', 'Profiel' en 'Uitloggen'. Deze 3 elementen staan onder elkaar en vormen samen een lijstje of opsomming. Gebruik daarom daar ook ul- en li-elementen om bekend te maken aan hulpsoftware dat er 3 items in de opsomming zitten.

Onder het zoekveld in de header zit een verborgen div-element met de rol 'alert'. Hierin staat initieel een tekst 'Melding verbergen'. De tekst is gekoppeld aan het invoerveld 'Zoeken' via het attribuut 'aria-describedby'. De tekst wordt dan ook voorgelezen zodra het zoeken de focus krijgt. Het is niet duidelijk wat de bedoeling is van deze tekst.

Bij het inloggen is een mogelijkheid om ingelogd te blijven via een schuifknop 'Blijf 30 dagen ingelogd'. Deze functie is vergelijkbaar met een checkbox, maar dat wordt nu niet doorgegeven aan hulpsoftware. Ook wordt niet doorgegeven of de schuif aan of uit staat. Zorg dat de rol en waarde ook correct doorgegeven wordt zodat iemand die het scherm niet (goed) kan zien weet wat er gebeurt.
Dit komt ook op andere pagina's voor met dezelfde schuifknop.

Op pagina democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx (Afspraak toevoegen) kan je uit een lijst een afspraakkleur kiezen. De rol van deze functie is niet duidelijk. Er zit nu de rol knop op dit veld. Maar je verwacht hier dat je een item kan selecteren (via select).

Op pagina democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx (Afspraak toevoegen) krijg je de keuze 'Wil je de afspraak ook op andere pagina's laten zien?'. Dit label is niet geassocieerd aan het select-element. Gebruik bijvoorbeeld het for- en id-attribuut respectievelijk het label- en select-element te associëren.

Dit komt op meer plekken voor, bijvoorbeeld:

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/… kan je bestanden en afbeeldingen uploaden. Als je er meerdere afbeeldingen of bestanden tegelijk gaat uploaden dan is dat sowieso slecht zichtbaar. Bij bijvoorbeeld 3 afbeeldingen komt er slechts 1 in beeld. Elk bestand kan je weer verwijderen door middel van een knop in de vorm van een vuilnisbakje. Deze knoppen hebben geen naam. Zorg dat de knop aangeeft wat het doet, bijvoorbeeld 'Verwijderen' en plaats hier visueel niet zichtbaar de naam van het bestand achter zodat elke knop een unieke naam heeft en iemand die het scherm niet kan zien toch weet welke afbeelding uit de lijst wordt verwijderd.

Op pagina democommunity.mett.nl/in-gesprek/interactie+-+stellingen/ (Stelling) is een filterknop. As je hierop klikt opent zich een uitvouwvenstertje. Zorg dat de status (uit- of ingevouwen) van het venstertje in de filterknop wordt aangegeven via aria-expanded.

Op pagina democommunity.mett.nl/de-kennisbank/kennis+delen+-+documenten/ kan ja kiezen voor 'Bestand toevoegen'. Als je op deze knop klikt verschijnt er een dialoogvenster. Bij de sluitknop van dit venster is een tekst 'Overlay sluiten'. Beter is om te beginnen met 'Sluiten', zodat met spraaksoftware deze knop makkelijker te bereiken is. De naam 'Overlay' is vrij technisch en zegt de bezoeker hoogstwaarschijnlijk niks. Overigens is aan de knop al een naam toegekend zodat de screenReaderContent-tekst overbodig is.

Op pagina democommunity.mett.nl/de-kennisbank/kennis+delen+-+documenten/ is er een mogelijkheid om de lijst met bestanden op verschillende manieren te tonen. Door middel van een grijstint wordt de huidige actieve weergave getoond. Deze informatie is niet beschikbaar voor hulpsoftware. Zorg dat deze informatie ook voor hulpsoftware beschikbaar is.

Advies: Op pagina democommunity.mett.nl/de-kennisbank/kennis+delen+-+documenten/ staan achter de bestanden knopjes met een icoontje erin van een tandwiel. Als deze knop de focus krijgt, wekt dat de indruk dat je op Enter moet drukken om deze te openen. Maar er gebeurt niks. Als door doortabt zie je een item verschijnen ('+ Toevoegen'). Dit is volgens mij geen toegankelijkheidsissue, maar meer een user-interface-issue.

Op pagina democommunity.mett.nl/de-kennisbank/kennis+delen+-+documenten/ staan achter de bestanden knopjes met een icoontje erin van een tandwiel. Als je deze bij een bestand opent dan krijg je 4 keuzes: 'Kopieer link', 'Downloaden', 'Reageren' en 'Eigenschappen'. Als je hier met het toetsenbord doorheen navigeert wordt telkens het hele uitklapvenstertje voorgelezen. Zorg dat hier enkel de link of knop waar de focus op staat.

Op pagina democommunity.mett.nl/de-kennisbank/veelgestelde+vragen/ wordt gebruikgemaakt van zogenaamde accordions. De thema's kunnen geopend en gesloten worden en de status wordt netjes aangekondigd door er aria-expanded te gebruiken in de HTML en deze tijdig van status te veranderen. Er wordt echter ook gebruikgemaakt van een title-element waarin staat 'Thema uitklappen'. Dit staat er ook als de content al is uitgevouwen. Het title-attribuut zorgt voor verwarring, laat deze weg.
Dit geldt ook voor de vragen: 'Vraag uitklappen'.

Op de pagina van een van de live websites is een filter-optie. De eerste keuze in het selecteerlijstje heet 'Sorteer op ...'. Dit is dezelfde naam als het label. De eerste keuze zou een andere naam moeten hebben. Dat is namelijk de optie 'Niet sorteren'. Als je deze keuze maakt en je klikt op de knop 'Sorteren' dan verdwijnt het rode rondje met 1 bij de filterknop.

Op een pagina van een van de twee live websites wordt gebruikgemaakt van een iframe. De title met daarin een korte omschrijving van de inhoud van het iframe ontbreekt.

Op een van de 2 live websites zijn 4 iconen geplaatst met social-media-knoppen. De alt-tekst ontbreekt waardoor de links nu naamloos zijn. Zorg voor goede namen die het doel beschrijven.


4.1.3 Statusberichten (Niveau AA)

In content die is geïmplementeerd met opmaaktalen kunnen statusberichten door software bepaald worden met behulp van rol (role) of eigenschappen (properties), zodat hulptechnologieën de berichten aan de gebruiker kunnen presenteren zonder dat ze de focus krijgen.

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevindingen: Op pagina democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx (Afspraak toevoegen) kan je de 'Titel van de afspraak' invullen. Deze mag maximaal 100 tekens bevatten. Er loopt een teller mee met het aantal beschikbare tekens. Deze informatie is niet direct beschikbaar voor hulpsoftware. Zorg ervoor dat iemand die het scherm niet kan zien op de hoogte wordt gebracht van het aantal tekens. Vermijd wel dat deze tekst constant tijdens het typen wordt voorgelezen. Een screenreadergebruiker hoort welk teken er getypt is, en dan is het hinderlijk als erdoorheen gepraat wordt. Het allerbelangrijkst is als de 100 tekens zijn bereikt. Als je nu het 101e teken typt dan hoor je wat je hebt getypt, maar als je het scherm niet ziet heb je niet in de gaten dat dit 101e teken automatisch verdwijnt.

Dit komt ook bij andere velden voor zoals 'Inleiding bij de afspraak' en op andere pagina's, bijvoorbeeld:

Op pagina democommunity.mett.nl/in-gesprek/interactie-initiatieven/eParticipaties_AddeParticipatie.aspx (Bijdrage toevoegen) kan je een 'Locatie' aangeven. Als je bij adres bijvoorbeeld 'biltstraat 31' invult dan krijgt iemand die het scherm niet (goed) kan zien en gebruikmaakt van een screenreader geen reactie terug dat de locatie is gevonden en gemarkeerd.

Wanneer bezoekers een html-formulier versturen verschijnt een laadanimatie in beeld met de tekst 'een momentje...'. Deze tekst wordt niet voorgelezen door screenreaders.

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

Webbrowsers (useragents) en andere software

Bij dit onderzoek is de volgende software gebruikt:

Bronnen

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

Bron: www.toegankelijkheidscertificaat.nl/mett2022/audit/
Geprint: 2024-02-28 11:02:48 v2.4-011