Rapport:
Systeem-audit digitale toegankelijkheid website Inergy

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p1-homepage staat het logo van de fictionele gemeente Liasserdam. Dit logo heeft met het tekstalternatief “logo” een onvolledig tekstalternatief. Het advies is bij een logo altijd een tekstalternatief te geven dat de tekst "logo" en de naam van de organisatie bevat. In dit geval zou een tekst als “gemeente Liasserdam (logo)” voldoende zijn.
Op het moment dat de link niet verwijst naar de homepage van de gemeente moet aangegeven worden naar welke omgeving de link op het logo van de gemeente verwijst. De homepage is hier als voorbeeld gebruikt deze situatie komt voor op alle pagina’s.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/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.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p31-tabs staan bij verschillende tabbladen voorbeeld afbeeldingen. Op dit moment zijn dat foto’s van auto’s. Deze afbeeldingen zijn nu opgemaakt zonder tekstalternatief. Doordat deze afbeeldingen de enige inhoud van een tabblad zijn moeten zij een tekstalternatief krijgen. Het gebruik van korte tekstalternatieven wordt geadviseerd denk in dit geval aan “foto van 911 in garage”, “auto met deuren open” en “Het achterwiel van mijn toekomstige Porsche op kunstgras”.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p31-tabs is het mogelijk dat niet alle tekst van de tab in beeld past. Om dat probleem op te lossen komen er in dat geval twee knoppen in beeld die het mogelijk maken om horizontaal te scrollen in de (tekst van de) tabbladen. Die knoppen hebben met de aria-labels “chevronprev” en “chevronnext” geen goed tekstalternatief.

Uitkomst: Niet aanwezig

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

Uitkomst: Niet aanwezig

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

Uitkomst: Niet aanwezig

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

Uitkomst: Niet aanwezig

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

