Rapport:
Systeemaudit digitale toegankelijkheid website Lias

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/ staat bovenaan een logo. Dat logo bevat meer informatie dan het huidige tekstalternatief “Logo van Lias”. Het feit dat Lias een Inergy product is moet naar voren komen in het tekstalternatief.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4375/homepage-6-01 staan datavisualisaties, opgemaakt met svg-afbeeldingen die geen goed tekstalternatief hebben. Als een svg-afbeelding geen tekstalternatief heeft en wel tekst bevat wordt die tekst gebruikt als tekstalternatief. In dit geval heeft dat tot gevolg dat de waarden van de verschillende assen worden gepresenteerd als tekstalternatief. Geef de svg-elementen een alternatieve tekst met het title-element en verwijs naar een uitgebreidere beschrijving van de datavisualisaties bij 'Toelichting'.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4520/portefeuillehouders heeft het img-element met de 404 afbeelding geen alt-attribuut. Het is nodig om een alt-attribuut toe te voegen omdat deze afbeelding informatief is. Geef de afbeelding een alternatieve tekst, bijvoorbeeld '404'.

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://lias-webpub-lias-showcase-test.azurewebsites.net/ staan onder de twee paragraven drie blokken met content. Deze bevatten teksten, zoals ''Groenste gemeente van Nederland'. Deze teksten zeggen iets over de inhoud van het blok en waar bijvoorbeeld de link 'toelichting' naar verwijst. Die relatie is nu niet beschikbaar voor hulpsoftware. Dit moet aangepast worden om te voldoen. Maak visuele koppen als kop-element en zorg ervoor dat deze in de code boven de woorden als 'mijlpaal' staan. Visueel mag de tekst er wel boven staan. Dit doet zich ook op andere pagina’s voor, zoals op https://lias-webpub-lias-showcase-test.azurewebsites.net/p4375/homepage-6-01.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4307/01-burgerzaken-en-algemeen-bestuur staat er onder de kop “Coalitieafspraken” geen content. Een kop moet altijd iets zeggen over de content die eronder staat en mag om die reden dan ook niet opgevolgd worden door een andere kop van gelijk niveau. Het viel ook op dat de kop “Wat heeft het gekost?” niet in hetzelfde section-element staat als de tabel waarover deze kop iets zegt. De relatie tussen deze koppen en de rest van de content is niet duidelijk en moet aangepast worden om te voldoen.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4307/01-burgerzaken-en-algemeen-bestuur staan visuele koppen, zoals '2. Gemeentelijke dienstverlening'. Deze tekst is opgemaakt met het em-element in plaats van als kop. Verwijder het em-element en gebruik een gepast h-element.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4349/actuele-ontwikkeling-uitvoering staan de teksten “Ad 1. De Omgevingswet” tot en met “Ad 3. Macro economische ontwikkelingen”. Die teksten zeggen iets over de onderstaande tekst en moeten aangepast worden om te voldoen. Het gebruik van koppen is hier een oplossing.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/ komt een div-element (met class=tile-menu-item-title-container no-icon) voor (in het contentblok met de tekst 'Duurzame groei') met de title=” Open hier in een pop-up de video: 'Wat doet een wethouder?' op Youtube”, omdat die tekst nu alleen verwarring veroorzaakt. De pop-up kan geopend worden door de knop eronder (die dezelfde title nogmaals heeft) te activeren.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4916/toegankelijkheidsverklaring staat een broodkruimelpad dat nu als menu is opgemaakt met ARIA. Bij een broodkruimelpad heeft de volgorde van de onderdelen in dat pad betekenis, om die reden is het gebruik van een ol-element in plaats van een ul-element belangrijk. Op dit moment die relatie ook verborgen doordat het ul-element geen lijst meer is door het gebruik van role=”menubar” op dat element. Dit geld voor alle pagina’s met een broodkruimelpad. Zie ook succescriteria 2.1.1 en 4.1.2.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4328/inleiding staan roze schuingedrukte afkortingen in de tekst zoals “AB”, “AWBZ”, en “Wmo”. Die afkortingen hebben een betekenis die als tooltip in beeld komt als de muis erop staat. Deze relatie is alleen herkenbaar door een andere opmaak. Dit verschil is nu niet beschikbaar voor gebruikers van hulpsoftware, evenals de betekenis van de afkorting zelf. Het advies is om hiervoor abbr-elementen te gebruiken.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4375/homepage-6-01 is niet alle informatie in het midden van de cirkel beschikbaar voor gebruikers van hulpsoftware. Dit geld ook voor de informatie in de andere diagrammen op deze pagina. Ook is het zo dat de informatie die in beeld staat bij het laden van “Verdeling van de programma's” niet meer terugkomt nadat de muis of focus in de svg is geweest. Voor gebruikers van NVDA i.c.m. Firefox bestaat deze svg nu uit een set klikbare afbeeldingen met daarin teksten als “Bestuur en dienstverlening, €6.754,107” tot en met “Sociaal Domein, €34.872,632”. De percentages die in beeld komen zijn niet beschikbaar voor hulpsoftware. Het stapeldiagram bevat nu acht lege focusbare elementen. Bij het lezen van de informatie in dit blok wordt nu alleen de informatie op de assen en de legenda gepresenteerd. Dit geldt ook voor de grafiek met WOZ waarde. De focus op de elementen in de grafiek geeft aan hulpsoftware alleen maar aan dat het een afbeelding is die nu focus heeft. De rest van de informatie die gepresenteerd wordt zijn de assen en de tekst in de legenda. Voor het staafdiagram met nieuwbouw geld een soortgelijk probleem.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4315/programma-overzicht is relevante informatie niet beschikbaar voor hulpsoftware door het gebruik van aria-hidden=”true”. Bijvoorbeeld onder de link “Programma 5.2 04. Economische zaken en toerisme” staat nu informatie die niet beschikbaar is voor gebruikers van hulpsoftware. Let bij het oplossen van deze problemen ook op het gebruik van andere ARIA zoals role=”tabpanel”. Doordat de content met die rol nu verborgen is wordt die niet afgekeurd, maar simpelweg de aria-hidden weghalen is niet voldoende. Het advies is om de role=”tabpanel” en de aria-labelledby op diezelfde elementen ook weg te halen.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4316/11-algemene-dekkingsmiddelen staat een tabel waarbij de gegevens in de eerste rij iets zeggen over de informatie in die kolom. De inhoud van die tabelcellen moet daarom ook opgemaakt worden als kolomkop. Hiernaast is het niet toegestaan om alle content in één tabelcel op te maken met het em-element. Dat element is bedoeld om een deel van een tekst nadruk te geven en kan niet gebruikt worden als alternatief voor het gebruik van kolomkoppen.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4363/verloop-reserves-en-voorzieningen-2019-2022 staat een tabel met in de eerste cel op de eerste rij “Bedragen * 1000”. Die informatie geld nu alleen voor de eerst kolom, maar zou voor alle cellen in deze tabel moeten gelden. Er zijn meerdere oplossingen mogelijk, een daarvan is een uitleg vóór de tabel te plaatsen. In de tweede rij zijn de cellen in de tweede tot en met de laatste kolom niet opgemaakt als kolomkop die iets zegt over de informatie in cellen in dezelfde kolom.

