Rapport:
Deelonderzoek techniek platform Mett (2022)

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 https://democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/Discuss_AddPost.aspx#tab=imageTab 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 https://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 https://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 https://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 https://democommunity.mett.nl/vind-elkaar/user.aspx?userkey=811736 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.

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.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de homepage https://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 https://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 https://democommunity.mett.nl/de-kennisbank/ ; hier is de huidige pagina herkenbaar aan het witte vlak in het menu.

Op de welkom-pagina https://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 https://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 https://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 https://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 https://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 https://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 https://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 https://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 https://democommunity.mett.nl/in-gesprek/interactie+-+groepen/1844795.aspx?t=Corona-en-duurzaamheid#tab=mediaTab 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.

Uitkomst: Onvoldoende

Bevindingen: Op de homepage https://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 https://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 https://democommunity.mett.nl/vind-elkaar/user.aspx?userkey=811736 (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 https://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.

Uitkomst: Voldoende

Bevindingen: Op pagina https://democommunity.mett.nl/in-gesprek/interactie+-+stellingen/1490951.aspx?t=Het-openbaar-vervoer-OV-moet-goedkoper-#comments 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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De links in de lopende tekst op pagina https://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 https://democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx#tab=contentTab (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 https://democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/Discuss_AddPost.aspx (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 https://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.

Uitkomst: Niet aanwezig

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.

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.

Uitkomst: Voldoende

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.

Uitkomst: Onvoldoende

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

Op https://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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx#tab=contentTab (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 https://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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

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.

Uitkomst: Onvoldoende

Bevindingen: Als je naar pagina https://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 https://democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx#tab=contentTab (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:

• https://democommunity.mett.nl/in-gesprek/interactie+-+deel+je+kennis/eParticipaties_AddeParticipatie.aspx
• https://democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/Discuss_AddPost.aspx#tab=imageTab
• https://democommunity.mett.nl/de-kennisbank/kennis+delen+-+blogs/1644975.aspx

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

Uitkomst: Onvoldoende

Bevindingen: Advies: Op pagina https://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 https://democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/Discuss_AddPost.aspx#tab=imageTab 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 https://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 https://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 https://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 https://democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/Discuss_AddPost.aspx (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.

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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de homepage https://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:

• https://democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/default.aspx

Op pagina https://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.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de subnavigatieitems (de gele knoppen 'Deel je kennis', etcc.) op pagina https://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 https://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 https://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.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

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.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://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.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op https://democommunity.mett.nl/agenda/agenda+-+lijst/events_addevent.aspx#tab=contentTab 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 https://democommunity.mett.nl/in-gesprek/interactie-initiatieven/eParticipaties_AddeParticipatie.aspx#tab=linksTab (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 https://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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx#tab=contentTab (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.

Uitkomst: Voldoende

Bevindingen: [controleren] Op de https://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.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx#tab=contentTab (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.

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 https://democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx#tab=contentTab (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 https://democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx#tab=contentTab (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:

• https://democommunity.mett.nl/in-gesprek/interactie+-+deel+je+kennis/eParticipaties_AddeParticipatie.aspx
• https://democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/Discuss_AddPost.aspx#tab=imageTab

Op pagina https://democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/Discuss_AddPost.aspx 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 https://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 https://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 https://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 https://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 https://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 https://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.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://democommunity.mett.nl/agenda/agenda+-+lijst/Events_AddEvent.aspx#tab=contentTab (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:

• https://democommunity.mett.nl/in-gesprek/interactie+-+stel+je+vraag+lijst/interactie+-+stel+je+vraag/Discuss_AddPost.aspx#tab=imageTab

Op pagina https://democommunity.mett.nl/in-gesprek/interactie-initiatieven/eParticipaties_AddeParticipatie.aspx#tab=mapTab (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.