Uitkomst: Niet aanwezig

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

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p4-tekst staat de tekst “Platte tekst” op een aparte regel boven een stuk lorem ipsum. Die tekst is nu visueel opgemaakt als kop bij die placeholdertekst en moet daarom opgemaakt worden als kop om te voldoen. Hieronder is de tekst “Tekst met opmaak” op een aparte regel geplaatst én opgemaakt met strong. Ook die tekst moet opgemaakt worden als kop om te voldoen én let op het is niet toegestaan om alle tekst in een paragraaf of kop op te maken met strong. Strong kan alleen gebruikt worden om een deel van een kop of paragraaf nadruk te geven. Let erop dat het u-element alleen een visuele verandering van de tekst is. De u-elementen zijn (net als b en i) onzichtbaar voor hulpsoftware. In de alinea hieronder is van enkele woorden de tekstkleur en van enkele andere woorden de achtergrondkleur aangepast. Die veranderingen van visuele presentatie zijn nu niet beschikbaar voor hulpsoftware. In het geval dat deze gebruikt worden om informatie over te brengen zal dit worden afgekeurd. Het gebruik van de betekenisloze placeholdertekst maakt het onmogelijk om de bedoeling van al deze verschillende visuele weergaven helemaal te bepalen. De alinea’s “Ordered” en “Un-ordered list” staan ieder als tekst boven een lijst en het is niet toegestaan om zo’n tekst helemaal met strong nadruk te geven.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p4-tekst staat een kleine tabel. De gegevens in de eerste rij en 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 rij op te maken met th-elementen in plaats van met td-elementen. Het is de bedoeling om dit ook met de eerste cel van de tweede en derde rij te doen. Voor die laatste twee cellen geld het advies om hiernaast ook het attribuut scope=”row” toe te voegen zodat hulpsoftware deze horizontale koppen goed presenteert.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p22-tabeluitdataset staat een tabel waarbij de gegevens in de eerste kolom iets zeggen over de gegevens in de andere kolommen. De hele tabelstructuur is niet beschikbaar voor hulpsoftware doordat op de table-elementen role="presentation" is gebruikt. De tabelcellen met de teksten “Programma zorg en welzijn” tot en met “Programma zorg en welzijn11” moeten een relatie met de overige cellen in diezelfde rij krijgen. Het advies is om de role="gridcell" op deze elementen te vervangen door role="rowheader". De gegevens in de laatste rij zijn visueel anders opgemaakt om duidelijk te maken dat dit totalen zijn. Die informatie is nu niet beschikbaar voor hulpsoftware. Het advies is om niet te proberen om van drie tabellen één tabel te maken. Het advies is om één table-element op deze pagina te plaatsen en om dan ARIA te gebruiken om de betekenis en functionaliteit te versterken. Het is bijvoorbeeld ook niet de bedoeling dat cellen een aria-label hebben dat identiek is aan de tekst die al in die cel staat, dat gebruik van ARIA veroorzaakt daar onnodig complexiteit.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p23-tabel-draaitabel staat een tabel. De informatie die visueel beschikbaar is bij het laden van deze tabel is nu niet beschikbaar voor gebruikers van hulpsoftware. De eerste rij van de tabel in de code bevat nu één cel zonder tekst. De tweede rij in de code bevat twee cellen zonder tekst. De derde rij van deze tabel bevat twee cellen waarbij de tweede cel een aparte tabel bevat met één rij die de rest van de zichtbare eerste tabelrij bevat. De vierde rij bevat twee cellen die ook ieder weer een aparte tabel met informatie bevatten. Visueel staat er hier een redelijk eenvoudige tabel met vier rijen en vier kolommen.
Na het activeren van de knop “Alles uitklappen” heeft de primaire tabel in de code nog steeds dezelfde structuur van een rij met een cel en drie rijen met twee cellen terwijl er een complexe tabel met negen rijen en twaalf kolommen in beeld staat. Op pagina https://www.w3.org/WAI/tutorials/tables/ staat meer informatie over het in html goed opmaken van complexe tabellen. Voor het aangeven van de juiste relaties kan ook ARIA gebruikt worden, maar dat is niet noodzakelijk. Het viel ook op dat in de tabelcellen met jaartallen punten voor de duizendtallen staan.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p24-ringdiagram is het mogelijk om de ringdiagrammen te vervangen door tabellen. Hier is aangenomen dat de tabellen bedoeld zijn als toegankelijk alternatief. De alternatieve informatie staat in de code in een groep met de naam “Gegevenstabel”. Het probleem is dat de rij met de kolomkoppen “Programma 1” en “Lasten” nu geen relatie heeft met de rest van de tabel in het element met role=”grid”. Het is mogelijk om dit probleem op te lossen door de role=”group” te vervangen door role=”table” in combinatie met het verwijderen van de role=”grid”. Op die manier valt de eerste rij van de tabel binnen het element dat het begin van de tabel aangeeft. Dit komt ook in de tabel alternatieven op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p25-staafdiagram. Om het voor gebruikers van hulpsoftware eenvoudiger te maken om door deze tabellen te navigeren is het advies om geen tabindex=”0” te gebruiken in deze tabellen.

Op pagina's https://fincity.dev.publicaties.app/pub/wcagcheck/1/p29-accordeon en https://fincity.dev.publicaties.app/pub/wcagcheck/1/p30-accordeonnew zijn de verschillende uitklapbare onderdelen opgemaakt met role="tab". Bij het openklappen van deze onderdelen komt alle aanvullende content in het element met role="tab" te staan. Dat is niet de bedoeling. Het element met role="tab" is bedoeld voor de bediening. Het element met role="tabpanel" is bedoeld om de aanvullende informatie in te plaatsen. Het is niet toegestaan om een element met role="tabpanel" te nesten in een element met role="tab". Het advies is om in plaats van tabpanel een serie uitklapbare elementen te gebruiken. Dat kan onder andere met de html-elementen details en summary. Dit kan ook met behulp van ARIA. Op pagina https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ staat daarover meer informatie.

Advies: Op alle pagina's van https://fincity.dev.publicaties.app/pub/wcagcheck/1/p1-homepage wordt ARIA menubar gebruikt voor website navigatie. Het is bij uitzondering toegestaan om deze componenten voor website navigatie te gebruiken. Het advies is om dit niet te doen, gebruik liever een nav-element met links of zoals in dit geval een nav gevuld met serie uitklapbare knoppen die dan weer gevuld zijn met links. Gebruikers verwachten ook niet dat zij de pijltjestoetsen moeten gebruiken om door dit menu te navigeren. De ARIA rollen menu, menubar en menuitem zijn bedoeld voor de bediening van applicaties zoals een tekstverwerker in een browser.

