Toegankelijkheidsonderzoek

Issues:
Systeemaudit digitale toegankelijkheid intranet Harmonics

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Harmonics
Datum 12 augustus 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • De techniek van het Harmonics intranet platform op de omgeving digitoegankelijk.winkwaves.com.
Buiten de scope van het onderzoek valt:
  • Widgets van derden.
  • De content en de huisstijl van het Harmonics intranet platform op de omgeving digitoegankelijk.winkwaves.com. Enkel contrastwaarden van technische elementen die los staan van de huisstijl zijn beoordeeld.
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 30

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Voldoende

Bevinding 1: Advies: De datavisualisaties op pagina https://digitoegankelijk.winkwaves.com/admin/statistics zijn opgemaakt met svg-elementen. Er is gebruik gemaakt van alt-attributen op de svg-elementen om deze een alternatieve tekst te geven. Deze methode werkt niet om een svg-element een alternatieve tekst te geven. Beter kan gebruik worden gemaakt van een title-element als eerste child element van het svg-element, of er kan gebruik worden gemaakt van een aria-label in combinatie met role=img. Omdat er toegankelijke tabellen zijn als alternatief voor de datavisualisaties, wordt hier niet op afgekeurd. Toch zou het bezoekers die gebruikmaken van een screenreader helpen als de datavisualisaties een (korte) alternatieve tekst hebben die aangeeft wat visueel te zien is.

1.2 Op tijd gebaseerde media

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

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

Uitkomst: Niet aanwezig

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

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

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

Uitkomst: Niet aanwezig

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

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

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

Uitkomst: Niet aanwezig

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

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

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

Uitkomst: Niet aanwezig

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

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Niet aanwezig

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

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 7: Aangepaste bevinding n.a.v. oplossen bevinding uit het vorige rapport:
Op pagina https://digitoegankelijk.winkwaves.com/groups/21-widget-groep/welcome staat een groep keuzerondjes. In de code is een visueel verbogen label-element geplaats met de waarde 'poll option'. Dit label wordt opgemerkt door hulpsoftware, wat verwarrend kan zijn omdat het niet in dezelfde taal is als andere content op de pagina en weinig toevoegt aan de pagina. Verwijder daarom dit label-element uit de code. De groep keuzerondjes is verder correct geplaatst in een fieldset en legend combinatie.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Niet aanwezig

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

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Niet aanwezig

Bevinding 9: Dit onderzoek richt zich op de techniek van de website, de contrastratio's van tekstuele content is afhankelijk van de gekozen kleuren van de afnemer en moet apart onderzocht worden in een content-audit.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 10: Bij profielfoto's van gebruikers van dit platform verschijnt er bij muishover en focus aanvullende content, bijvoorbeeld op pagina https://digitoegankelijk.winkwaves.com/welcome. Als bezoekers hebben ingezoomd tot 400% bij een schermbreedte van 1280 bij 1042 pixels, valt deze aanvullende content buiten de schermweergave. Hierdoor is deze content niet volledig leesbaar voor bezoekers die moeten inzoomen, bijvoorbeeld vanwege slecht zicht. Zorg ervoor dat content binnen de schermweergave blijft vallen als bezoekers inzoomen.

Bevinding 11: Als bezoekers een bijdrage of evenement willen toevoegen, bijvoorbeeld via de '+ deel' knop in het navigatiemenu of op pagina https://digitoegankelijk.winkwaves.com/welcome/timeline, opent een dialoogvenster. Wanneer wordt ingezoomd tot 400% bij een schermbreedte van 1280 bij 1024 pixels, wordt de content in dit venster getoond in een erg smalle strook en is het amper leesbaar. Dit komt omdat de header en footer van het venster veel ruimte in beslag nemen. Een mogelijk oplossing is om het toevoegen van een bijdrage op een aparte pagina te plaatsen, of zorg ervoor dat bezoekers de content in het dialoogvenster goed kunnen lezen bij inzoomen.

Bevinding 12: Wanneer bezoekers op pagina https://digitoegankelijk.winkwaves.com/users/table inzoomen tot 400% bij een schermbreedte van 1280 bij 1024 pixels, verdwijnt er in het subnavigatiemenu een horizontale scrollbalk omdat de link 'Mijn notificaties' wegvalt. Bij dit succescriterium mag geen horizontale scrollbalk verschijnen als bezoekers inzoomen op een pagina (behalve op bepaalde uitzonderingen zoals tabellen). Zorg ervoor dat dit menu herschaalt of bijvoorbeeld achter een knop komt te staan als bezoekers inzoomen.
Een soortgelijke situatie komt ook voor op andere pagina's, zoals https://digitoegankelijk.winkwaves.com/thoughts/206 en https://digitoegankelijk.winkwaves.com/admin.