Het gebruik van th is een optie. Het is niet toegestaan om informatie die in één cel hoort te splitsen over meerdere rijen zoals “Stand per 31-12-2015 / 01-01-2016”, “Toe- voeging” en dergelijke. Het is niet toegestaan om alle inhoud in één tabelcel op te maken met em. De code in de eerste kolom zegt niet echt iets over de informatie in de rest van de rij, de tekst in de tweede kolom doet dat wel. Dit soort horizontale relaties zijn visueel en moeten een alternatief in de code krijgen. Het advies is dan ook om de tekst in de tweede kolom een relatie met de andere cellen in die kolom te geven. Hiervoor kan zoals ook al in deze tabel gedaan is het th-element gebruikt worden in combinatie met het headers-attribuut. Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4367/geprognosticeerde-balans-2019-2022 komen soortgelijke problemen voor.

Wanneer een pagina onder één van de menu items in de hoofdnavigatie, bijvoorbeeld 'Paragrafen' actief is, kleurt de achtergrond van het menu item grijs. Deze relatie is niet beschikbaar voor hulpsoftware. Gebruik bijvoorbeeld aria-current om deze relatie ook niet-zichtbaar over te brengen.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

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

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4375/homepage-6-01 staat een stapeldiagram. Het gebruik van kleur is de enige manier waarop de koppeling tussen de kleuren van de staven en de kleuren in de legenda gemaakt kan worden. Er zijn verschillende oplossingen mogelijk. Het advies is de kleuren zo te kiezen dat deze voldoende contrast met elkaar hebben én die beide kleuren moeten ook voldoende contrast met de achtergrond krijgen. Het contrast tussen de kleuren HEX #CD7D26 en HEX #F75B5B is nu 1:1 terwijl dit minimaal 3:1 moet zijn om het verschil in contrast te laten tellen als visueel middel om deze twee onderdelen te identificeren. Het is natuurlijk ook mogelijk om voor een andere oplossing te kiezen zoals het arceren van één van de twee kleuren. Het feit dat de afbeelding interactief reageert op de muisaanwijzer is (in dit geval) niet voldoende als alternatief voor de eisen van dit succescriterium. De grafiek met rondjes en plusjes voldoet aan de eisen van dit succescriterium als het contrast van de icoontjes in de grafiek aangepast wordt zodat die een contrast van 3:1 of meer hebben met de witte achtergrond. Het staafdiagram naast die grafiek voldoet niet om dezelfde reden als het stapeldiagram.