Advies: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p6-lijstmenu staat de kop “Overzicht van onze steden”. Deze kop is de eerste content in een nav-element met het aria-label=”subnavigatie”. Het advies is om dit aria-label te verwijderen. Een optionele verbetering is om een aria-labelledby toe te voegen die verwijst naar het (nog toe te voegen unieke) id van de kop “Overzicht van onze steden”. Deze situatie komt ook voor op pagina’s https://fincity.dev.publicaties.app/pub/wcagcheck/1/p2-componenten en https://fincity.dev.publicaties.app/pub/wcagcheck/1/p14-tegelmenu.

Advies: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p43-toegankelijkheid zijn twee p-elementen met daarin een br-element gebruikt om extra witruimte tussen de alinea’s te creëren. Het advies is om voor dit soort visuele styling CSS te gebruiken. Doordat de extra alinea’s eenvoudig genegeerd (kunnen) worden is dit niet een fout waarop deze pagina wordt afgekeurd. Het advies is om er voor te zorgen dat de toegankelijkheidspagina goed toegankelijk is.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p4-tekst staat een tekst die een gele in plaats van witte achtergrond heeft. Dat verschil in achtergrondkleur is nu de enige visuele manier om te zien dat deze tekst gemarkeerd is. De tekst ‘Ut ornare lectus’ heeft met HEX #700000 een andere tekstkleur als de overige tekst (HEX #333333). Het verschil tussen deze teksten is nu alleen visueel zichtbaar door een klein verschil in tekstkleur (het contrast is verwaarloosbaar klein). De blauwe (HEX #007BFF) link ‘vel turpis nunc.’ Heeft met 3,2:1 contrast met de omliggende tekst. Die link is daardoor visueel te onderscheiden van de omringende tekst door een verschil in contrast dat groter is dan 3,0:1 en dat maakt dat er twee visuele manieren zijn om deze link te onderscheiden van de omringende tekst.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p3-titel is de kop ‘Subtitel klein’ op dit moment alleen te onderscheiden van de omringende tekst door een verschil in kleur. Het advies is om deze kop anders op te maker door deze bijvoorbeeld groter of vetgedrukt te maken. Het kleurverschil van HEX #EC255A met HEX #333333 is niet groot genoeg om het verschil in contrast te laten gelden als alternatief voor het gebruik van kleur.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p24-ringdiagram zijn de kleuren in de ringdiagrammen alleen aan de legenda gekoppeld door het gebruik van kleur. Het moet voor ziende gebruikers mogelijk worden om die koppeling visueel te maken zonder dat het nodig is om over te schakelen naar de tabelweergave. Bij het tweede en derde ringdiagram zitten dichter bij een geldige oplossing. Daar kan de naam van het segment bij het bedrag gezet worden, op die manier is het niet langer noodzakelijk om de verschillende soorten blauw uit elkaar te kunnen houden.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p1-homepage staat de roze (HEX #EC255A) tekst ‘Navigeer naar’. Deze tekst heeft met 4,2:1 niet voldoende contrast met de witte achtergrond. Dit probleem komt ook op andere pagina’s voor zoals op https://fincity.dev.publicaties.app/pub/wcagcheck/1/p3-titel en https://fincity.dev.publicaties.app/pub/wcagcheck/1/p22-tabeluitdataset.

