Toegankelijkheidsonderzoek

Issues:
Systeem-audit digitale toegankelijkheid website Inergy

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Inergy WCAG Check versie 3.0
Datum 11 november 2024
Scope van de website Binnen de scope van het onderzoek vallen:
Buiten de scope van het onderzoek vallen:
  • De content op alle pagina's van de testomgeving https://fincity.dev.publicaties.app/pub/wcagcheck/2/p1-homepage. Dit vereist een apart onderzoek.
  • 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: 25

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p23-tabel-draaitabel staat naast de interactieve onderdelen van de tabel een icoon dat visueel duidelijk maakt dat deze onderdelen interactief zijn. Die tekens hebben een alternatief nodig. Er zijn verschillende manieren om dit op te lossen. Een daarvan is om een uitklapbaar element met het attribuut aria-expanded te gebruiken. De waarde true en false geven aan of dat onderdeel op dit moment wel of niet is uitgeklapt.

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: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p4-tekst staat een tabel onder de kop “Een tabel”. De gegevens in de eerste kolom hebben nu niet voldoende relatie met de overige informatie in deze tabel. Het is de bedoeling om de tabelcellen in de eerste kolom op te maken met th-elementen in plaats van met td-elementen. Voor die twee cellen geld het advies om hiernaast ook het attribuut scope=”row” toe te voegen zodat hulpsoftware deze horizontale koppen goed presenteert.
Dit type probleem komt ook voor op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p22-tabeluitdataset. Het verschil is dat deze tabel helemaal is opgemaakt met ARIA. De informatie in de eerste kolom zegt iets over de informatie in de andere kolommen. Die content geld daarom als een tabelkop. Om te begrijpen om welk bedrag het gaat moet er een relatie zijn met de tekst in de eerste kolom. Die visuele relatie is nu niet goed aangegeven voor hulpsoftware. Een andere manier om dat te doen is door de cellen in de eerste kolom op te maken met role=”rowheader” in plaats van met role=”gridcell”.

Bevinding 8: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p23-tabel-draaitabel staat bij het laden van de pagina een tabel met vier rijen en vier kolommen. In de code staat een tabel, maar die tabel heeft in de eerste rij maar één cel en in de andere rijen twee cellen per rij. De eerste vier cellen van deze tabel bevatten voor hulpsoftware geen content en de twee cel van rij drie bevat een aparte tabel met een rij die gevuld zijn met de teksten “Begroting”. “Rekening” en “Eindtotaal”. De andere twee cellen van de primaire tabel bevatten op een soortgelijke manier ook een aparte tabel met een deel van de zichtbare informatie. De (visuele) relaties die door de tabelweergave gegeven worden zijn nu niet beschikbaar voor gebruikers van hulpsoftware. Na het (gedeeltelijk) uitklappen van de tabel moeten alle relaties die visueel beschikbaar zijn ook nog beschikbaar zijn voor gebruikers van hulpsoftware. Let er ook op dat eventuele uitklapbare cellen niet direct zelf interactief mogen zijn. Een tabelcel kan wel een knop bevatten die de weergave aanpast, maar het direct interactief maken van td-elementen is niet toegestaan onder succescriterium 4.1.2. De manier waarop de toetsenbordfocus nu is geregeld klopt ook niet voordat de interactieve cel focus krijgt is de focus meerdere keren niet zichtbaar én de manier waarop de toetsenbordfocus zichtbaar wordt gemaakt tussen de beide cellen heeft niet voldoende contrast. Het onzichtbaar laten landen van de toetsenbordfocus op onderdelen die niet interactief zijn en het slecht zichtbaar laten landen van de toetsenbordfocus op onderdelen die wel interactief zijn komt meer voor in deze tabel. Het nesten van tabellen in HTML is een probleem dat opgelost moet worden.
Advies: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p24-ringdiagram is het mogelijk om als alternatief voor het diagram een tabel in beeld te zetten. Om er voor te zorgen dat de relaties in die tabel kloppen is ARIA gebruikt. Tijdens het onderzoek viel op dat het aria-owns attribuut niet wordt ingeladen bij het gebruik van Chrome, maar op Firefox werkt het wel altijd. Dit komt ook voor op https://fincity.dev.publicaties.app/pub/wcagcheck/2/p25-staafdiagram.