Bevinding 13: Als bezoekers inzoomen op pagina https://digitoegankelijk.winkwaves.com/users/20-renate-roke-admin/edit bij een schermbreedte van 1280 bij 1024 pixels, wordt de placeholdertekst bij het veld 'gerelateerde trefwoorden' deel afgekapt. Hierdoor is de informatie die deze placeholder overbrengt niet meer volledig beschikbaar. Zorg ervoor dat de volledige placeholdertekst leesbaar blijft bij inzoomen of maak deze informatie op een andere manier beschikbaar.

Bevinding 14: Aangepaste bevinding n.a.v. oplossen bevinding uit het vorige rapport:
In de footer op elke pagina staat de link 'Sneltoetsen' waarmee een venster geopend kan worden. Wanneer bezoekers inzoomen bij een schermbreedte van 1280 bij 1024 pixels, verschijnt er vanaf 400% een horizontale scrollbalk in dit venster. Het is niet toegestaan om bij content een horizontale scrollbalk te gebruiken om dit zichtbaar te maken (alleen bij bepaalde uitzonderingen, zoals op tabellen). Zorg ervoor dat de content in dit venster onder elkaar herschaalt als bezoekers inzoomen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Niet aanwezig

Bevinding 15: Dit onderzoek richt zich op de techniek van de website, de contrastratio's van niet-tekstuele content is afhankelijk van de gekozen kleuren van de afnemer en moet apart onderzocht worden in een content-audit.

Bevinding 16: Let op: In het systeem zijn meerdere contrastproblemen gevonden in niet-tekstuele content, bijvoorbeeld bij de invoervelden op de inlogpagina https://digitoegankelijk.winkwaves.com/user_sessions/new, focusranden die op meerdere pagina's worden gebruikt en in datavisualisaties op pagina https://digitoegankelijk.winkwaves.com/admin/statistics. Het is niet duidelijk in hoeverre afnemers van het systeem deze kleuren kunnen aanpassen.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Onvoldoende

Bevinding 17: Wanneer een bezoeker met het toetsenbord focus heeft op de foto van een andere bezoeker, verschijnt er een dialoogvenster met aanvullende content. Toetenbordfocus wordt direct in dit venster geplaatst, maar het is voor toetsenbordgebruikers niet mogelijk om het venster te verwijderen met de escape-toets. Zij moeten namelijk twee keer de escape-toets gebruiken om het venster te verwijderen, wat verwarrend kan zijn. De focus wordt wel uit dit venster gehaald als bezoekers de esc-toets één keer activeren. Toch zou het hele venster moeten verdwijnen door de esc-toets te activeren.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 18: Wanneer toetsenbordgebruikers op pagina https://digitoegankelijk.winkwaves.com/welcome de lay-out van alle widget willen wijzigen, is dat niet mogelijk. Er is bij elke widget een knop met de toegankelijke naam 'Herpositioneer deze widget' aanwezig waarmee gebruikers van de muisaanwijzer de widget kunnen selecteren en daarna verslepen naar een andere plek, maar als toetsenbordgebruikers deze knop selecteren gebeurt hier niets. Zorg dat er voor toetsenbordgebruikers een toegankelijk alternatief is voor de drag en drop functie, of maak deze functionaliteit toetsenbordtoegankelijk.
Dit probleem komt op alle pagina's voor waar widgets op staan.

Bevinding 19: Nieuwe bevinding t.o.v. het vorige rapport:
Op pagina https://digitoegankelijk.winkwaves.com/calendar_events/40 kunnen bezoekers een formulier toevoegen via de knop 'voeg formulier toe'. Wanneer deze knop is geactiveerd verschijnt er een vensters op het beeld. In dit venster staat de knop 'Voeg vraag toe'. Met de muisaanwijzer is het mogelijk deze knop te activeren en een nieuwe vraag toe te voegen. Voor toetsenbordgebruikers heeft deze knop een andere functie; de knop verstuurt het formulier. Zorg ervoor dat deze knop dezelfde functie heeft voor toetsenbordgebruikers als voor bezoekers die de muisaanwijzer gebruiken.