Op pagina’s https://fincity.dev.publicaties.app/pub/wcagcheck/1/p22-tabeluitdataset, https://fincity.dev.publicaties.app/pub/wcagcheck/1/p25-staafdiagram, https://fincity.dev.publicaties.app/pub/wcagcheck/1/p24-ringdiagram en https://fincity.dev.publicaties.app/pub/wcagcheck/1/p27-hierarchie staan tabellen waarbij de kolomkoppen witte tekst op een roze (HEX #EC255A) achtergrond bevatten. Die teksten hebben nu met 4,2:1 onvoldoende contrast om voor alle gebruikers goed zichtbaar te zijn.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p4-tekst staat de link ‘vel turpis nunc’. Deze link heeft de kleur #007BFF en die kleur heeft met 4,0:1 niet voldoende contrast met de witte achtergrond.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p2-componenten is een onderdeel van het hoofdmenu actief. De witte tekst “Componenten” heeft met 4,2:1 niet voldoende contrast met de roze (HEX #EC255A) achtergrond.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/sitemap.html hebben de blauwe (HEX #007BFF) links met 4,0:1 niet voldoende contrast met de witte achtergrond.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p24-ringdiagram hebben niet alle witte bedragen in de ringdiagrammen met labels voldoende contrast. Het moet mogelijk worden om de labels bij de diagrammen te lezen zonder over te moeten schakelen naar de tabelweergave van dat ringdiagram.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

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

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p4-tekst is het mogelijk om alle tekst te lezen als deze pagina wordt weergegeven met een breedte van 320 CSS-pixels. Het feit dat een deel van de informatie in de tabel buiten beeld staat is geen probleem, omdat het mogelijk is om deze informatie in beeld te krijgen door horizontaal te scrollen. Het probleem is dat het horizontaal scrollen om te tabel te lezen tot gevolg heeft dat een deel van de tekst die eerder wel zichtbaar was nu buiten beeld staat. Het horizontaal scrollen om de tabel volledig zichtbaar te maken moet zo geïmplementeerd worden dat deze geen negatieve impact heeft op de zichtbaarheid van de overige content op deze pagina.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p22-tabeluitdataset is er verlies van informatie als deze pagina wordt weergegeven met een breedte van 320 CSS-pixels. In de tabel wordt content die niet pas afgekort. Bijvoorbeeld in de eerste cel van de eerste kolom staat nu ‘Pro… 1’ in plaats van ‘Programma 1’. Dit geldt ook voor de versies van deze tabellen die te vinden zijn op andere pagina’s zoals https://fincity.dev.publicaties.app/pub/wcagcheck/1/p24-ringdiagram en https://fincity.dev.publicaties.app/pub/wcagcheck/1/p25-staafdiagram. Die twee pagina’s hebben nu ook verlies van content in hun standaard weergave met een breedte van 320 CSS-pixels. In de ringdiagrammen valt de legenda en een deel van de labels weg en in staafdiagrammen staat er geen informatie meer bij de assen van de diagrammen.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p31-tabs staat een verticale lijst met tabs. Bij een breedte van 320 CSS-pixels zijn de foto’s van de auto’s niet meer zichtbaar naast de lijst met tabbladen. In alle drie de tabblad weergaven is de tweede optie ‘Stand van zaken’. Bij de smalle weergave is het woord ‘zaken’ nooit helemaal zichtbaar. Het is een optie om de tekst ‘Stand van zaken’ te verdelen over meerdere regels als er niet voldoende ruimte is voor de tekst. Dit laatste probleem komt ook voor op https://fincity.dev.publicaties.app/pub/wcagcheck/1/p41-langepagina. (Het met de muis klikken op de grijze pijltjes is niet voldoende als oplossing, omdat dat niet met het toetsenbord kan.)

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p35-metzijbalk is de zijbalk niet goed te gebruiken als de pagina wordt weergegeven op een breedte van 320 CSS-pixels. Op deze smalle weergave kan de content in de zijbalk ook onder of boven het tekstblok geplaatst worden zodat het niet nodig is om horizontaal te scrollen.

Op het moment dat pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p45-zoeken wordt weergegeven met een breedte van 320 CSS-pixels is na het zoeken alle tekst leesbaar zonder dat het nodig is om horizontaal te scrollen. Het moet mogelijk zijn om te teksten bij de verschillende zoekresultaten te lezen zonder in twee dimensies te scrollen. Om dit te testen is de zoekopdracht ‘et tu’ gebruikt.

Advies: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p5-afbeelding staat een beeldvullende afbeelding. Bij het herschalen van de pagina naar 400% wordt er een significant smallere versie van deze afbeelding weergegeven. Let erop dat deze smallere versie van de afbeelding geen verlies van informatie veroorzaakt. In dit geval is het nog steeds duidelijk een foto van een eekhoorn en daarom niet afgekeurd.

