Rapport:
Systeemaudit digitale toegankelijkheid van Iris Intranet

Uitkomst: Onvoldoende

Bevindingen: Op de loginpagina staat een logo met zichtbare tekst “Iris intranet”. De alternatieve tekst is “Logo Iris”. Dit is onvoldoende, alle tekst in een logo moet in de alt tekst. Voeg het woordje “Intranet” toe. Zie https://wcag-demo.irisintranet.com/ en https://wcag-demo.irisintranet.com/startpagina.

Op de pagina https://wcag-demo.irisintranet.com/startpagina staat een tekstvak met de tekst: "Vertel hier wat je bezighoudt." Wanneer een bezoeker op dit veld klikt, verschijnt een teksteditor. De knop met het paperclippictogram opent een dialoogvenster met verschillende opties voor het uploaden van bestanden. Als in het zijpaneel de optie "URL" is geselecteerd en een link is toegevoegd, verschijnt deze link onder het tekstvak. Naast de link staat een pictogram om de link in een nieuw browsertabblad te openen. Dit pictogram heeft geen tekstalternatief. Tegenover deze links staan knoppen met kruisjes. Deze afbeeldingen hebben geen tekstalterantief.
Omdat er geen tekstalternatief is, weet een blinde bezoeker niet dat deze link een nieuwe browsertab opent of dat de link verwijderd wordt. Dit is belangrijke informatie die als tekst aanwezig moet zijn, zodat een schermlezer het kan voorlezen. Voeg de informatie als verborgen tekst toe.

Op pagina https://wcag-demo.irisintranet.com/actueel/fotoboek staat een fotoalbum. Wanneer een bezoeker op een afbeelding klikt, wordt een slider geopend. In deze slider hebben afbeeldingen geen alt-attribuut. Een img-element moet altijd een alt-attribuut hebben. Gaat het om een decoratieve afbeelding, die geen betekenis overdraagt? Laat dit attribuut dan leeg. Dan staat er alt="". Is het een informatieve afbeelding? Voeg dan een duidelijke beschrijving van de afbeelding toe.

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 alle pagina's staat een zijkolom met een menu. Als een bezoeker de knop "Vandaag" activeert, wordt het zijpaneel geopend. In dit paneel staat een rubriek "Binnenkort". Deze koptekst is echter opgenomen als het eerste item in een lijst, gevolgd door de lijst met gebeurtenissen. De koptekst mag geen deel uitmaken van de lijst. Koppen moeten worden gebruikt om de inhoud te structureren en mogen niet in lijstitems worden geplaatst, omdat dit verwarring kan veroorzaken voor gebruikers van schermlezers en de logische stroom van informatie kan verstoren. De koptekst moet buiten de lijst worden geplaatst om de juiste structuur en toegankelijkheid te behouden. Zie https://wcag-demo.irisintranet.com/startpagina en https://wcag-demo.irisintranet.com/wie-is-wie in de alfabetletters die als kopjes dienen.

Op alle pagina's staat een zijkolom met een menu. Als een bezoeker de knop "Vandaag" activeert, wordt het zijpaneel geopend. In dit paneel staat de tekst "De open dag was een succes," die fungeert als een kop, maar niet is gemarkeerd als een kop-element. Zie ook andere teksten in deze zijkolom die als koppen moeten worden opgemaakt. Bijvoorbeeld onder “Applicaties” de teksten “Office”, “Personeelszaken” en meer. Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Zijn koppen alleen visueel als kop vormgegeven (bijvoorbeeld vetgedrukt), maar niet in de code gemarkeerd? Dan ontstaat nog een ander probleem. De structuur van de informatie in de code wijkt dan namelijk af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast. Hetzelfde probleem is aangetroffen op de volgende pagina's. Op pagina https://wcag-demo.irisintranet.com/startpagina staat de kop "Nieuw: bedrijfsfitness!". Zie ook de kop "Binnenkort" in de widget "Organisatie-agenda".
Meer voorbeelden zijn de kopjes "Begeleider wonen" en "Communicatieadviseur" in de widget "Vacatures". Zie ook de kop "Wat vind je van het nieuwe intranet?" die verschijnt na het stemmen in de widget "Poll". Zie ook de kopjes "De open dag was een succes" en "We krijgen een nieuw intranet!" in de widgets "Iris Medewerkers".

Wanneer op de pagina https://wcag-demo.irisintranet.com/wie-is-wie op de knop "Filteren" wordt gedrukt, verschijnen de filteropties. Als het filter "Personen die ik volg" is geselecteerd en vervolgens op de knop "Filter toepassen" wordt geklikt, verschijnt de tekst "Actieve filters:". Deze tekst lijkt op een kop, maar is niet als kop gemarkeerd.