Bevinding 20: Advies: Op pagina https://digitoegankelijk.winkwaves.com/admin/statistics kunnen bezoekers wisselen tussen een grafiek en tabel. De knoppen om te wisselen zijn opgemaakt als tabs. Door deze opmaak kunnen toetsenbordgebruikers alleen wisselen tussen de tabs met de pijltjestoetsen. Als toetsenbordgebruikers met de pijltjestoetsen wisselen van grafiek naar tabel, verschijnt de tabel niet gelijk op het scherm. Hiervoor moeten toetsenbordgebruikers eerst de Entertoets activeren als de 'Toon als tabel' tab focus heeft. Hierdoor is het wel mogelijk voor toetsenbordgebruikers om de tabel zichtbaar te maken, maar dit is geen logische bediening. Zorg ervoor dat wanneer toetsenbordgebruikers wisselen van tab met de pijltjestoetsen, de tabel of grafiek gelijk zichtbaar wordt.
Dit komt ook voor op pagina https://digitoegankelijk.winkwaves.com/groups/22-testgroep/statistics.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 21: Op pagina https://digitoegankelijk.winkwaves.com/welcome/search?search%5Bkeyword%5D=test&button= staan de filteropties rechts van de zoekresultaten. Hierdoor moeten toetsenbordgebruikers eerst over de zoekresultaten navigeren voordat zij deze zoekresultaten kunnen filteren. Dit is geen logische focus volgorde. Zorg ervoor dat toetsenbordgebruikers (en ook gebruikers van hulpsoftware) eerst de zoekresultaten kunnen filteren voordat zij focus plaatsten op de zoekresultaten zelf. Dit kan bijvoorbeeld door ervoor te zorgen dat in de code de filteropties voor de zoekresultaten staan, visueel mogen de filteropties op de huidige plaats blijven staan.
Een soortgelijk probleem doet zich ook voor op andere pagina's, zoals https://digitoegankelijk.winkwaves.com/welcome/timeline, https://digitoegankelijk.winkwaves.com/calendar_events en https://digitoegankelijk.winkwaves.com/groups/3-faq/search?keyword=test&commit=Zoek.

Bevinding 22: Als toetsenbordgebruikers op pagina https://digitoegankelijk.winkwaves.com/users/20-renate-roke-admin/edit nog een expertise willen toevoegen, verschijnen de nieuwe velden boven de knop 'Voeg expertise toe' en blijft de toetsenbordfocus op deze knop staan. Die kan hinderlijk zijn voor toetsenbordgebruikers, omdat zij terug moeten navigeren om bij deze velden te komen. Zorg ervoor dat deze velden onder de knop verschijnen, of dat de toetsenbordfocus verplaatst naar het eerste nieuwe veld dat is verschenen.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 23: Nieuwe bevinding t.o.v. het vorige rapport:
Op pagina https://digitoegankelijk.winkwaves.com/welcome staat het logo van 'Onbeperkt toegankelijk'. In de code is deze afbeelding opgemaakt als link. De afbeelding zelf (het img-element) heeft een alt-attribuut met een waarde die hetzelfde is als de visuele tekst. Op het a-element waarin dit img-element staat is wel een aria-label geplaatst. Een aria-label overschrijft alle andere attributen die een element een toegankelijke naam kunnen geven. Hierdoor is de toegankelijke naam van deze link 'Ga naar je startpagina op Swink test platform', waar het visuele label niet in voorkomt. Als het visuele label van een link niet voorkomt in de toegankelijke naam, is het moeilijk te bedienen met spraakgestuurde bediening. Zorg ervoor dat het visuele label voorkomt in de toegankelijke naam van deze link. Dat kan op meerdere manier, bijvoorbeeld door het aria-label van het a-element te verwijderen of door 'Onbeperkt toegankelijk' toe te voegen aan het aria-label.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 24: Nieuwe bevinding t.o.v. het vorige rapport:
Op pagina https://digitoegankelijk.winkwaves.com/groups/22-testgroep/statistics staan lopende teksten die een mix zijn van Nederlands en Engels, bijvoorbeeld de tekst 'The total number of created artikelen, bijdragen, evenementen en reacties, by all members since the start.'. Omdat de taalaanduiding van de pagina Nederlands is, moet op Engelse teksten van drie of meer woorden achter elkaar een taalwissel worden aangegeven met het lang-attribuut. De beste optie is om de Engelse teksten te vertalen naar het Nederlands, dan is een taalwissel niet nodig.
Dit komt ook voor op pagina https://digitoegankelijk.winkwaves.com/admin/statistics.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 25: Wanneer bezoekers een verkeerd format invullen bij het veld 'E-mailadres' op pagina https://digitoegankelijk.winkwaves.com/user_sessions/new, verschijnt hier een HTML5 foutmelding. Deze foutmeldingen zijn niet toegankelijk. Ze geven namelijk niet altijd de gemaakte fout aan, hoe bezoekers de fout kunnen oplossen en zijn in sommige gevallen in een andere taal dan de Nederlandse pagina. Ook kunnen bezoekers de tekststijl van deze melding niet wijzigen om het beter leesbaar te maken. Gebruik daarom eigen foutmeldingen om dit probleem op te lossen.
HTML5 foutmeldingen komen ook voor in andere formulieren op de website, bijvoorbeeld op pagina https://digitoegankelijk.winkwaves.com/welcome/timeline wanneer bezoekers een bijdrage willen toevoegen en in dat formulier het verplichte veld niet invullen, en op https://digitoegankelijk.winkwaves.com/calendar_events/40 in het formulier dat verschijnt wanneer bezoekers een formulier willen toevoegen.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 26: Als bezoekers op pagina https://digitoegankelijk.winkwaves.com/welcome focus plaatsen op een profielfoto of hier met de muisaanwijzer overheen gaan, verschijnt een venster met daarin een invoerveld met alleen een placeholdertekst als visueel label. Wanneer bezoekers iets invullen in dit veld verdwijnt de placeholdertekst en heeft het veld geen visueel label meer. Om deze reden is een placeholdertekst niet geschikt als enige label van een invoerveld. Zorg ervoor dat het invoerveld een visueel label krijgt ook bij invoer zichtbaar is.
Dit probleem is terug te vinden op alle pagina's waarop een profielfoto staat, zoals pagina https://digitoegankelijk.winkwaves.com/welcome/search?search%5Bkeyword%5D=test&button= en https://digitoegankelijk.winkwaves.com/welcome/timeline.
Soortgelijke problemen komen ook voor bij andere invoervelden, bijvoorbeeld op pagina https://digitoegankelijk.winkwaves.com/users/20-renate-roke-admin/edit_me.