Advies: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p23-tabel-draaitabel lijkt er een verlies van informatie te zijn als deze pagina wordt weergegeven met een breedte van 320 CSS-pixels. Dit is te omzeilen door de knop ‘Alles uitklappen’ te activeren en wordt daarom niet afgekeurd. Het advies is om er voor te zorgen dat ook de ingeklapte versie van deze tabel horizontaal te scrollen is.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s staat rechtsboven een invoerveld waarvan de rand (HEX #BDBDBD) met 1,9:1 onvoldoende contrast heeft met de witte achtergrond. Op pagina van https://fincity.dev.publicaties.app/pub/wcagcheck/1/p1-homepage is dat invoerveld te herkennen aan de ‘1’ die erin staat. Alleen het nummer is niet voldoende om visueel duidelijk te maken dat een gebruiker ook direct een nummer kan invoeren. Het kader rond het nummer is de enige visuele hint die dat duidelijk maakt, een kader met de kleur HEX #949494 zou bijvoorbeeld wel voldoen.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p24-ringdiagram staan rechtsboven de verschillende SVG-afbeeldingen twee knoppen. Er zijn daar icoontjes voor staafdiagram en lijst gebruikt. De actieve optie is te herkennen aan een gevulde achtergrond, de niet-actieve optie heeft alleen een kader rond het icoon staan. De achtergrond en het kader hebben beide dezelfde grijze kleur (HEX #CCCCCC). Om er voor te zorgen dat het verschil tussen actief en niet actief goed zichtbaar is moet die kleur een contrast van 3,0:1 of meer hebben met de witte achtergrond. Het huidige contrast is met 1,6:1 niet voldoende. Let er op dat het icoon nog steeds voldoende contrast met de achtergrond heeft na het aanpassen van de kleur, een grijs tussen de HEX# #5A5A5A en HEX #949494 werkt. Dit probleem komt ook voor op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p25-staafdiagram. Dit probleem moet opgelost worden om het mogelijk te maken om de tabelweergave te beoordelen als toegankelijk alternatief voor de weergave in een ring- of staafdiagram.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p45-zoeken staat een invoerveld om mee te zoeken. De grijze lijn onder dat invoerveld (HEX #DDDDDD) heeft met 1,4:1 niet voldoende contrast. Die waarde moet minimaal 3,0:1 zijn om te voldoen, die waarde is bijvoorbeeld te behalen door de kleur HEX #949494 te gebruiken.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p1-homepage staat onder het logo een roze (HEX #EC255A) blok met een wit huisje erin. Op het moment dat het hoofdmenu toetsenbordfocus krijgt wordt de achtergrond grijs (HEX #4C4C4C) in plaats van roze. Deze twee kleuren hebben met 2,0:1 niet voldoende onderling contrast om voor alle gebruikers goed zichtbaar te zijn. De verandering moet een contrast van 3,0:1 hebben om te voldoen, tenzij de standaard focusindicator van de browser gebruikt wordt.
Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p2-componenten is de zichtbaarheid van de toetsenbordfocus op dit onderdeel lager. De achtergrond van het huisje gaat op deze pagina van wit naar lichtgrijs (HEX #F5F5F5) met een contrast van 1,1:1 in plaats van 3,0:1. Dit probleem komt op alle andere pagina’s voor.
In Firefox is het mogelijk om met de toetsenbord pijltjes andere onderdelen van dit hoofdmenu toetsenbordfocus te geven, die focus gebruikt dezelfde kleurveranderingen als hierboven genoemd zijn en deze voldoen daarom ook niet. In Chrome is het niet mogelijk om het hoofdmenu met het toetsenbord te bedienen, dat probleem is apart afgekeurd onder succescriterium 2.1.1.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p22-tabeluitdataset staat een tabel waarbij de laatste rij toetsenbordfocus kan krijgen. De daar gebruikte lichtblauwe rand (HEX #35BAF6) heeft met 1,9:1 niet voldoende contrast met de grijze achtergrond (HEX #EBEBEB) van deze tabelrij. Het feit dat de toetsenbordfocus helemaal niet zichtbaar is op de kolomkoppen is een probleem dat afgekeurd is onder succescriterium 2.4.7.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p24-ringdiagram kunnen de ringdiagrammen vervangen worden door tabellen met behulp van de knoppen boven de diagrammen. Verschillende onderdelen van die tabellen kunnen toetsenbordfocus ontvangen. Welke onderdelen dat zijn verschilt per browser. De gebruikte kleur (HEX #35BAF6) heeft in geen geval voldoende contrast met de witte of roze (HEX #EC255A) achtergrond in de tabel. De gemeten contrastwaarden zijn respectievelijk 2,2:1 en 1,9:1. Dit probleem geld ook voor de tabelalternatieven op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p25-staafdiagram.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p29-accordeon kunnen de uitklapbare elementen toetsenbordfocus krijgen. De positie van die focus is nu alleen zichtbaar door een andere achtergrondkleur. Die verandering van wit naar lichtgrijs (HEX #F5F5F5) heeft met 1,1:1 niet voldoende contrast. Dit probleem komt ook voor op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p30-accordeonnew.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p24-ringdiagram wordt als de muis op een van de ringdiagrammen staat aanvullende content getoond die ook beschikbaar in de tabelweergave. Het moet mogelijk worden om die aanvullende content te sluiten zonder dat het nodig is om de muisaanwijzer te verplaatsen. Deze situatie komt ook voor op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p25-staafdiagram.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/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/1/p23-tabel-draaitabel en https://fincity.dev.publicaties.app/pub/wcagcheck/1/p27-hierarchie. Het in en uit klappen van de individuele onderdelen ‘Begroting’ tot en met ‘Reserve’ is niet mogelijk met het toetsenbord, dit kan opgelost worden door in de relevante tabelcellen knoppen te plaatsen die het mogelijk maken die onderdelen in en uit te klappen.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p33-kaart is het in Firefox mogelijk om de positie op de kaart aan te passen. Op het moment dat de focus zichtbaar is als kader om de hele kaart is het mogelijk om met de pijltjestoetsen de positie aan te passen. Deze functionaliteit is niet beschikbaar in Chrome. Dit geld ook voor de kaart op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p41-langepagina.

Advies: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p31-tabs is het mogelijk om de tabbladen met de pijltjestoetsen te bedienen. Het is de bedoeling dat bij horizontale tabbladen de pijl omlaag en omhoog niet werken om van tabblad te wisselen en bij verticale tabbladen is het de bedoeling dat de pijltjes naar links en rechts niet werken. Dat is de reden waarom het vereist is om de oriëntatie van een verticale tablist in de code aan te geven, op het moment dat er geen oriëntatie is aangegeven doet hulpsoftware de aanname dat het om horizontale tabbladen gaat. Doordat het mogelijk is om met de juiste pijltjes de verschillende tabbladen te bedienen wordt dit niet afgekeurd, maar het advies is om dit wel aan te passen.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Bevindingen: Advies: De pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p1-homepage heeft nu de paginatitel “Homepage | WCAG Check”. Deze titel geeft voor de startpagina van de testomgeving goed het doel van deze pagina aan. Het is een algemeen advies om de naam van de organisatie onderdeel te maken van de paginatitel. In dit voorbeeld zou “Homepage | gemeente Liasserdam” een goede paginatitel zijn als deze pagina gevuld zou zijn met informatie over die fictieve gemeente.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p22-tabeluitdataset is de onderste rij van de tabel niet interactief, maar deze tabelrij kan wel toetsenbordfocus ontvangen. Het met tabindex=”0” geven van toetsenbordfocus aan componenten die niet interactief zijn kan bij gebruikers verwarring veroorzaken. Een soortgelijk probleem komt ook op andere plaatsen voor. Op pagina’s https://fincity.dev.publicaties.app/pub/wcagcheck/1/p24-ringdiagram en https://fincity.dev.publicaties.app/pub/wcagcheck/1/p25-staafdiagram is het mogelijk om de diagrammen te vervangen door tabellen met behulp van een knop boven elk van die diagrammen. Het gedrag van deze tabellen verschilt tussen Firefox en Chrome. In Firefox krijgt elke cel in die tabellen een overbodige (gedeeltelijk) zichtbare toetsenbordfocus die verwijdert moet worden om te voldoen, in Chrome gaat het om één cel per tabel . Die tabellen zijn niet interactief en mogen bij het navigeren met de tabtoets geen toetsenbordfocus krijgen.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p29-accordeon staan twee uitklapbare componenten onafhankelijk van elkaar toetsenbordfocus moeten krijgen om te voldoen deze twee elementen zijn nu onterecht opgemaakt als tabbladen. Visueel zijn dit twee losse uitklapbare componenten waarbij verwacht mag worden dat deze het selecteren van het volgende onderdeel met de tabtoets werkt en niet met de pijltjestoetsen. Het afwijken van de te verwachte focus volgorde heeft hier een negatieve impact op de bedienbaarheid van deze pagina en dat is daardoor niet toegestaan. Dit probleem komt ook voor op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p30-accordeonnew. Het advies is dan ook om de combinatie van summary en details componenten te gebruiken. Andere oplossingen zijn mogelijk. Het advies voor een accordeon waarbij er maar één onderdeel tegelijk helemaal open kan staan is het volgen van het patroon op pagina https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/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 terug en dit probleem geld ook voor de link ‘vel turpis nunc.’ in de lorem ipsum tekst op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p4-tekst.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p22-tabeluitdataset staat een tabel waarbij de kolomkoppen gebruikt kunnen worden om de sortering in de tabel aan te passen. Deze kolomkoppen kunnen nu toetsenbordfocus ontvangen. Er is op dit aangepaste componenten van de gebruikersinterface geen zichtbare toetsenbordfocus toegepast.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p23-tabel-draaitabel zijn er drie componenten in de tabel die toetsenbordfocus kunnen ontvangen door het gebruik van tabindex=”0”. In geen van die gevallen is er een zichtbare indicator van de toetsenbordfocus. Dit type probleem komt ook voor op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p27-hierarchie.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p31-tabs staan vier verschillende groepen met drie tabbladen. De toetsenbordfocus komt op elk van de groepen tabbladen, maar daarvoor is nu geen visuele indicator aanwezig en dat is wel verplicht. Dit probleem geld natuurlijk ook voor de tabbladen op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p41-langepagina.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p5-afbeelding is op de tweede afbeelding een Engels tekstalternatief gebruikt. Ook de figcaption onder de afbeelding is Engels. Er zijn meerdere manieren om dit probleem op te lossen. Het is een optie om op aan het bovenliggende figure-element de code lang=”en” toe te voegen. Het is ook een optie om deze twee teksten individueel een taalwisseling te geven of om deze teksten te vertalen naar het Nederlands. Het gebruik van een enkel Engels woord zoals “Home” in het hoofdmenu wordt niet afgekeurd.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p24-ringdiagram wordt de weergegeven component beschreven als ringdiagram. Bij elk van die diagrammen staat een knop om dat diagram weer te geven als tabel en een knop om het ringdiagram weer in beeld te zetten. De bedoeling van dit succescriterium is om onderdelen consistent te benoemen. De naam van de knop om het diagram weer in beeld te zetten is nu “Weergeven als grafiek”. Het is nodig om hier een betere naam voor te gebruiken. Doordat deze knop ook gebruikt wordt op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p25-staafdiagram is het advies om het woord ‘grafiek’ in om te zetten in ‘diagram’, zodat de op de webpagina gebruikte tekst overeen komt met naam van de knop.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p1-homepage staat een ARIA menubar met daarin meerdere elementen met de role menuitem. Er zijn meerdere problemen in deze serie componenten aangetroffen. Het advies is om hier geen menubar te gebruiken. De ARIA menubar is niet bedoeld voor website navigatie, maar bedoeld voor applicaties. Het advies is dan ook om dit menu te vervangen door een nav-element gevuld met een serie uitklapbare knoppen en links. De ARIA menubar is nu afgekeurd omdat het eerste menuitem met de naam “home” een link bevat. Het is nooit toegestaan om een link te nesten binnen een element met role=menu-item, dit probleem komt meer voor. De menuitems “componenten” en “templates” bevatten een submenu en moeten daarom de attributen aria-haspop en aria-expanded hebben om te voldoen. Dit probleem komt ook voor bij de uitklapbare menuitems “lijst menu”, “Tegel menu” en “Met zijbalk”. Deze problemen komen op alle pagina’s voor de homepage is hier enkel als voorbeeld gebruikt.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p22-tabeluitdataset komt er een menu met drie menuitems in beeld na het indrukken van shift+F10 indien de focus op een van de drie kolomkoppen staat. Dat menu moet toegankelijk zijn, omdat dat nu de enige manier is om de sortering te wissen. Een van de problemen is dat de verwijzing met aria-activedescendant niet altijd klopt. Op het moment dat de focus met de muis aangepast wordt moet aria-activedescendant verwijzen naar het onderdeel dat dan focus heeft door hover. Dit type probleem komt ook voor in de aangepaste contextmenu’s op pagina’s https://fincity.dev.publicaties.app/pub/wcagcheck/1/p23-tabel-draaitabel, https://fincity.dev.publicaties.app/pub/wcagcheck/1/p27-hierarchie en dergelijke. Het is een optie om hier een oplossing in de vorm van een menu-knop te gebruiken. Zie https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ voor meer informatie op die ARIA oplossing. Dit probleem komt ook voor in de tabel op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p23-tabel-draaitabel. Het is daar mogelijk om de sortering aan te passen met behulp van een aangepast contextmenu.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p22-tabeluitdataset staat een tabel 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 mogelijk dat de kolomkop een knop bevat die het mogelijk maakt om de sortering aan te passen. Het is niet mogelijk een element twee verschillende rollen te geven. 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.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/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.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/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. In deze treegrid is geen gebruik gemaakt van aria-selected om duidelijk te maken welke van de rijen of cellen op dit moment is geselecteerd. 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. Hiernaast moet de rij met de cel “2” altijd aria-rowindex="4" hebben, omdat dit de vierde rij is op het moment dat alle bovenstaande onderdelen zijn uitgeklapt. Deze waarde mag veranderen naar op het moment dat de sortering wordt aangepast. Het is ook mogelijk om deze informatie aan gebruikers van hulpsoftware aan te bieden met behulp van tekst.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p29-accordeon staat content die in de code is opgemaakt als een tablist waarbij er meer dan een tabblad tegelijk open kan staan. Een accordeon is een groep uitklapbare elementen waarbij er maximaal één onderdeel tegelijk uitgeklapt kan zijn. Op pagina https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ staat meer informatie. Het is in deze context ook mogelijk om een serie details en summary elementen te gebruiken. Bij het gebruik van deze standaard html-elementen is het niet noodzakelijk om aanvullende ARIA te gebruiken.
In deze tablist is onjuist gebruik gemaakt van aria-activedescendant. De bedoeling is dat de waarde van dat attribuut veranderd op het moment dat een ander element met role=”tab” focus krijgt. De elementen met role=”tab” horen ieder een uniek id te krijgen dat niet veranderd. Dit geld ook voor de accordeon op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p30-accordeonnew.

Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p31-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/1/p41-langepagina.

Op alle pagina’s van https://fincity.dev.publicaties.app/pub/wcagcheck/1/p1-homepage komt er een hamburgermenu in beeld als de pagina herschaalt wordt naar 133% of meer. Die knop met aria-label “menu” heeft twee verschillende toestanden (states) namelijk ingeklapt en uitgeklapt. Die toestand is nu niet beschikbaar voor hulpsoftware. Een van de manieren om dit op te lossen is door op de knop het attribuut aria-expanded toe te passen. Het hiernaast ook toepassen van aria-haspopup=”menu” wordt geadviseerd. Het is ook niet de bedoeling dat een element met role=”button” in een ARIA menubar staat. In een menubar hort gebruik gemaakt te worden van menuitems. Zie https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ voor meer informatie.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://fincity.dev.publicaties.app/pub/wcagcheck/1/p45-zoeken 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 ‘Q’ 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 “22 resultaten gevonden”. Het is de bedoeling dat de webpagina na het zoeken feedback geeft aan gebruikers die niet kunnen waarnemen dat de inhoud van de pagina is veranderd. Het advies om dit probleem op te lossen is om het p-element met de class=”search-total-count” bij het laden van de pagina zonder tekst in de DOM te plaatsen en de role=”status” te geven. Het plaatsen van tekst in dat element is dan voldoende voor de foutmelding en voor de melding die duidelijk maakt dat er resultaten gevonden zijn. In plaats van role="status" kan ook het verplaatsen van de toetsenbordfocus naar het p-element gebruikt worden, dat p-element moet dan wel het attribuut tabindex="-1" krijgen.