1.4 Onderscheidbaar

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Niet aanwezig

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

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 10: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p22-tabeluitdataset is er verlies van informatie als deze pagina wordt weergegeven met een breedte van 320 CSS-pixels. In de tabel valt content weg. Bij die weergave wordt de informatie in de kolommen “Lasten” en “Baten” niet weergegeven in plaats daarvan staan er drie punten in beeld.

Bevinding 11: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p23-tabel-draaitabel staat een tabel waarvan een van de informatie niet in beeld te krijgen is als de pagina wordt weergegeven met een breedte van 320 CSS-pixels. Het mag voor het weergeven van een tabel noodzakelijk zijn om in twee dimensies te scrollen. Dit type probleem komt ook voor op de tabelweergaven van pagina’s https://fincity.dev.publicaties.app/pub/wcagcheck/2/p24-ringdiagram en https://fincity.dev.publicaties.app/pub/wcagcheck/2/p25-staafdiagram.

Bevinding 12: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p31-groep staat de foto van de kat en de begeleidende teksten niet onder maar naast de tekst. Het is niet toegestaan om horizontaal scrollen te gebruiken als oplossing te gebruiken. De kop, foto en caption kunnen zonder verlies van informatie onder de tekst geplaatst worden.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 13: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p23-tabel-draaitabel komt de toetsenbordfocus zichtbaar op de onderdelen “Begroting” tot en met “Reserve”. De enige manier om te zien welk onderdeel in de tabel focus heeft is een andere achtergrondkleur (#F1F1F1) ten opzichte van de witte achtergrond.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 14: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p22-tabeluitdataset is het mogelijk om met de muis de sortering van de tabel aan te passen door op de kolomkoppen te klikken. Die functionaliteit is niet beschikbaar voor toetsenbord gebruikers. De bediening van een sorteerbare tabel moet geregeld worden door een losse component van de gebruikersinterface. Die losse component mag in het element met role="columnheader" staan, maar één element kan niet tegelijk een kolomkop én een knop om de sortering aan te passen zijn. Op pagina https://www.w3.org/WAI/ARIA/apg/patterns/table/ staat meer informatie.
Een soortgelijk probleem komt ook voor op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p27-hierarchie, op die pagina werkt het alternatief “Alles uitklappen” niet.

Bevinding 15: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p29-accordeonnew werkt het met het toetsenbord in en uitklappen van de accordeon niet meer.

Bevinding 16: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p30-tabs is het in Firefox niet langer mogelijk om van tabblad te wisselen met de pijltjestoetsen. In Chrome werkt dit wel goed.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Voldoende

Bevinding 17: Advies: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p1-homepage staat in de footer de link ‘P&C Portaal’. Deze link verwijst naar de homepage van google, het linkdoel van deze link is niet te bepalen uit de linktekst. Deze link komt op iedere pagina voor, maar kan ook gezien worden als onderdeel van de content en is daarom hier niet afgekeurd. Het wordt aangeraden om dit probleem wel op te lossen.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 18: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p23-tabel-draaitabel komt de toetsenbordfocus op de draaitabel te staan. Terwijl het zwarte kader om de draaitabel is de toetsenbordfocus meerdere keren niet zichtbaar als deze op niet interactieve onderdelen van de draaitabel komt.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Voldoende

Bevinding 19: Advies: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p5-afbeelding is op de tweede afbeelding een Engels tekstalternatief gebruikt. Die tekst moet aangepast worden naar een Nederlandse tekst. Dit is niet afgekeurd, omdat het hier gaat om een systeemonderzoek waarbij de content niet getoetst word.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 20: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p22-tabeluitdataset staat een grid met sorteerbare kolommen. De elementen met role="columnheader" zijn nu interactief. Role="columnheader" is geen geldige rol voor een interactieve component van de gebruikersinterface. Het is wel toegestaan om cellen in een ARIA grid de cellen toetsenbordfocus te geven, maar interactieve onderdelen in de grid moeten nog steeds een rol zoals knop krijgen om aan (gebruikers van) hulpsoftware duidelijk te maken dat deze onderdelen van de grid niet alleen focusbaar maar ook interactief zijn. Let er bij het aanpassen op dat de aria-sort op de kolomkop blijft staan, op die manier is duidelijk welke sortering nu actief is. De knop om de sortering aan te passen kan dan een naam krijgen die duidelijk maakt welke sortering actief wordt als die knop geactiveerd word.

Bevinding 21: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p23-tabel-draaitabel staat een complexe interactieve tabel. In de tabel staan vier individuele interactieve elementen die niet een juiste rol en juiste toestand (state) hebben. De onderdelen “Begroting” tot en met “Reserve” hebben een rol zoals button nodig om duidelijk te maken dat zij interactief zijn én hebben een toestand zoals aria-expanded nodig om aan te geven of de informatie die zij verbergen nu wel of niet in beeld staat. Let erop dat de tabelstructuur moet kloppen bij alle zestien vormen die deze tabel kan aannemen.

Bevinding 22: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p27-hierarchie staat een ARIA treegrid. Op pagina https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/ staat meer informatie over het toegankelijk toepassen van deze ARIA code. Niet alle rijen zijn aanwezig in de DOM bij het laden van deze treegrid, daarom is het nodig om een aria-rowcount met de juiste waarde toe te voegen zodat duidelijk is hoeveel rijen deze treegrid maximaal heeft.

Bevinding 23: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p28-accordeon staat een tablist zonder tabpanel elementen. Er is gebruik gemaakt van aria-activedescendant om het gebruik van tabpanel te omzeilen. Het probleem is dat de waarde van dat attribuut nu altijd waarde van het eerste tab-element is. Op het moment dat een gebruiker als eerste de tweede tab opent geeft de tablist aan hulpsoftware aan dat de eerste tab is geactiveerd. Het advies is om voor een situatie als deze een serie uitklapbare knoppen te gebruiken en geen tablist. Dit heeft ook te maken met het feit dat navigeren door de tablist met de pijltoetsen mogelijk hoort te zijn én dat er in dit geval meer dan één optie open kan staan. Zie https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ voor meer informatie. Op het moment dat er voor gekozen wordt om gebruik te blijven maken van een tablist is het volgen van de informatie en het voorbeeld op https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ een optie. Dit type probleem komt ook voor op https://fincity.dev.publicaties.app/pub/wcagcheck/2/p29-accordeonnew.

Bevinding 24: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p30-tabs staan meerdere elementen die met behulp van ARIA de rol tabpanel hebben gekregen. Door het toepassen van die rol zijn deze elementen componenten van de gebruikersinterface die een naam moeten hebben om te voldoen. Zie https://www.w3.org/TR/wai-aria-1.2/#tabpanel voor meer informatie. Niet alle elementen met deze rol zijn op dit moment onderdeel van een tablist. Het advies voor die tabpanel elementen is dan ook om die rol te verwijderen. Het is een optie om een aria-labelledby attribuut toe passen op de andere tabpanel-elementen. De waarde van dat attribuut hoort dan te verwijzen naar het id van het tab-element dat het betreffende tabpanel activeert. Op pagina https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ staat meer informatie over hoe een toegankelijke tablist gemaakt kan worden.
Op een tablist waarbij de tab-elementen onder elkaar staan hoort het attribuut aria-orientation=”vertical” toegepast te worden. Dat is een verplichte toestand (state) voor een verticale tablist. Een deel van deze problemen komen ook voor op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/p40-langepagina.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 25: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/2/search.html?query=et%20tu komt er na het invoeren van een zoekopdracht zonder resultaten een foutmelding in beeld. De tekst ‘Er zijn geen resultaten gevonden’ geldt als statusbericht onder de eisen van dit succescriterium en moet door software bepaald kunnen worden. Dit kan gedaan worden door het toepassen van een element met het attribuut role=”status”. Dat element moet in de DOM staan bij het laden van de pagina en het plaatsen van tekst in dat element zorgt ervoor dat die tekst als statusbericht beschikbaar is voor hulptechnologieën. Om dit te testen is de zoekopdracht ‘QWEQ’ gebruikt.
Op het moment dat er een succesvolle zoekopdracht zoals “et tu” is uitgevoerd komt er ook een statusbericht in beeld dat aan de eisen van dit succescriterium moet voldoen. In dit geval gaat het om de tekst “120 resultaten gevonden”. Het is de bedoeling dat de webpagina na het aanpassen van de zoekopdracht feedback geeft aan gebruikers die niet kunnen waarnemen dat de inhoud van de pagina is veranderd. Bij het uitvoeren van een zoekopdracht vanaf een andere pagina zoals https://fincity.dev.publicaties.app/pub/wcagcheck/2/p1-homepage is geen issue, omdat het inladen van een nieuwe pagina geld als alternatief voor het presenteren van statusberichten.

Onderbouwing van de evaluatie

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

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

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

Geprint: 2024-11-21 16:20:27 v2.4-011