Bevinding 27: Op pagina https://digitoegankelijk.winkwaves.com/welcome/search?search%5Bkeyword%5D=test&button= staat een select-element met de toegankelijke naam 'Sorteer zoekresultaten op'. Dit element heeft geen visueel label, waardoor het voor bezoekers met bepaalde cognitieve beperkingen het mogelijk moeilijk kan zijn om te bepalen wat zij hier moeten selecteren. Zorg ervoor dat dit select-element een visueel label krijgt.
Dit element staat ook op pagina https://digitoegankelijk.winkwaves.com/groups/3-faq/search?keyword=test&commit=Zoek.
Een soortgelijk probleem komt ook voor bij het select-element op pagina https://digitoegankelijk.winkwaves.com/users.

Bevinding 28: In de placeholdertekst van het veld 'Gerelateerde trefwoorden' op pagina https://digitoegankelijk.winkwaves.com/users/19-renate-roke/edit staat aanvullende informatie. Wanneer bezoekers iets invoeren in dit veld verdwijnt de placeholdertekst en daarmee ook de extra informatie. Zorg ervoor dat deze informatie altijd beschikbaar is voor bezoekers, bijvoorbeeld door het in het visuele label van het veld te plaatsen.

Bevinding 29: Op pagina https://digitoegankelijk.winkwaves.com/calendar_events/40 kunnen bezoekers bestanden selecteren door de selectievakjes aan te vinken. Deze selectievakjes hebben geen visueel label. Hierdoor kan het niet voor alle bezoekers duidelijk zijn waar deze selectievakjes voor zijn. Zorg ervoor dat alle selectievakjes een duidelijk label hebben.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 30: Wanneer bezoekers een verkeerd format invullen bij het veld 'E-mailadres' op pagina https://digitoegankelijk.winkwaves.com/user_sessions/new, verschijnt hier een HTML5 foutmelding. HTML5 foutmeldingen zijn niet toegankelijk. Ze zijn vaak kortaf en geven niet altijd de gemaakte fout aan. Ook zijn ze soms in een andere taal dan de taal van de website. In deze foutmeldingen wordt ook geen suggestie gegeven aan de bezoeker over hoe zij de gemaakte fout kunnen oplossen. Los dit op door eigen foutmeldingen toe te voegen aan het formulier. Deze foutmeldingen moeten aangeven welke fout de bezoeker heeft gemaakt en hoe de fout kan worden opgelost.
HTML5 foutmeldingen worden ook gebruikt in andere formulieren in deze website.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

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

Geprint: 2025-04-03 12:27:28 v2.4-011