Op alle pagina's bevindt zich een zijkolom met een menu. Wanneer een bezoeker de knop "Vandaag" activeert, wordt het zijpaneel geopend. In dit paneel bevindt zich de widget "Poll". Als een bezoeker op de link "Wat vind je van het nieuwe intranet?" klikt, verschijnt een dialoogvenster met een poll. Deze poll bevat verschillende antwoordopties. Hoewel deze elementen visueel tot één groep behoren, wordt deze relatie niet weergegeven in de HTML.
Als het voor een ziende bezoeker duidelijk is dat een groep elementen bij elkaar hoort, moet deze structuur ook in de HTML-code aanwezig zijn. Plaats de elementen bijvoorbeeld in een <ul>- of <ol>-element. Zie: https://wcag-demo.irisintranet.com/startpagina.

Een soortgelijk probleem is aangetroffen bij de volgende elementen. Op de pagina https://wcag-demo.irisintranet.com/startpagina staat het veld "Vertel hier wat je bezighoudt.". Wanneer een bezoeker op dit veld klikt, verschijnt een teksteditor met verschillende functies. Als de knop met het paperclippictogram wordt geactiveerd, verschijnt een dialoogvenster met verschillende opties voor het uploaden van bestanden. Wanneer meerdere bestanden worden geüpload, verschijnen deze onder het tekstgebied. Hoewel deze elementen visueel tot één groep behoren, wordt deze relatie niet weergegeven in de HTML. Hetzelfde probleem is aangetroffen op de pagina: https://wcag-demo.irisintranet.com/tijdlijn.

Op pagina https://wcag-demo.irisintranet.com/startpagina staat een tekstveld "Vertel hier wat je bezighoudt”. Het label-element met "Vertel hier wat je bezighoudt" is niet expliciet gekoppeld aan het bijbehorende invoerveld.
label-elementen moeten gekoppeld worden aan hun bijbehorende invoervelden door het for-attribuut op het label-element te gebruiken. In dit attribuut komt het id van het invoerveld waar het label bij hoort. Hierdoor krijgt het invoerveld een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker. Omdat het invoerveld op dit moment geen toegankelijke naam heeft, wordt deze bevinding ook bij succescriterium 4.1.2 vermeld. Een soortgelijk probleem is gevonden bij het volgende element. Op pagina https://wcag-demo.irisintranet.com/startpagina verschijnt na het klikken op het veld "Vertel hier wat je bezighoudt" een select-element "Deel met", waar het label niet expliciet is gekoppeld aan dit element. (Dat komt omdat het select element verborgen is voor hulpsoftware door aria-hidden.)

Wanneer op de pagina https://wcag-demo.irisintranet.com/wie-is-wie op de knop "Filteren" wordt gedrukt, worden de filteropties weergegeven. Als het filter "Personen die ik volg" is geselecteerd en vervolgens op de knop "Filter toepassen" wordt geklikt, verschijnt de tekst "Hmm, niets gevonden met deze filters". In deze tekst is het <strong>-element gebruikt voor opmaak. In de zoekresultaten op de pagina https://wcag-demo.irisintranet.com/zoeken?facets=%5B%5D&q=wat&action=Search&searchengine=Iris%5CIris%5CSearch%5CEngine%5CNative%5CNativeSearch is een deel van de tekst geel gemarkeerd. Deze tekst is opgemaakt met een <em>-element. Deze elementen mogen niet worden gebruikt voor puur visuele opmaak. In plaats daarvan moet CSS worden gebruikt om de gewenste stijl toe te passen.

Op pagina https://wcag-demo.irisintranet.com/wachtwoord-vergeten zijn de volgende koppen gemarkeerd met een strong element: "Gebruikersnaam of e-mailadres vergeten?" en "Wachtwoord vergeten?". Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel.
Dit komt vaker voor. Op pagina https://wcag-demo.irisintranet.com/startpagina zie onder het kopje "Fotoboek" in de widget "Fotoboek". Op pagina https://wcag-demo.irisintranet.com/groep/voorbeeldgroep/1 staat onder het kopje "Over deze groep" een knop om meldingen "Gedempt / Dempen" in en uit te schakelen. Bij interactie met het dialoogvenster dat via deze knop wordt geopend, verschijnen er verschillende koppen in het dialoogvenster, zoals "Voorbeeldgroep wordt niet meer gedempt". Deze koppen zijn gemarkeerd met het strong-element.

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: Onvoldoende