Advies: Op pagina’s https://lias-webpub-lias-showcase-test.azurewebsites.net/p4316/11-algemene-dekkingsmiddelen, https://lias-webpub-lias-showcase-test.azurewebsites.net/p4363/verloop-reserves-en-voorzieningen-2019-2022 en https://lias-webpub-lias-showcase-test.azurewebsites.net/p4367/geprognosticeerde-balans-2019-2022 is in de verschillende tabellen kleur gebruikt om informatie beter duidelijk te maken. Dat gebruik van kleur wordt niet afgekeurd omdat de opmaak en de inhoud van de tekst in de linker kolom voldoende is als alternatief voor dit gebruik van kleur. Met het vullen van dit soort tabellen met andere informatie kunnen er problemen ontstaan met het gebruik van kleur in tabellen.
Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4307/01-burgerzaken-en-algemeen-bestuur is het contrast tussen de blauwe en zwarte tekst in de tabel meer dan 3:1. Het gevolg is dat er naast een verschil in kleur ook een verschil in contrast is waardoor er voldaan wordt aan de eisen van dit succescriterium.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4375/homepage-6-01 staat onder de tekst ‘Verdeling van de programma's’ een cirkel met daarin een bedrag en een percentage. Dat percentage staat standaard op 100%. Die grijze tekst (HEX #999999) heeft met 2,8:1 niet voldoende contrast met de witte achtergrond.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4316/11-algemene-dekkingsmiddelen hebben de eerste en de laatste rij een rode achtergrond (HEX #F00000). De witte tekst op die rode achtergrond heeft net niet voldoende contrast om te voldoen aan de eisen van dit succescriterium. Het contrast moet minimaal 4,5:1 zijn en het is nu 4,4:1. Dit komt ook voor op andere pagina’s zoals https://lias-webpub-lias-showcase-test.azurewebsites.net/p4363/verloop-reserves-en-voorzieningen-2019-2022 en https://lias-webpub-lias-showcase-test.azurewebsites.net/p4367/geprognosticeerde-balans-2019-2022.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net is het mogelijk om een pop-up te openen door de knop “Mijlpaal Groenste gemeente van Nederland” te activeren. In die pop-up staat bovenaan het woord “Mijlpaal”. Die grijze tekst (HEX #848484) heeft met een contrastratio van 3,7:1 niet voldoende contrast met de witte achtergrond. Dit probleem komt ook voor op het woord “Mijlpaal” in de andere pop-up op deze pagina.

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: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% dan verdwijnt op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4916/toegankelijkheidsverklaring tekst onderaan de pagina. Bij minder dan 200% staat er onderaan twee links naar de vorige en volgende pagina. Bij het inzoomen staat daar er niet langer bij om welke pagina het gaat. De teksten “Sitemap” en “Home” vallen weg. Dit type probleem komt op alle pagina’s met deze twee links voor en moet overal opgelost worden om te voldoen. Vergelijkbare situaties doen zich voor op pagina’s https://lias-webpub-lias-showcase-test.azurewebsites.net/p4520/portefeuillehouders, https://lias-webpub-lias-showcase-test.azurewebsites.net/p4315/programma-overzicht en https://lias-webpub-lias-showcase-test.azurewebsites.net/p4367/geprognosticeerde-balans-2019-2022.

Advies: Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4505/inleiding is een deel van de content verborgen achter de “Lees meer” knop. Bij het inzoomen is er minder tekst beschikbaar voor het activeren van deze knop. Doordat wel alle tekst beschikbaar is na het activeren van deze knop wordt dit nu niet afgekeurd. Het advies is om een functionaliteit als deze niet op deze manier te gebruiken. Bij het in beeld zetten van aanvullende interactieve content op een pagina zijn er bijvoorbeeld ook eisen voor de toetsenbordfocus waar nu niet aan is voldaan.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4328/inleiding is heeft de menuoptie ‘Algemeen’ een andere achtergrondkleur (HEX #D9D9D9). Dit is gedaan om visueel duidelijk te maken dat dat menuonderdeel actief is. Het probleem is dat het contrast tussen dit kader en de witte achtergrond met 1,4:1 niet voldoende is om voor alle gebruikers goed zichtbaar te zijn. Er moet een verandering komen die een contrast heeft van meer dan 3,0:1 om aan de eisen van dit succescriterium te voldoen. Het is bijvoorbeeld een optie om de tekst van het actieve menuonderdeel vetgedrukt te maken of te onderstrepen. Het is ook een optie om een donkere lijn om het grijze kader te plaatsen. Dit probleem geld ook voor de optie ‘Inleiding’ in het actieve menu en komt voor op bijna alle andere pagina’s zoals https://lias-webpub-lias-showcase-test.azurewebsites.net/p4329/missie-en-visie, https://lias-webpub-lias-showcase-test.azurewebsites.net/p4375/homepage-6-01 en https://lias-webpub-lias-showcase-test.azurewebsites.net/p4367/geprognosticeerde-balans-2019-2022.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4329/missie-en-visie is gebruik gemaakt van een aangepaste indicator van de toetsenbordfocus op de knoppen om de aanvullende content uit te klappen. De achtergrond van de plus wordt lichtgrijs (HEX #F7F7F7) in plaats van wit. Die verandering heeft met 1,1:1 niet voldoende contrast om goed zichtbaar te zijn. Het advies is om op deze knoppen de standaard toetsenbordfocus van de browser naar voren te laten komen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4315/programma-overzicht staat een invoerveld om de resultaten op deze pagina te filteren. Bij het aanpassen van de tekstafstanden past de tekst “Vul hier uw zoekterm in...” niet meer helemaal in het invoerveld. Het is nodig om deze tekst (of het invoerveld) aan te passen zodat deze bij een letterafstand van 0,12em en een woordafstand van 0,16em nog steeds past. Pas bijvoorbeeld de placeholdertekst aan, zodat het verschil in functionaliteit met de algemene zoekfunctie bovenaan deze pagina beter duidelijk is. Een tekst als “Verfijn resultaten” of “Zoek op deze pagina” geeft beter aan wat de functie van dit invoerveld is. Dit doet zich ook voor op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4357/financien-overzichten.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4505/inleiding past na het aanpassen van de letter en woordafstand de tekst “Lees meer” niet meer in de daarvoor aangewezen ruimte. Het woord “Meer” is daardoor niet meer goed leesbaar.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4375/homepage-6-01 wordt er in de “Verdeling van de programma's” andere content getoond als de muisaanwijzer of de toetsenbordfocus op een van de onderdelen in dat cirkeldiagram staat. Indien er bij gebruik van de muisaanwijzer in het midden een andere tekst getoond wordt is die niet aanwijsbaar zonder dat de informatie verdwijnt. In beide gevallen kan de aanvullende content niet worden gesloten zonder dat het nodig is om de muisaanwijzer of toetsenbordfocus te verplaatsen.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4375/homepage-6-01 staan naast et eerder genoemde cirkeldiagram twee staafdiagrammen en een lijngrafiek. In al die drie componenten komt er aanvullende tekst in beeld als de muis op bepaalde onderdelen staat. Dat gedeeltelijk transparante blok met witte tekst is niet aanwijsbaar en dat moet wel mogelijk zijn om te voldoen aan de eisen van dit succescriterium. Dit probleem komt ook voor op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4381/06-sport-en-cultuur. Om dit te zien moet op die pagina wel eerst de optie “Saldo” geactiveerd worden.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4328/inleiding komen er aangepaste tooltips met informatie over afkortingen in beeld als de muis op de roze afkortingen in de tekst wordt geplaatst. Het gaat onder andere om de teksten “AB”, “AWBZ” en “Wmo”. Doordat deze onderdelen per ongeluk open geklapt kunnen worden met de muis én over andere tekst heen vallen moet het mogelijk zijn om deze te sluiten zonder de muis of toetsenbordfocus te verplaatsen en dat is op dit moment niet mogelijk. Het advies is hier voor een standaard html-oplossing met abbr-elementen te kiezen of om het sluiten van deze pop-ups mogelijk te maken door op een toets als escape te drukken.

Uitkomst: Onvoldoende

Bevindingen: Wanneer bij een schermgrootte van 1280 bij 1024 pixels ingezoomd wordt tot 200% dan verdwijnt op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4381/06-sport-en-cultuur de lijst met links onder het cirkeldiagram. In plaats daarvan komt er boven de kop “Wat hebben we bereikt?” een keuzelijst met het label “Kies je pagina” in beeld. Deze keuzelijst is niet bedienbaar met het toetsenbord. Zorg dat interactieve elementen met zowel de muis als met het toetsenbord bereikbaar en bedienbaar zijn. Dit doet zich ook op andere pagina’s voor, zoals op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4316/11-algemene-dekkingsmiddelen, https://lias-webpub-lias-showcase-test.azurewebsites.net/p4505/inleiding en https://lias-webpub-lias-showcase-test.azurewebsites.net/p4349/actuele-ontwikkeling-uitvoering.

Op alle pagina’s van https://lias-webpub-lias-showcase-test.azurewebsites.net/ staat een hoofdmenu. Deze heeft met aria de rol 'menubar' gekregen. Een menubar is te bedienen met de pijltjestoetsen. Die bediening is nu niet mogelijk doordat het indrukken van de pijl naar links of rechts meteen een andere pagina laadt. Ook de bediening met pijl omlaag om een gesloten menu te openen werkt nu niet. De rol 'menubar' is hier niet geschikt. Gebruik liever een nav-element gevuld met een set uitklapbare knoppen. Op pagina https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ staat meer informatie en op pagina https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ staat een voorbeeld met code.
Het broodkruimelpad op pagina’s https://lias-webpub-lias-showcase-test.azurewebsites.net/p4916/toegankelijkheidsverklaring is ook onterecht opgemaakt met menubar en menuitems. Gebruik daar bijvoorbeeld een ol-element met links en verwijder alle aria van het aria-label op het nav-element tot en met de role=”menuitem” op de links.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4307/01-burgerzaken-en-algemeen-bestuur staat een tablist die niet met de pijltoetsen te bedienen is. Het gebruik van role=”tablist” geeft de verplichting om het voor gebruikers van hulpsoftware mogelijk te maken om de juiste tab te selecteren met de pijltoetsen links en rechts. Op dit moment zorgt het indrukken van de pijltoetsen links en rechts ervoor dat er een andere pagina geladen wordt. De tablist en zijn onderdelen voldoet op dit moment ook niet aan de eisen van succescriterium 4.1.2. Dit komt ook voor op https://lias-webpub-lias-showcase-test.azurewebsites.net/p4381/06-sport-en-cultuur en andere pagina’s met een ARIA tablist.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4328/inleiding staan afkortingen die als de muis erop wordt geplaatst aangeven wat deze afkorting betekend. Het is op dit moment niet mogelijk om de betekenis van afkortingen zoals “AB”, “Wmo” en “OZB” in beeld te krijgen zonder de muis te gebruiken.

Advies: Op meerdere pagina’s zoals https://lias-webpub-lias-showcase-test.azurewebsites.net/p4916/toegankelijkheidsverklaring staat onderaan een tweetal links om naar de vorige en volgende pagina te gaan. Op dit moment is het mogelijk om deze links te activeren met de pijltoetsen links en rechts. Het is op dit moment zelfs mogelijk om de rechterlink te activeren terwijl de toetsenbordfocus nog op de linker link staat. Dit is mogelijk door op dat moment op de rechterpijltoets te drukken. Dat is niet de bedoeling, het advies is dan ook om de activering met pijltoetsen op deze links uit te schakelen. Dit komt ook voor op andere pagina’s zoals https://lias-webpub-lias-showcase-test.azurewebsites.net/p4880/sitemap en https://lias-webpub-lias-showcase-test.azurewebsites.net/p4367/geprognosticeerde-balans-2019-2022.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/ staat een knop met de naam “Open hier in een pop-up de video: 'Wat doet een wethouder?' op YouTube”. Deze knop opent net als de knop eronder een pop-up met daarin een YouTube video. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld k om de video te pauzeren. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. Voeg de volgende eigenschap aan de embedcode toe: 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium. Zie https://developers.google.com/youtube/player_parameters#disablekb voor meer informatie. Dit probleem komt ook voor op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4375/homepage-6-01.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4520/portefeuillehouders bestaat niet. De link naar deze pagina werkt niet, dat is een apart probleem dat opgelost moet worden. Het probleem onder dit succescriterium is dat de 404-pagina met “Home | Jaarverslag 2019” geen geldige paginatitel heeft. Het doel van deze pagina is om duidelijk te maken dat deze pagina niet (meer) bestaat en de paginatitel moet dat doel dan ook duidelijk maken. Het is een optie om de tekst ‘home’ in de huidige paginatitel te vervangen door ‘404 - Pagina niet gevonden’. Op die manier is het doel van deze pagina voldoende duidelijk.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4505/inleiding is de paginatitel “Inleiding | Jaarverslag 2019” gebruikt terwijl deze pagina niet gaat over een inleiding op het jaarverslag 2019. Deze pagina heeft betrekking op een inleiding van het beleidsdocument Risicomanagement uit 2018. Dat verschil in onderwerp blijkt nu niet uit de gebruikte paginatitel. Het unieke deel van de paginatitel is te kort om het onderwerp van deze pagina te beschrijven. Dit is ook afgekeurd omdat de pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4328/inleiding ook bestaat en die pagina bevat wel een inleiding op het jaarverslag 2019, indien twee verschillende pagina’s dezelfde paginatitel hebben is dat vaak een situatie die onder dit succescriterium moet worden afgekeurd.

Advies: een pagina als https://lias-webpub-lias-showcase-test.azurewebsites.net/p4375/homepage-6-01 heeft met “Homepage 6.01 | Jaarverslag 2019” een paginatitel die op een website met voorbeelden als deze niet is afgekeurd. De tekst op deze pagina maakt niet goed duidelijk dat dit een variant van een homepage is die gebruikt kan worden. Het advies is om dat ook in de paginatitel te vermelden. “Homepage variant 6.01 | Jaarverslag 2019” is een titel die beter het doel van de pagina in de context van deze website duidelijk maakt.

Uitkomst: Onvoldoende

Bevindingen: Het is de bedoeling dat met het navigeren alleen componenten van de gebruikersinterface zoals knoppen en links toetsenbordfocus krijgen. Het is niet toegestaan om onderdelen zoals op main-elementen of div-elementen bij tabellen toetsenbordfocus te geven door het toevoegen van het attribuut tabindex=”0”. Op het moment dat het plaatsen van de toetsenbordfocus noodzakelijk is om bediening (zoals de skiplink en horizontaal scrollen) mogelijk te maken is het ook noodzakelijk dat dat element een goede naam en rol krijgt (zie SC 4.1.2). In bepaalde gevallen is het noodzakelijk dat onderdelen toetsenbordfocus kunnen krijgen zoals het doel van de skiplink, in die gevallen is het de bedoeling om tabindex=”-1” te gebruiken. Dit probleem geld ook voor de onderdelen in diagrammen zoals die op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4375/homepage-6-01. Op pagina’s zoals https://lias-webpub-lias-showcase-test.azurewebsites.net/p4307/01-burgerzaken-en-algemeen-bestuur is niet al het gebruik van tabindex=”0” af te keuren, het gebruik van tabindex=”0” op elementen met role=”tabpanel” is toegestaan. Dat geld ook voor pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4381/06-sport-en-cultuur, het gebruik van tabindex=”0” op het main-element en het gebruik van tabindex=”0” in de svg is niet toegestaan.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4316/11-algemene-dekkingsmiddelen is na het in het volledig scherm zetten van de tabel mogelijk om de toetsenbordfocus op een element te zetten dat niet in beeld staat. Zorg ervoor dat bezoekers de tabel eerst weer afsluiten voor met het toetsenbord verder genavigeerd kan worden.

Uitkomst: Onvoldoende

Bevindingen: Op meerdere pagina’s zoals https://lias-webpub-lias-showcase-test.azurewebsites.net/p4880/sitemap komt bij het scrollen een link met de naam “Ga terug naar het begin van de pagina” in beeld. Het probleem is dat bij het activeren van deze link de viewport niet helemaal naar het begin van de pagina gaat. Het advies is om bij het activeren van deze link de toetsenbordfocus te verplaatsen naar het begin van de pagina of om de tekst aan te passen zodat duidelijk is dat deze link verwijst naar de unieke inhoud van deze pagina.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina’s zoals https://lias-webpub-lias-showcase-test.azurewebsites.net/p4880/sitemap komt bij het naar beneden scrollen een extra link in beeld. Het gaat om de grijze link met de pijl naar boven, die het voor gebruikers mogelijk maakt om eenvoudig naar boven te scrollen. De naam van de link is dan ook “Ga terug naar het begin van de pagina”. Het probleem is dat deze link op dit moment niet helemaal naar het begin van de pagina gaat. Na het activeren van deze link staat het hoofdmenu niet in beeld, de link maakt het mogelijk om terug te gaan naar het begin van de unieke content op deze pagina en dat is niet hetzelfde als het begin van de pagina. Dit probleem komt ook op andere pagina’s voor zoals https://lias-webpub-lias-showcase-test.azurewebsites.net/p4328/inleiding en https://lias-webpub-lias-showcase-test.azurewebsites.net/p4367/geprognosticeerde-balans-2019-2022.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4315/programma-overzicht is het mogelijk om de tegels met informatie op deze pagina te filteren. Dat invoerveld heeft met de placeholdertekst “Vul hier uw zoekterm in...” geen goed label. Het doel van dit invoerveld is om te filteren in de resultaten die al in beeld staan. De visueel verborgen legend “Zoeken binnen deze pagina” geeft wel goed het doel van dit onderdeel aan, maar die informatie is nu niet voor alle gebruikers beschikbaar. Het advies is om dit invoerveld een duidelijk label te geven dat altijd zichtbaar is. Het is dan ook niet meer noodzakelijk om een placeholdertekst te gebruiken.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s heeft het main-element het attribuut tabindex=”0”. De toetsenbordfocus hoort niet op dat element te landen én de focus is niet zichtbaar als die op dat element staat. Het gebruik van tabindex=”-1” is hiervoor mogelijk een oplossing. Zie https://html.spec.whatwg.org/#the-tabindex-attribute voor meer informatie.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4381/06-sport-en-cultuur staat een cirkeldiagram. In de code staat aan het einde van het figure-element een path-element met tabindex=”0”. Als de toetsenbordfocus op dat onderdeel staat is deze onzichtbaar. Laat tabindex op dit onderdeel weg.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4505/inleiding is de toetsenbordfocus in Firefox niet zichtbaar op de daar gebruikte “Lees meer” knop. In Chrome is de focus op deze knop wel zichtbaar. Beide browsers gaan niet op helemaal dezelfde manier om met het zichtbaar maken van de toetsenbordfocus op knoppen. Zorg ervoor dat de zichtbaarheid niet afhankelijk is van de gebruikte browser.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4315/programma-overzicht staat een invoerveld met de naam “Zoeken” en de placeholdertekst “Vul hier uw zoekterm in...”. Doordat de zichtbare placeholdertekst niet terugkomt in de naam van dit invoerveld wordt er niet aan de eisen van dit succescriterium voldaan. Dit probleem geld ook voor het zoekveld dat op iedere pagina voorkomt.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Bevindingen: Advies: De Latijnse tekst “lorem ipsum” op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4916/toegankelijkheidsverklaring is bedoeld als model tekst en om die reden niet afgekeurd. In principe zou er voor deze tekst een lang=”la” gebruikt moeten worden om te voldoen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Bevindingen: Advies: Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4315/programma-overzicht is het mogelijk om de tegels met informatie op deze pagina te filteren. Het invoeren van een tekst als ‘q’ in het daarvoor bestemde invoerveld heeft op dit moment geen resultaat. Het advies is om er voor te zorgen dat er in dat geval een foutmelding in beeld komt die duidelijk maakt dat er geen resultaat gevonden is. Let er bij het toevoegen van deze foutmelding ook op dat die aan de eisen van succescriterium 4.1.3 gaat voldoen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4315/programma-overzicht is het mogelijk om de tegels met informatie op deze pagina te filteren. Dit invoerveld heeft geen label dat tijdens en na het filteren zichtbaar is. Het moet voor gebruikers mogelijk zijn om altijd (visueel) te controleren of zij wel of niet het juiste invoerveld op de goede manier aan het invullen zijn.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://lias-webpub-lias-showcase-test.azurewebsites.net/ bestaat het hoofdmenu uit een ARIA menubar met menuitems. Het is niet toegestaan om een knop te nesten in een element met role=”menuitem”. Het advies is om voor navigatie geen menubar te gebruiken, maar om een nav-element gevuld met uitklapbare knoppen te gebruiken die ieder dan weer gevuld zijn met links. Zie https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ voor meer informatie over het toepassen van een dergelijke oplossing. Dit geldt ook voor de menuitems in het broodkruimelpad. In het broodkruimelpad op pagina’s zoals https://lias-webpub-lias-showcase-test.azurewebsites.net/p4916/toegankelijkheidsverklaring zijn er geen knoppen maar links genest in menuitems. Het is ook niet toegestaan om links te nesten in een element met role=”menuitem”.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/ staat een knop met de naam “Toelichting” en de title "Open popup met toelichting.". Die knop heeft nu het attribuut aria-haspopup=”true”, dat is niet de juiste waarde voor deze toepassing. Bij het activeren van deze component komt er geen ARIA menu maar een ARIA dialoogvenster in beeld. De juiste waarde voor dit attribuut is daarom dan ook “dialog”. Het geven van onjuiste informatie met ARIA wordt onder dit succescriterium afgekeurd. Het gebruik van aria-haspop op deze knop is door het gebruik van een goede toelichting niet vereist, het verwijderen van dat attribuut is om die reden ook een optie.

Op pagina’s https://lias-webpub-lias-showcase-test.azurewebsites.net/p4307/01-burgerzaken-en-algemeen-bestuur en https://lias-webpub-lias-showcase-test.azurewebsites.net/p4381/06-sport-en-cultuur staat aan de rechterkant een ARIA tablist. In die tablist hebben enkele elementen role=”tab” gekregen. Het is niet toegestaan om knoppen te nesten binnen een element met role=”tab”. De tab is de component die het tabblad bediend. Het advies is dan ook om de role op de li-elementen aan te passen naar “none” én om het id te verplaatsen van de li naar de geneste knop én om op die knoppen een role=”tab” toe te voegen. Zie https://www.w3.org/TR/wai-aria-1.2/#tab voor meer informatie over het juist gebruik van role=”tab”. Op dit moment is het voor gebruikers van hulpsoftware ook niet mogelijk om te bepalen welke van de drie tabs actief is. Het is de bedoeling om hiervoor aria-selected=”true” te gebruiken. Op pagina https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ staat meer informatie over hoe een tablist het beste toegepast kan worden. Deze voorwaarden en voorbeelden gaan verder dan de minimumeisen in de specificatie van ARIA op https://www.w3.org/TR/wai-aria-1.2/, het advies is om het ‘Tabs Pattern’ helemaal te volgen.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4363/verloop-reserves-en-voorzieningen-2019-2022 staat een knop met de naam “Toon onderstaande tabel in volledig scherm”. Die knop blijft toetsenbordfocus houden na het activeren. Het nogmaals activeren van deze knop sluit het weergeven van de tabel in volledig scherm. Het advies is om de knop “Toon onderstaande tabel in volledig scherm” niet alleen visueel te transformeren in een knop om de tabel te sluiten. Door in dat geval ook de naam of toestand van deze knop aan te passen wordt duidelijk is dat de functie het tegenovergestelde is van de huidige naam van deze knop. Dit kan op verschillende manieren gedaan worden. Een daarvan is om de naam aan te passen naar bijvoorbeeld “Toon tabel niet langer in volledig scherm”. Het is ook mogelijk om dit op te lossen met het toevoegen van een toestand (state) zoals aria-pressed.

Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4357/financien-overzichten staat de optie om de resultaten anders te sorteren. Bij deze knop staat de tekst “Sorteren op” die de naam van deze component had moeten zijn. De tekst “Naam - oplopend” is niet de naam van de knop, maar de actieve optie. Na het openklappen komen er twee opties in beeld die niet beschikbaar zijn voor hulpsoftware de input-elementen zijn verborgen voor hulpsoftware met display:none. Het toepassen van tabindex=”0” op de labels van deze componenten is niet voldoende om deze onderdelen een goede rol te geven. Het is ook zo dat op de pop-up die in beeld komt het attribuut aria-hidden=”true” staat waardoor deze content nu verborgen is voor hulpsoftware. Het advies is om in plaats van deze code een label-element gekoppeld aan een select-element met twee opties te gebruiken. Dit komt ook voor op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4315/programma-overzicht.

Advies: Op pagina https://lias-webpub-lias-showcase-test.azurewebsites.net/p4315/programma-overzicht staat een element met role=”toolbar”. Het advies is om deze rol te verwijderen, het is nu niet mogelijk om met de pijltoetsen te navigeren terwijl deze rol wel aangeeft dat dat mogelijk zou moeten zijn.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van https://lias-webpub-lias-showcase-test.azurewebsites.net/ is het mogelijk om met behulp van de loep (een knop met de naam “Open zoekvenster”) een zoekvenster te openen dat het mogelijk maakt om te zoeken binnen de website. Op het moment dat een gebruiker zoekt en er worden geen resultaten gevonden komt de foutmelding “Er zijn geen resultaten gevonden” in beeld. Die tekst geldt op dat moment als een statusbericht dat niet aan de eisen van dit succescriterium voldoet. De screenreader geeft nu niets aan, ondanks het feit dat er wel een element met role=”status” is gebruikt. Het probleem is dat het element met die role achteraf in de DOM geplaatst wordt. Het plaatsen van tekst in dat element zorgt ervoor dat die tekst gepresenteerd wordt, het plaatsen van dat element met tekst en al doet dat niet. Het is ook mogelijk om dit op te lossen zonder het gebruik van ARIA. In dat geval is het advies om het p-element met class=”no-result” een tabindex=”-1” te geven zodat de toetsenbordfocus na het zoeken eenmalig op die tekst gezet kan worden. Doordat tekst die toetsenbordfocus krijgt automatisch gepresenteerd wordt is dat een geldig alternatief voor het genereren van een statusbericht.