Bevindingen: Op pagina https://wcag-demo.irisintranet.com/ staat een formulier met invoervelden waarmee persoonlijke gegevens worden verzameld. Het kenmerk autocomplete ontbreekt voor het veld "Gebruikersnaam of e-mailadres".
Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes
Voor het veld dat "gebruikersnaam of e-mailadres" accepteert, moet de autocomplete waarde worden ingesteld op "gebruikersnaam".
Hetzelfde probleem is gevonden op de volgende pagina:
https://wcag-demo.irisintranet.com/wachtwoord-vergeten en op https://wcag-demo.irisintranet.com. Zie ook pagina:
https://wcag-demo.irisintranet.com/serviceplein/voorbeeldformulier waar geen autocomplete aanwezig is in de velden "Voornaam", "Achternaam", "E-mailadres".

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wcag-demo.irisintranet.com/wie-is-wie worden de filteropties weergegeven wanneer een bezoeker op de knop "Filteren" drukt. Als de filter "Personen die ik volg" is geselecteerd en de knop "Filter toepassen" wordt ingedrukt, verschijnen er knoppen. Als een bezoeker met de muis over de knop "Personen die ik volg" beweegt, wordt de tekst doorgestreept en wordt deze rood. De rode tekstkleur (HEX#D20000) op de grijze achtergrond (HEX#E2E2E4) heeft een contrastverhouding van 3,7:1, wat te laag is.
Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina met de zoekresultaten staan filters. De categorieën waar geen resultaten zijn, hebben lichtgrijze tekst (HEX ##878787). Op een witte achtergrond van de zijkolom is de contrastverhouding 3,6:1. Het ontbreken van resultaten in deze categorie is ook informatie die bezoekers met visuele beperkingen nodig hebben. Zie https://wcag-demo.irisintranet.com/zoeken?facets=%5B%5D&q=wat&action=Search&searchengine=Iris%5CIris%5CSearch%5CEngine%5CNative%5CNativeSearch.

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: Onvoldoende

Bevindingen: Op alle pagina's staat een zijkolom met een menu. Als een bezoeker de knop "Vandaag" activeert, wordt het zijpaneel geopend. In dit paneel bevindt zich een widget "Poll" en een knop met drie stippen die de toegankelijke naam "Meer" heeft. Als op deze knop wordt geklikt, verschijnt er een dialoogvenster met knoppen. De focus op de knoppen "Dit is niet oké" en "Link kopiëren" is te zien als de achtergrondkleur van de knop te veranderen van wit (HEX#FFFFFF) naar lichtgrijs (HEX#E9E9EA), wat resulteert in een contrastverhouding van 1,2:1. Dit moet minstens 3,0:1 zijn. De standaard toetsenbordfocus-indicator is vervangen door een aangepaste indicator met een lichtgrijze achtergrond. De standaard toetsenbordfocus-indicator voldoet automatisch aan dit succescriterium, omdat deze geen contrastvereisten heeft. Bezoekers kunnen deze indien nodig aanpassen. Aangepaste toetsenbordfocus-indicatoren kunnen echter niet worden aangepast door bezoekers, dus zijn de contrastvereisten van toepassing.
Hetzelfde probleem doet zich voor in andere elementen, zoals:
suggesties voor resultaten in het zoekveld in de header.

Op pagina https://wcag-demo.irisintranet.com/startpagina wordt na het klikken op "Vertel hier wat je bezighoudt" een select-element "Deel met" weergegeven waarin de items "Volgers", "Groep(en)" en "Iedereen" focus krijgen die te zien is als de verandering van de achtergrondkleur.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina met behulp van de tabtoets doorlopen wordt en de muis zich bovenaan de pagina bevindt, dan blijft de transparante balk waarin de skiplinks getoond worden in beeld, ook als de focus op de onderliggende pagina ligt. De balk is niet met behulp van het toetsenbord, bijvoorbeeld met de escapetoets, te sluiten. Het onderliggende menu is daardoor niet (of nauwelijks) zichtbaar. Zorg ervoor dat deze aanvullende content met behulp van het toetsenbord gesloten kan worden, bijvoorbeeld door de balk te sluiten als deze geen focus meer heeft.

Uitkomst: Onvoldoende

Bevindingen: Wanneer alle pagina's op een klein scherm worden bekeken, verschijnt er een menuknop. Wanneer het menu wordt geopend, verandert deze knop in de knop "Sluiten". Deze knop is niet toegankelijk via een toetsenbord.
https://wcag-demo.irisintranet.com/startpagina

Op pagina https://wcag-demo.irisintranet.com/startpagina is het mogelijk om een "Takenlijst" toe te voegen met de knop "Widget toevoegen". Wanneer taken worden toegevoegd, verschijnen velden met knoppen met een prullenbakpictogram. Deze knoppen zijn niet toegankelijk via het toetsenbord.

Op pagina https://wcag-demo.irisintranet.com/startpagina staat het invoerveld "Vertel hier wat je bezighoudt.". Wanneer een bezoeker op dit veld klikt, verschijnt een teksteditor met verschillende functies. Boven het invoerveld bevinden zich knoppen, zoals knoppen met pijlpictogrammen, vetgedrukt (B), cursief (I), en pictogrammen voor links en lijsten. Al deze knoppen zijn echter niet toegankelijk via het toetsenbord. Hoewel er sneltoetsen beschikbaar zijn, is deze informatie niet zichtbaar voor ziende bezoekers. Dit aspect wordt ook genoemd onder succescriterium 3.3.2. Maak de knoppen boven het invoerveld toegankelijk voor het toetsenbord of voeg een instructie toe waarin wordt uitgelegd hoe deze acties kunnen worden uitgevoerd met sneltoetsen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina opent de "?" toets een modal met Sneltoetsen. Dit kan en negatieve invloed hebben op sommige hulp software. Vervang de sneltoets "?" door een combinatie van toetsen (waarbij de shift toets niet één van de toetsen mag zijn).

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van https://wcag-demo.irisintranet.com/startpagina opent een submenu wanneer een bezoeker met het toetsenbord navigeert en de knop "Wie-is-wie" in het navigatiemenu in de header activeert. In dit submenu bevindt zich een sluitknop "X". Wanneer deze knop wordt geactiveerd om het submenu te sluiten, verplaatst de focus zich naar de adresbalk van de browser. Dit gedrag is onjuist, omdat de focus na het sluiten van het submenu moet terugkeren naar het element dat het submenu opende of naar het volgende logische element. Dit probleem treedt op bij alle navigatiemenuknoppen in de header die submenu's openen, zoals "Groepen", "Organisatie", "Actueel" en "Serviceplein". Om de toegankelijkheid te verbeteren, moet de focus na het sluiten van een submenu op een logische positie worden geplaatst. Dit kan door de focus terug te brengen naar de knop die het submenu opende of naar het eerstvolgende interactieve element in de interface.

Op alle pagina's opent een submenu wanneer een bezoeker met het toetsenbord navigeert en de knop "Organisatie" in het navigatiemenu in de header activeert. Op dit moment kunnen bezoekers het submenu verlaten met het toetsenbord, waardoor de focus verschuift naar de onderliggende pagina, terwijl het submenu geopend blijft. Dit gedrag is problematisch, omdat het submenu open blijft staan zonder dat het nog actief wordt gebruikt. Dit kan verwarrend zijn voor toetsenbordgebruikers en schermlezers, omdat de zichtbare interface niet overeenkomt met de daadwerkelijke focus. Dit probleem doet zich ook voor bij andere submenu’s die worden geopend via de knoppen "Actueel" en "Serviceplein". Om dit probleem op te lossen, moet het toetsenbordgedrag worden aangepast zodat de focus binnen het submenu blijft zolang het geopend is. Dit kan worden bereikt door focus-trapping toe te passen, waarbij de focus binnen het submenu wordt vastgehouden totdat de gebruiker expliciet het submenu sluit, bijvoorbeeld door op Esc te drukken of de sluitknop te activeren. Dit voorkomt dat bezoekers onbedoeld de onderliggende pagina navigeren terwijl het submenu zichtbaar blijft. Zie https://wcag-demo.irisintranet.com/startpagina.

Op pagina https://wcag-demo.irisintranet.com/startpagina bevindt zich het invoerveld "Vertel hier wat je bezighoudt.". Wanneer een bezoeker op dit veld klikt, verschijnt een teksteditor. De knop met het paperclippictogram opent een dialoogvenster met verschillende functies voor het uploaden van bestanden. In dit venster is de focusvolgorde niet logisch. Wanneer een bezoeker naar een item in de zijbalk navigeert, zoals "Iris", en op Enter drukt, springt de focus eerst naar de knop "Sluiten" en vervolgens terug naar de tabbladen in de zijbalk. Het verwachte gedrag zou echter zijn dat de focus direct naar de inhoud van het geselecteerde tabblad gaat, zodat de gebruiker meteen kan interageren met de nieuwe inhoud. Dit probleem zorgt ervoor dat toetsenbordgebruikers extra navigatiestappen moeten doorlopen, wat de toegankelijkheid vermindert en de gebruikerservaring verslechtert. Om dit op te lossen, moet de focuslogica worden aangepast zodat na het activeren van een tabblad de focus direct naar de bijbehorende inhoud springt, in plaats van naar de sluitknop of terug naar de zijbalk. Hetzelfde probleem is aangetroffen op de pagina https://wcag-demo.irisintranet.com/tijdlijn.

Advies. Daarnaast is er nog een issue met de sluitknop "X". Deze knop krijgt pas focus nadat de gebruiker alle elementen binnen het submenu heeft doorlopen of wanneer er achteruit wordt genavigeerd met Tab + Shift. Dit is niet intuïtief, omdat de sluitknop bovenaan het submenu zichtbaar is bij het openen. Bezoekers die het submenu direct willen sluiten, moeten echter eerst door alle submenu-items navigeren of omgekeerde navigatie gebruiken. Het is aan te raden de sluitknop direct na het openen van het submenu toegankelijk te maken, zodat gebruikers deze direct kunnen bereiken zonder onnodige navigatie. Dit verbetert de gebruiksvriendelijkheid en voldoet beter aan de toegankelijkheidsrichtlijnen.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wcag-demo.irisintranet.com/startpagina is het mogelijk om een "Artikel widget" toe te voegen via de knop "Widget toevoegen". In deze Artikel widget staan de links "pagina", "groep", en "formulier", die leiden naar voorbeeldpagina's. De link "groep" heeft de toegankelijke naam "groep", maar leidt naar de profielpagina van de gebruiker Micheal Xu. Dit is verwarrend voor mensen die schermlezers gebruiken, omdat de toegankelijke naam niet overeenkomt met de daadwerkelijke bestemming van de link. Een blinde bezoeker weet daardoor niet waar de link naartoe zal leiden. Om dit op te lossen moet de link content krijgen. Dit kan bijvoorbeeld door een tekst toe te voegen in het a-element of door een aria-label toe te voegen. Zorg dat alle links een duidelijk linkdoel hebben.

Op pagina https://wcag-demo.irisintranet.com/zoeken?facets=%5B%5D&q=wat&action=Search&searchengine=Iris%5CIris%5CSearch%5CEngine%5CNative%5CNativeSearch, in de paginering onderaan de pagina, staat een link "volgende". De toegankelijke naam voor deze link is momenteel "Volgende pagina 2". De tekst "2" moet worden verwijderd.
Hetzelfde probleem is gevonden op de volgende pagina:
https://wcag-demo.irisintranet.com/serviceplein/digiboekje/laatst-gewijzigd

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wcag-demo.irisintranet.com bevindt zich een formulier met een invoerveld "Wachtwoord". In dit veld staat een knop met een oogpictogram, waarvan de toegankelijke naam "Toon wachtwoord .." is. Als een bezoeker op deze knop drukt, verandert zowel de afbeelding op de knop als de functie. De knop verbergt nu het wachtwoord in plaats van het te tonen. Deze wijziging wordt niet doorgevoerd in de toegankelijke naam van de knop. Dit betekent dat gebruikers van schermlezers niet te horen krijgen dat de knop nu een andere functie heeft, wat verwarring kan veroorzaken. Om dit probleem op te lossen, moet de toegankelijke naam van de knop dynamisch worden aangepast op basis van de functie.

Op alle pagina’s bevindt zich een zijkolom met een menu. Wanneer een bezoeker de knop "Vandaag" activeert, wordt het zijpaneel geopend. In dit paneel staat de widget "Poll", samen met een knop met drie stippen die de toegankelijke naam "Meer" heeft. De huidige toegankelijke naam "Meer" beschrijft echter niet duidelijk de functie van de knop. Hierdoor weten blinde bezoekers of gebruikers van schermlezers niet precies wat deze knop doet of welke acties ermee kunnen worden uitgevoerd. Dit kan verwarring veroorzaken en belemmert de toegankelijkheid.

Wanneer op alle pagina's de knop "Wie-is-wie" in het navigatiemenu wordt geactiveerd en het bijbehorende submenu wordt geopend, wordt de toegankelijke naam van de knop een combinatie van de namen van alle submenu-items:
"Wie-is-wie Wie-is-wie sluiten Wie-is-wie zoeken Wie-is-wie zoeken Personen A Alex Batho Supply Chain Planner Alex Batho volgen Bellen Andrew McVittens Purchaser Andrew McVittens volgen Bellen C Caroline Mittens HR Manager Caroline McVittens volgen Bellen Cindy West."
Het probleem ontstaat door het verkeerd gebruik van een ARIA-attribuut.
Dit probleem is te zien bij alle knoppen met submenu's in het navigatiemenu, waaronder "Groepen", "Organisatie", "Actueel" en "Serviceplein", evenals knoppen in het zijbalkpaneel, zoals "Vandaag", "Kennisgevingen", "Applicaties" en "Mijn account".
Zie https://wcag-demo.irisintranet.com/startpagina.

Op alle pagina’s bevindt zich een zijkolom met een menu. Wanneer een bezoeker de knop "Vandaag" activeert, wordt het zijpaneel geopend. In dit paneel staat de widget "Poll", samen met een knop met drie stippen die de toegankelijke naam "Meer" heeft. Wanneer op deze knop wordt geklikt, verschijnt een dialoogvenster met knoppen. De huidige toegankelijke naam van dit dialoogvenster omvat echter de volledige inhoud: "Dit is niet oké Link kopiëren." Dit is onjuist, omdat een toegankelijke naam kort en beschrijvend moet zijn en het doel van het dialoogvenster moet aangeven.
Hetzelfde probleem doet zich voor bij andere dialoogvensters op de website. Wanneer bijvoorbeeld in het eerder genoemde dialoogvenster op de knop "Link kopiëren" wordt geklikt, opent een nieuw dialoogvenster met de toegankelijke naam "https://wcag-demo.irisintranet.com/tijdlijn/clark-kent/41?postId=12 Kopieer link." Deze naam bevat onnodige informatie. Een betere toegankelijke naam zou bijvoorbeeld "Kopieer link" zijn, zodat gebruikers direct begrijpen wat de functie van het dialoogvenster is.
Daarnaast is er een soortgelijk probleem in de Poll widget. Wanneer een bezoeker klikt op de link "Wat vind je van het nieuwe intranet?", opent een dialoogvenster met een peiling. De toegankelijke naam van dit dialoogvenster is momenteel "Bericht", wat niet beschrijvend genoeg is. Dialoogvensters moeten een duidelijke naam hebben die het doel ervan overbrengt. In dit geval zou een naam als "Stemmen" of "Nu stemmen" beter passen, zodat gebruikers direct begrijpen dat ze een stem kunnen uitbrengen. Dit probleem komt ook voor bij andere dialoogvensters op de site, waarvan er veel de toegankelijke naam "Bericht" hebben. Bijvoorbeeld het dialoogvenster dat wordt geopend via de knop "Bekijk" onder de kop "De open dag was een succes" in hetzelfde "Vandaag"-paneel. Zie https://wcag-demo.irisintranet.com/startpagina.

Op pagina https://wcag-demo.irisintranet.com/startpagina is het mogelijk om een widget "Memo" toe te voegen met de knop "Widget toevoegen". De widget bevat een textarea-element met de toegankelijke naam "Omschrijving". Deze naam is niet duidelijk genoeg. Voor meer duidelijkheid moet de toegankelijke naam het doel van het veld explicieter beschrijven.

Op pagina https://wcag-demo.irisintranet.com/startpagina is het mogelijk om een "Takenlijst" toe te voegen met de knop "Widget toevoegen". Wanneer taken worden toegevoegd, verschijnen er velden met daarnaast knoppen met een prullenbakpictogram. Deze knoppen hebben dezelfde toegankelijke naam, "Taak verwijderen". Om de toegankelijkheid te verbeteren, zou elke knop een unieke, beschrijvende toegankelijke naam moeten hebben, zoals "Verwijder taak 1" of "Verwijder taak 2", afhankelijk van de context. Hetzelfde probleem is gevonden in de widget "Links".

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wcag-demo.irisintranet.com/startpagina bevindt zich het invoerveld "Vertel hier wat je bezighoudt.". Wanneer een bezoeker op dit veld klikt, verschijnt een teksteditor met een invoerveld. Het label boven het invoerveld is "Vertel hier wat je bezighoudt.", maar de toegankelijke naam van dit veld is "Rich Text Editor. Bewerkingsgebied: main. Druk op ⌥0 voor hulp.". De zichtbare tekst van een interactief element mag niet te veel afwijken van de toegankelijke naam van het element. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kunnen bezoekers die spraakbediening gebruiken het element niet activeren. Wanneer een gebruiker een commando uitspreekt op basis van de zichtbare tekst, werkt dit niet als die tekst niet in de toegankelijke naam staat. Om dit probleem op te lossen, moet de zichtbare tekst deel uitmaken van de toegankelijke naam, bij voorkeur aan het begin.

Een soortgelijk probleem is aangetroffen bij andere elementen op de website. Op de startpagina verschijnt bij het klikken op het veld "Vertel hier wat je bezighoudt." een select-element met de zichtbare tekst "Deel met", terwijl de toegankelijke naam "Volgers" is. In de widget "Wisselkoers" heeft het veld "Aantal" een toegankelijke naam van "1.000", wat niet overeenkomt met de zichtbare tekst. Op de pagina's https://wcag-demo.irisintranet.com/organisatie/over-ons en https://wcag-demo.irisintranet.com/serviceplein/digiboekje/defecte-lamp heeft het invoerveld met het zichtbare label "Waarom deel je deze link?" de toegankelijke naam "Rich Text Editor. Bewerkingsgebied: main. Druk op ⌥0 voor hulp.".

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wcag-demo.irisintranet.com/startpagina bevindt zich het invoerveld "Vertel hier wat je bezighoudt.". Wanneer een bezoeker op dit veld klikt, verschijnt een teksteditor met verschillende functies.
Wanneer de knop met het paperclippictogram wordt geactiveerd, opent een dialoogvenster met verschillende opties voor het uploaden van bestanden. Als de optie "Uploaden" wordt geselecteerd en een SVG-bestand wordt geüpload, wordt het bestand geaccepteerd, maar verschijnt er onder het tekstgebied een foutmelding: "Onbekend bestand." Deze foutmelding is niet duidelijk genoeg. Een goede foutmelding moet aangeven waar de fout is opgetreden en een begrijpelijke uitleg geven over wat er mis is. Een betere foutmelding zou bijvoorbeeld kunnen zijn:
"Het bestandsformaat wordt niet ondersteund. Upload een geldig bestandsformaat zoals JPG, PNG of PDF." Door een duidelijke en informatieve foutmelding te geven, weten gebruikers direct wat het probleem is en hoe ze het kunnen oplossen. Hetzelfde probleem is aangetroffen op de pagina https://wcag-demo.irisintranet.com/tijdlijn.

Uitkomst: Onvoldoende

Bevindingen: Op deze website zijn verschillende zoekvelden aanwezig die binnen een specifiek gedeelte van de website zoeken. Voorbeelden hiervan zijn "Zoek naar personen" op https://wcag-demo.irisintranet.com/wie-is-wie, "Welk kennisartikel wil je vinden?" op https://wcag-demo.irisintranet.com/serviceplein/digiboekje en "Zoek een poll op stelling, vraag of toelichting" op https://wcag-demo.irisintranet.com/actueel/polls. Bij deze invoervelden moet een permanent zichtbaar label aanwezig zijn om duidelijk te maken waar het veld precies naar zoekt. Momenteel wordt hiervoor een placeholder-tekst gebruikt, die verdwijnt zodra de bezoeker begint te typen. Een placeholder-tekst kan niet als label dienen, omdat dit de toegankelijkheid vermindert en voor verwarring kan zorgen. Een invoerveld zonder een permanent zichtbaar label kan ertoe leiden dat bezoekers niet begrijpen wat ze moeten invoeren. Om dit probleem op te lossen, moet er een duidelijk zichtbaar label worden toegevoegd, bijvoorbeeld in de vorm van een tekst boven het veld of een icoon dat het doel van het zoekveld aangeeft. Op verschillende invoervelden op deze website wordt belangrijke informatie alleen in de placeholder-tekst weergegeven, terwijl deze niet in het zichtbare label aanwezig is. Dit kan leiden tot verwarring en verminderde toegankelijkheid, omdat placeholder-tekst verdwijnt zodra de gebruiker begint te typen.

Op pagina https://wcag-demo.irisintranet.com/startpagina bevindt zich het invoerveld "Vertel hier wat je bezighoudt.". Wanneer een bezoeker op dit veld klikt, verschijnt een teksteditor. Wanneer de knop met het paperclippictogram wordt geactiveerd, opent een dialoogvenster met verschillende functies voor het uploaden van bestanden. Als de optie "Uploaden" wordt geselecteerd en een SVG-bestand wordt geüpload, wordt het bestand geaccepteerd, maar verschijnt er onder het tekstgebied een foutmelding: "Onbekend bestand." Er wordt echter geen instructie gegeven die aangeeft dat dit bestandsformaat niet wordt ondersteund. Om verwarring te voorkomen, moet vóór het uploadproces een duidelijke instructie worden toegevoegd waarin de toegestane bestandsformaten worden vermeld. Dit helpt bezoekers te begrijpen welke bestanden zij kunnen uploaden en voorkomt onduidelijke foutmeldingen. Hetzelfde probleem is aangetroffen op de pagina https://wcag-demo.irisintranet.com/tijdlijn.
Op pagina https://wcag-demo.irisintranet.com/startpagina is het mogelijk om een widget "Memo" toe te voegen met de knop "Widget toevoegen". De widget bevat een textarea-element zonder label. Geef alle invoervelden een duidelijk label in de vorm van tekst of een afbeelding met een alt-tekst.
Hetzelfde probleem is aangetroffen bij de volgende elementen: https://wcag-demo.irisintranet.com/startpagina in de widget "Takenlijst".

Op pagina https://wcag-demo.irisintranet.com/startpagina staat het invoerveld "Vertel hier wat je bezighoudt.". Wanneer een bezoeker op dit veld klikt, verschijnt een teksteditor met verschillende functies. Boven het invoerveld bevinden zich knoppen, zoals knoppen met pijlpictogrammen, vetgedrukt (B), cursief (I), en pictogrammen voor links en lijsten. Al deze knoppen zijn echter niet toegankelijk via het toetsenbord. Hoewel er sneltoetsen beschikbaar zijn, is deze informatie niet zichtbaar voor ziende bezoekers. De instructie hoe deze sneltoetsen kunnen worden opgeroepen is verborgen in de toegankelijke naam van dit veld. De toegankelijke naam van dit veld is "Rich Text Editor Bewerkingsgebied: main. Druk op ⌥0 voor hulp." De instructie moet aanwezig zijn op de pagina. Voeg deze informatie toe als tekst op de pagina.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina https://wcag-demo.irisintranet.com/startpagina staat het invoerveld "Vertel hier wat je bezighoudt.". Wanneer een bezoeker op dit veld klikt, verschijnt een teksteditor met verschillende functies. Wanneer de knop met het paperclippictogram wordt geactiveerd, opent een dialoogvenster met verschillende opties voor het uploaden van bestanden. Als de optie "Uploaden" is geselecteerd en een SVG-bestand wordt geüpload, wordt het bestand wel geaccepteerd, maar verschijnt er onder het tekstgebied een foutmelding: "Onbekend bestand". Geef de bezoeker duidelijke instructies over hoe deze fout kan worden opgelost, bijvoorbeeld door een ondersteund bestandsformaat te kiezen of aanvullende stappen te ondernemen. Hetzelfde probleem is aangetroffen op de volgende pagina:
https://wcag-demo.irisintranet.com/tijdlijn.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://wcag-demo.irisintranet.com staat een schakelknop naast “Inlog onthouden”. Deze knop is gecodeerd als een invoerveld van het type “checkbox”. Wanneer deze knop wordt aangezet dient de waarde “checked” te veranderen in “true”. Dit gebeurt nu niet. De staat van deze knop is onbekend voor bezoekers die hulpsoftware gebruiken.

Op pagina https://wcag-demo.irisintranet.com/startpagina staat een veld "Vertel hier wat je bezighoudt.". Als een bezoeker op dit veld klikt, verschijnt er een teksteditor. Als de knop met het paperclip-pictogram wordt geopend, verschijnt er een dialoogvenster met verschillende functies voor het uploaden van bestanden. Als bestanden of links zijn toegevoegd met een van de beschikbare methoden, verschijnen ze onder het tekstgebied, elk met een "X"-knop om ze uit de lijst te verwijderen. Deze knop heeft geen toegankelijke naam.
Knoppen moeten altijd een toegankelijke naam hebben die hun functie beschrijft. Bovendien moet de naam mee veranderen als de functie van de knop verandert. Toegankelijke namen mogen nooit leeg zijn, want zonder deze naam weet een blinde bezoeker niet wat de knop doet. Zorg dus dat deze knop een toegankelijke naam krijgt die beschrijft wat de functie is.

Op pagina
https://wcag-demo.irisintranet.com/startpagina is mogelijk om een "Wisselkoers" toe te voegen met de knop "Widget toevoegen". In deze widget staat een knop met een pijltjes. De knop heeft geen toegankelijke naam.

Op pagina https://wcag-demo.irisintranet.com/startpagina verschijnt na het klikken op het veld "Vertel hier wat je bezighoudt" een select-element "Deel met", waar de toegankelijke naam ontbreekt.

Uitkomst: Onvoldoende

Bevindingen: Het menu bovenaan alle pagina's bevat een zoekbalk. Wanneer een gebruiker gegevens invoert in dit zoekveld, verschijnt er een lijst met suggesties. Deze lijst is een statusbericht, maar wordt niet automatisch aangekondigd door de schermlezer. Daarnaast is de lijst verborgen met aria-hidden="true".
De lijst met suggesties voldoet aan de definitie van een statusbericht, omdat deze informatie geeft over de resultaten van een actie en geen focus ontvangt. Om ervoor te zorgen dat schermlezers deze informatie kunnen voorlezen, moet de rol correct worden vastgelegd in de code. Dit kan worden opgelost door role="status" toe te voegen aan de melding. Meer informatie hierover is te vinden op https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA19.

Een soortgelijk probleem is aangetroffen bij een keuzelijst. Op de pagina https://wcag-demo.irisintranet.com/startpagina staat het veld "Vertel hier wat je bezighoudt.". Wanneer een bezoeker op dit veld klikt, verschijnt een teksteditor met verschillende functies. Als in het keuze-element "Deel met" de optie "Groep" wordt geselecteerd, verschijnt er een zoekveld. Wanneer een gebruiker hier gegevens invoert, verschijnt een lijst met suggesties. Ook deze lijst wordt niet automatisch voorgelezen door een schermlezer.

Op pagina https://wcag-demo.irisintranet.com/gebruikersmenu/profielpagina?action=MailNotifications bevindt zich een formulier. Wanneer dit formulier succesvol wordt verzonden, verschijnt er een feedbackbericht met de tekst "Je instellingen zijn opgeslagen." zonder dat de pagina opnieuw wordt geladen. De focus wordt echter niet naar dit bericht verplaatst. Een schermlezer kan dit bericht alleen voorlezen aan een blinde bezoeker als het in de code is gemarkeerd als statusbericht. Dit kan worden opgelost door het attribuut aria-live="polite" of role="status" toe te voegen, zodat schermlezers het bericht automatisch voorlezen.