Rapport in PDF

Onderzoek toegankelijkheid Alfie intranet gemeente Almere webomgeving

Inhoud:

Inleiding
Over deze evaluatie
Managementsamenvatting
Scope van de evaluatie
Uitbreide toetsresultaten
Sample met getoetste webpagina's
Webtechnologie
Onderbouwing van de evaluatie

Inleiding

Openbare voorzieningen moeten bruikbaar en toegankelijk zijn voor alle burgers. Net zoals een gebouw rolstoeltoegankelijk moet zijn, moet een website of mobiele app ook bediend kunnen worden door mensen met een beperking. Dit kunnen bijvoorbeeld visuele, auditieve of motorische beperkingen zijn. Denk aan slechtzienden, doven en slechthorenden en mensen die hun handen niet of in beperkte mate kunnen gebruiken. Ook cognitieve factoren spelen een rol: is de content voor iedereen te begrijpen?

Nederlandse overheidsorganisaties moeten voldoen aan de Web Content Accessibility Guidelines (WCAG) versie 2.1, onder de Europese standaard voor overheidswebsites EN 301 549. Deze criteria variëren van technisch functionele eisen zoals een goede werking met het toetsenbord tot aan meer inhoudelijke eisen zoals duidelijke foutmeldingen en een heldere navigatiestructuur.

Dit onderzoek is handmatig uitgevoerd volgens de WCAG-EM evaluatiemethode met ondersteuning van automatische test tools. De pagina’s uit de sample zijn onderzocht op alle 50 criteria onder WCAG 2.1 A en AA. Wanneer aan een criterium niet wordt voldaan, wordt hiervan minimaal één voorbeeld gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten daarom structureel worden aangepakt.

De WCAG criteria zijn ingedeeld volgens vier principes, welke ook de leidraad vormen voor dit rapport: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Gedetailleerde informatie over deze criteria is te vinden op de website van het W3C (Nederlandse vertaling).

Over deze evaluatie

Rapport auteur: Janita Top
Evaluatie opdrachtgever: Gemeente Almere
Evaluatiedatum: 9 mei 2024

Managementsamenvatting

Uit dit onderzoek blijkt dat wordt voldaan aan 39 van de 55 criteria voor toegankelijkheid (35 van de 50 verplichte criteria). Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.

Positief is bijvoorbeeld er geen zintuiglijke eigenschappen worden gebruikt om betekenis over te brengen, dat blokken met herhalende links omzeild kunnen worden en dat er een consistente navigatie aanwezig is.

Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:

Onjuiste of missende alt-teksten bij afbeeldingen
Onjuist opgemaakte koppen
Niet alle content is bereikbaar bij inzoomen
Niet alle functionaliteit werkt met het toetsenbord

Naast de verplichte WCAG 2.1 criteria zijn ook de in WCAG 2.2 toegevoegde criteria op niveau A en AA onderzocht. Hierbij waren er bevindingen bij 2 succescriteria.

De screenshots zijn gedeeld met de opdrachtgever, maar omdat het een intranetomgeving betreft, niet opgenomen in dit rapport.

Scope van de evaluatie

Website naam: Alfie intranet gemeente Almere webomgeving
Scope van de website: Alle pagina's op https://almere.embracecloud.nl .
WCAG Versie: 2.2
Conformiteitsdoel: AA
Basisniveau van toegankelijkheid-ondersteuning: Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 55 van 55 WCAG 2.2 AA Success Criteria.

30 Voldoende
16 Onvoldoende
9 Niet van toepassing
0 Niet getoetst

Alle resultaten

1 Waarneembaar

1.1 Tekstalternatieven

Success Criterium	Uitkomst	Bevindingen
1.1.1: Niet-tekstuele content	Hele sample Uitkomst: Onvoldoende Startpagina Uitkomst: Onvoldoende Nieuwsoverzicht Uitkomst: Onvoldoende Kalender item informatieavond Hart van de Stad 2040 Uitkomst: Onvoldoende Profielpagina medewerker (incl. tabs) Uitkomst: Onvoldoende	Startpagina Onder elk nieuwsbericht staan icoontjes van likes en comments. Deze hebben geen alternatieve tekst, waardoor een gebruiker van hulpsoftware alleen 2 cijfers mee krijgt. Voeg hiervoor een (met CSS verborgen) screenreadertekst toe die duidelijk maakt waar de cijfers voor zijn. (Een title attribuut wordt slecht ondersteund door hulpsoftware, dus dat is hier geen goede oplossing. Dit title attribuut staat wel op de startpagina, maar niet bij de icoontjes op het Nieuwsoverzicht). Nieuwsoverzicht De foto’s bij de nieuwsberichten hebben een correcte alt-tekst die de foto beschrijft (zoals ‘Alexander van Mazijk persfoto’ ), maar doordat er een role=”presentation” op is gezet, worden deze toch genegeerd door hulpsoftware. Haal deze role attribuut weg. De afbeelding zit hier in een figure element, maar deze heeft geen caption. Hiermee wordt het nu een lege figuur. Kalender item informatieavond Hart van de Stad 2040 De afbeelding van de illustratie bij het item heeft een alt-tekst, maar doordat er een role=”presentation” op is gezet, wordt deze toch genegeerd door hulpsoftware. Haal deze role attribuut weg. Profielpagina medewerker (incl. tabs) Onder de tab staan berichten, die geliked kunnen worden. Dit wordt aangegeven met een duim icoontje en soms ook een aantal. Voor dit icoontje wordt geen alternatieve tekst gegeven, waardoor de button bijvoorbeeld alleen als inhoud ‘1’ heeft. Zie screenshot nummer 3. Onder de tab Connecties staan groepen waarvan sommige een slot icoontje erachter hebben staan. Dit icoon heeft geen alternatieve tekst en deze informatie is daardoor niet beschikbaar voor screenreadergebruikers. Voeg voor deze iconen bijvoorbeeld een (met CSS verborgen) screenreadertekst toe. De iconen zelf kunnen worden verborgen voor hulpsoftware via aria-hidden=”true”.

Success Criterium

Uitkomst

Bevindingen

1.1.1: Niet-tekstuele content

Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Nieuwsoverzicht

Uitkomst: Onvoldoende

Kalender item informatieavond Hart van de Stad 2040

Uitkomst: Onvoldoende

Profielpagina medewerker (incl. tabs)

Uitkomst: Onvoldoende

Startpagina

Onder elk nieuwsbericht staan icoontjes van likes en comments. Deze hebben geen alternatieve tekst, waardoor een gebruiker van hulpsoftware alleen 2 cijfers mee krijgt. Voeg hiervoor een
(met CSS verborgen) screenreadertekst toe die duidelijk maakt waar de cijfers voor zijn. (Een title attribuut wordt slecht ondersteund door hulpsoftware, dus dat is hier geen goede oplossing. Dit title attribuut staat wel op de startpagina, maar niet bij de icoontjes op het Nieuwsoverzicht).

Nieuwsoverzicht

De foto’s bij de nieuwsberichten hebben een correcte alt-tekst die de foto beschrijft
(zoals ‘Alexander van Mazijk persfoto’ ), maar doordat er een role=”presentation” op is gezet, worden deze toch genegeerd door hulpsoftware. Haal deze role attribuut weg. De afbeelding zit hier in een figure element, maar deze heeft geen caption. Hiermee wordt het nu een lege figuur.

Kalender item informatieavond Hart van de Stad 2040

De afbeelding van de illustratie bij het item heeft een alt-tekst, maar doordat er een role=”presentation” op is gezet, wordt deze toch genegeerd door hulpsoftware. Haal deze role attribuut weg.

Profielpagina medewerker (incl. tabs)

Onder de tab staan berichten, die geliked kunnen worden. Dit wordt aangegeven met een duim icoontje en soms ook een aantal. Voor dit icoontje wordt geen alternatieve tekst gegeven, waardoor de button bijvoorbeeld alleen als inhoud ‘1’ heeft. Zie screenshot nummer 3.

Onder de tab Connecties staan groepen waarvan sommige een slot icoontje erachter hebben staan. Dit icoon heeft geen alternatieve tekst en deze informatie is daardoor niet beschikbaar voor screenreadergebruikers.

Voeg voor deze iconen bijvoorbeeld een
(met CSS verborgen) screenreadertekst toe. De iconen zelf kunnen worden verborgen voor hulpsoftware via aria-hidden=”true”.

1.2 Op tijd gebaseerde media

Success Criterium	Uitkomst	Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)	Hele sample Uitkomst: Niet van toepassing
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)	Hele sample Uitkomst: Voldoende
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)	Hele sample Uitkomst: Onvoldoende Groepspagina Almere Academie (video) Uitkomst: Onvoldoende	Groepspagina Almere Academie (video) In de video ‘Reunie leergang Werken in verbinding’ komt informatie in beeld die niet wordt uitgesproken, namelijk de namen en functies van de diverse sprekers. Mensen die deze teksten niet kunnen zien, krijgen deze informatie niet mee. Behalve audiodescriptie kan deze informatie ook via een alternatief worden aangeboden, zoals een uitgeschreven tekst onder de video.
1.2.4: Ondertitels voor doven en slechthorenden (live)	Hele sample Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)	Hele sample Uitkomst: Onvoldoende Groepspagina Almere Academie (video) Uitkomst: Onvoldoende	Groepspagina Almere Academie (video) In de video ‘Reunie leergang Werken in verbinding’ komt informatie in beeld die niet wordt uitgesproken, namelijk de namen en functies van de diverse sprekers. Voor de eerste spreker moet hiervoor audiodescriptie worden toegevoegd. Voor de sprekers hierna wordt dit niet vereist omdat er geen pauzes meer zijn in de audio (er is dus geen ruimte voor). Er wordt geadviseerd om bij de montage hier rekening mee te houden, zodat een audiodescriptie met naam en functie toegevoegd kan worden voor alle sprekers. Ook kunnen sprekers eerst zichzelf voorstellen, zodat er geen apart audiodescriptiespoor nodig is.

1.3 Aanpasbaar

Success Criterium	Uitkomst	Bevindingen
1.3.1: Info en relaties	Hele sample Uitkomst: Onvoldoende Startpagina Uitkomst: Onvoldoende Weten en regelen Uitkomst: Onvoldoende Zoekresultaten reizen Uitkomst: Onvoldoende Profielpagina medewerker (incl. tabs) Uitkomst: Onvoldoende Groepspagina Communicatie & KCC (incl. tabs) Uitkomst: Voldoende Groepspagina Almere Academie (video) Uitkomst: Onvoldoende Random pagina 2 - reprowerkzaamheden Uitkomst: Onvoldoende	Startpagina De koppenstructuur is niet logisch opgebouwd. Er is een h3-kop ‘Nieuws’, waarna er h4-koppen vallen zoals ‘Bericht door [naam]..’ . Dit zijn echter geen nieuwsberichten, maar bijdragen van medewerkers. Zie screenshot nummer 7. Dit kan worden opgelost door een (eventueel verborgen) h3-kop toe te voegen met ‘Berichten’. Daarnaast bevatten de nieuwsitems visueel wel kopjes, maar in de code niet. Hiervoor kunnen h4-kopjes worden toegevoegd binnen de items. De h1 en h2 niveaus missen op deze pagina. Dit is geen vereiste, maar het wordt wel aangeraden een complete structuur te hebben, beginnend bij h1. Wanneer je in het gebruikermenu ‘notificaties’ activeert, opent er een panel. Hierin staan 3 tabs. Bij de tab uitnodigingen staat visueel een nummer indien er uitnodigingen open staan. Deze wordt voor hulpsoftware echter overschreven door het aria-label, waardoor dit nummer voor deze gebruikers niet beschikbaar is. Weten en regelen De koppenstructuur is niet helemaal correct opgebouwd. Er is een apart blok met Categorieën, deze heeft als kop h3-niveau, waardoor deze onder de h2-kop Thema’s valt. De kop Categorieën hoort hier op h2-niveau. Zoekresultaten reizen Onderaan staan blokken met links naar collega’s. Visueel staat er een foto, naam, functie en ‘bekijk profiel’. Voor hulpsoftware is alleen de naam beschikbaar. Dit komt doordat het aria-label de rest van de content overschrijft. Dit kan worden opgelost door het aria-label op de link te verwijderen. Profielpagina medewerker (incl. tabs) Opmerking: De werktijden zijn visueel opgemaakt als een tabel, maar in de code staat de tekst achter elkaar (enkel div-elementen). Dit zijn eenvoudige ‘dataparen’, maar het wordt wel aangeraden dit op te maken als een tabel, zodat de structuur ook duidelijk is voor screenreadergebruikers. Onder de tab Gedeelte documenten staat visueel een tabel met meerdere kolommen. In de code zijn dit enkel div-elementen met aria-labels. De structuur van de data is hierdoor niet voldoende duidelijk voor gebruikers van hulpsoftware. Maak hiervan een HTML tabel met correct opgemaakte header en datacellen. (Aria-labels werken ook alleen op elementen met een duidelijke rol.) Groepspagina Communicatie & KCC (incl. tabs) Opmerking: de koppen beginnen op h4-niveau (binnen de berichten). Het zou overzichtelijker zijn wanneer de berichten als sectie ook een h3-kop zouden hebben, en de h1- en h2-niveaus niet zouden missen. Groepspagina Almere Academie (video) In de kalender wordt via kleur aangegeven welke knop actief is (dag/week/maand/agenda). Dit wordt niet doorgegeven aan hulpsoftware. Dit kan bijvoorbeeld worden gedaan via het aria-pressed attribuut. Random pagina 2 - reprowerkzaamheden De koppenstructuur is niet logisch opgemaakt. De kopjes in de uitgeklapte teksten hebben h2-niveau, maar zouden op een lager niveau moeten staan omdat ze binnen een uitklapsectie staan. Zie screenshot nummer 8.
1.3.2: Betekenisvolle volgorde	Hele sample Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen	Hele sample Uitkomst: Voldoende
1.3.4: Weergavestand	Hele sample Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input	Hele sample Uitkomst: Voldoende

1.4 Onderscheidbaar

Success Criterium	Uitkomst	Bevindingen
1.4.1: Gebruik van kleur	Hele sample Uitkomst: Onvoldoende Profielpagina medewerker (incl. tabs) Uitkomst: Onvoldoende	Profielpagina medewerker (incl. tabs) De link ‘lees meer’ in de tekst onder Persoonlijke informatie wordt alleen met een verschil in kleur aangegeven. Slechtzienden en kleurenblinden kunnen missen dat hier een link staat. Voeg bijvoorbeeld onderstreping toe om dit duidelijker te maken. Zie screenshot nummer 2. Dit komt op meerdere plekken voor, bijvoorbeeld ook bij links naar profielen binnen berichten (wanneer personen een bericht liken) en in de tekst van Reprowerkzaamheden (screenshot nummer 5).
1.4.2: Geluidsbediening	Hele sample Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Onderstaande elementen op de website zitten qua contrast onder deze waarden (getest in high contrast modus via de persoonlijke instellingen). De hoofdmenu-items (wit op blauw, 2.54:1) De items in het gebruikermenu (wit op groen, 1.91:1) Homepage: de teksten en links onder ‘Aan de slag’ en ‘Welkom op Alfie’ (wit op groen, 1.91:1) De knoppen zoals ‘Nieuwsoverzicht’ (wit op blauw, 2.54:1) Homepage: De tekst boven de tijdlijn (zwart op donkerblauw, 1.78:1). Zie screenshot nummer 1. Kalender: de kop ‘Agenda’ en de links met letters (wit op blauw, 2.54:1) Groepspagina Almere Academie: de tekst ‘vraag’ (zwart op donkerblauw, 1.78:1). Zie screenshot nummer 6.
1.4.4: Herschalen van tekst	Hele sample Uitkomst: Voldoende
1.4.5: Afbeeldingen van tekst	Hele sample Uitkomst: Voldoende
1.4.10: Reflow	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot 400% (vergelijkbaar met 320 px breed) goed bruikbaar blijft, en er niet in twee richtingen gescrold hoeft te worden. Op onderstaande plekken op de site is dit niet het geval. (Getest op 1280px breed.) Op 300% en verder ingezoomd vallen veel onderdelen over elkaar heen of buiten beeld, waardoor de pagina’s niet goed meer te bedienen zijn. Bijvoorbeeld: ‘Weten en regelen’ in het hoofdmenu is niet meer leesbaar, teksten van nieuwsberichten en thema’s vallen deels weg buiten de blokken. In de tab Gedeelde documenten binnen een profiel valt het rechter gedeelte met documenten buiten beeld. Bij zoekresultaten wordt vanaf 200% de layout zo aangepast dat je voor het invoerveld horizontaal moet scrollen. Zie screenshot nummer 10. Ook de pagina Collega’s is vanaf 200% vrijwel onbruikbaar. Zie screenshot nummer 11.
1.4.11: Contrast van niet-tekstuele content	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Onderstaande elementen op de website zitten qua contrast onder deze waarden. Het optiemenu (3 stipjes) op groene en blauwe achtergrond van de widgets (1.9:1 en 2.5:1). Startpagina: de ‘vinkjes’ in het blok ‘Welkom of Alfie’, unchecked (1.3:1) en checked (2.7:1) Kalender: de knoppen voor vorige en volgende (2.5:1) De knop om iemand te volgen (bel icoon, 2.7:1) Het groene bolletje om aan te geven dat iemand online is (1.9:1) Profielpagina tab Connecties: de links met bolletjes om naar meer volgers te gaan (1.4:1)
1.4.12: Tekstafstand	Hele sample Uitkomst: Voldoende
1.4.13: Content bij hover of focus	Hele sample Uitkomst: Voldoende

2 Bedienbaar

2.1 Toetsenbordtoegankelijk

Success Criterium	Uitkomst	Bevindingen
2.1.1: Toetsenbord	Hele sample Uitkomst: Onvoldoende Nieuwsoverzicht Uitkomst: Onvoldoende Profielpagina medewerker (incl. tabs) Uitkomst: Voldoende	Hele sample Bevindingen: In de mobiele weergave (boven 300% ingezoomd) staat er bovenaan een +-icoon om een bericht toe te voegen. Deze ‘knop’ (zie 4.1.2) werkt niet met het toetsenbord. Opmerking: Wanneer er bij het zoeken een lijst met zoeksuggesties wordt getoond, is het niet mogelijk om hier met het toetsenbord bij te komen. Dit wordt niet afgekeurd, omdat je als alternatief meteen naar de pagina met resultaten kunt gaan, maar het zou wel gebruiksvriendelijker zijn wanneer de suggesties ook te gebruiken zijn met het toetsenbord. Zie ook 4.1.2. Nieuwsoverzicht Na de filters staan 2 blokjes met links naar externe documenten over reiskostenvergoedingen. Deze links zijn niet te bedienen met het toetsenbord. Profielpagina medewerker (incl. tabs) Opmerking: op de tab Pages kun je filteren op datum. Met het toetsenbord komt de focus in de datumvelden en laat een kalender zien. Deze kalender is vervolgens niet te gebruiken met het toetsenbord. Handmatig een datum invullen kan wel, maar het is verwarrend dat de kalender wordt getoond en niet gebruikt kan worden. Laat deze met het toetsenbord niet zien of maak deze toetsenbordtoegankelijk.
2.1.2: Geen toetsenbordval	Hele sample Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen	Hele sample Uitkomst: Onvoldoende Groepspagina Almere Academie (video) Uitkomst: Onvoldoende	Groepspagina Almere Academie (video) Op deze pagina wordt gebruik gemaakt van een videospeler. Binnen deze videospeler is het mogelijk om sneltoetsen van één karakter te gebruiken voor de bediening. Het probleem is hier dat deze sneltoetsen ook actief zijn als de toetsenbordfocus op een ander element binnen de video staat. Dit kan problemen opleveren voor mensen die met spraakbediening werken en waarbij deze letters kunnen voorkomen in de woorden die uitgesproken worden. Ook kan dit problemen opleveren voor mensen die per ongeluk een toets op het toetsenbord indrukken. Een oplossing is om de embedcode van de YouTube video aanpassen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Dus op deze manier: src="https://www.youtube.com/embed/_XXXXXXXXXX?disablekb=1" Zie ook https://developers.google.com/youtube/player_parameters#disablekb

Success Criterium

Uitkomst

Bevindingen

2.1.1: Toetsenbord

Hele sample

Uitkomst: Onvoldoende

Nieuwsoverzicht

Uitkomst: Onvoldoende

Profielpagina medewerker (incl. tabs)

Uitkomst: Voldoende

Hele sample

Bevindingen:

In de mobiele weergave
(boven 300% ingezoomd) staat er bovenaan een +-icoon om een bericht toe te voegen. Deze ‘knop’ (zie 4.1.2) werkt niet met het toetsenbord.

Opmerking: Wanneer er bij het zoeken een lijst met zoeksuggesties wordt getoond, is het niet mogelijk om hier met het toetsenbord bij te komen. Dit wordt niet afgekeurd, omdat je als alternatief meteen naar de pagina met resultaten kunt gaan, maar het zou wel gebruiksvriendelijker zijn wanneer de suggesties ook te gebruiken zijn met het toetsenbord. Zie ook 4.1.2.

Nieuwsoverzicht

Na de filters staan 2 blokjes met links naar externe documenten over reiskostenvergoedingen. Deze links zijn niet te bedienen met het toetsenbord.

Profielpagina medewerker (incl. tabs)

Opmerking: op de tab Pages kun je filteren op datum. Met het toetsenbord komt de focus in de datumvelden en laat een kalender zien. Deze kalender is vervolgens niet te gebruiken met het toetsenbord. Handmatig een datum invullen kan wel, maar het is verwarrend dat de kalender wordt getoond en niet gebruikt kan worden. Laat deze met het toetsenbord niet zien of maak deze toetsenbordtoegankelijk.

2.1.2: Geen toetsenbordval

Hele sample

Uitkomst: Voldoende

2.1.4: Enkel teken sneltoetsen

Hele sample

Uitkomst: Onvoldoende

Groepspagina Almere Academie (video)

Uitkomst: Onvoldoende

Groepspagina Almere Academie (video)

Op deze pagina wordt gebruik gemaakt van een videospeler. Binnen deze videospeler is het mogelijk om sneltoetsen van één karakter te gebruiken voor de bediening. Het probleem is hier dat deze sneltoetsen ook actief zijn als de toetsenbordfocus op een ander element binnen de video staat. Dit kan problemen opleveren voor mensen die met spraakbediening werken en waarbij deze letters kunnen voorkomen in de woorden die uitgesproken worden. Ook kan dit problemen opleveren voor mensen die per ongeluk een toets op het toetsenbord indrukken. Een oplossing is om de embedcode van de YouTube video aanpassen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Dus op deze manier: src="https://www.youtube.com/embed/_XXXXXXXXXX?disablekb=1" Zie ook https://developers.google.com/youtube/player_parameters#disablekb

2.2 Genoeg tijd

Success Criterium	Uitkomst	Bevindingen
2.2.1: Timing aanpasbaar	Hele sample Uitkomst: Niet van toepassing
2.2.2: Pauzeren, stoppen, verbergen	Hele sample Uitkomst: Voldoende	Hele sample Bevindingen: Opmerking: in de widget ‘Nieuws in Almere’ scrollen nieuwsitems voor bij die niet gepauzeerd kunnen worden. Omdat de gehele widget verwijderd kan worden, wordt dit niet afgekeurd. Het zou echter gebruiksvriendelijker zijn als deze stream (net als bij de RSS widget) gepauzeerd kan worden, zodat gebruikers die last hebben van deze beweging, deze widget toch kunnen tonen op hun pagina.

Success Criterium

Uitkomst

Bevindingen

2.2.1: Timing aanpasbaar

Hele sample

Uitkomst: Niet van toepassing

2.2.2: Pauzeren, stoppen, verbergen

Hele sample

Uitkomst: Voldoende

Hele sample

Bevindingen:

Opmerking: in de widget ‘Nieuws in Almere’ scrollen nieuwsitems voor bij die niet gepauzeerd kunnen worden. Omdat de gehele widget verwijderd kan worden, wordt dit niet afgekeurd. Het zou echter gebruiksvriendelijker zijn als deze stream
(net als bij de RSS widget) gepauzeerd kan worden, zodat gebruikers die last hebben van deze beweging, deze widget toch kunnen tonen op hun pagina.

2.3 Toevallen en fysieke reacties

Success Criterium	Uitkomst	Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde	Hele sample Uitkomst: Voldoende

Success Criterium

Uitkomst

Bevindingen

2.3.1: Drie flitsen of beneden drempelwaarde

Hele sample

Uitkomst: Voldoende

2.4 Navigeerbaar

Success Criterium	Uitkomst	Bevindingen
2.4.1: Blokken omzeilen	Hele sample Uitkomst: Voldoende
2.4.2: Paginatitel	Hele sample Uitkomst: Voldoende	Hele sample Bevindingen: Opmerking: profielpagina’s hebben als titel ‘Profiel - Alfie’. Dit beschrijft de pagina in het algemeen, maar niet van welke persoon. Het toevoegen van de naam van de persoon aan de titel zou de locatie duidelijker maken. Dit geldt ook voor de pagina’s onder de tabs van een profiel. Die heet nu bijvoorbeeld ‘Berichten - Alfie’, maar het is niet duidelijk om wiens berichten het gaat. Dit geldt ook voor paginatitels onder groepen.
2.4.3: Focus volgorde	Hele sample Uitkomst: Onvoldoende Startpagina Uitkomst: Onvoldoende Kalender Uitkomst: Voldoende	Startpagina Wanneer je op de ‘bewerkt’ button klikt binnen een bericht, opent het bericht (met versiegeschiedenis) in een popup. Via de eerste ‘sluiten’ knop (het kruisje) komt de focus weer in het bericht waar je vandaan kwam. Met de ‘sluiten’ knop onderaan het bericht komt de focus echter boven aan de pagina en moet je weer opnieuw naar het bericht navigeren. Dit komt op meerdere plekken voor, bijvoorbeeld ook na het toevoegen van widgets aan de startpagina (onder ‘Aan de slag’). Kalender Opmerking: Elk agenda-item heeft 3 links: achter de afbeelding, de titel en de ‘lees meer’ link. Voor toetsenbordgebruikers zorgt deze opzet met 3 links per item voor veel extra klikken. Haal bijvoorbeeld de link achter de afbeelding weg en geef deze een leeg alt-attribuut. Ook kan de focus op het blok als geheel worden gezet in plaats van op de losse onderdelen.
2.4.4: Linkdoel (in context)	Hele sample Uitkomst: Onvoldoende Startpagina Uitkomst: Voldoende Profielpagina medewerker (incl. tabs) Uitkomst: Onvoldoende	Startpagina Opmerking: in widgets op de startpagina worden ‘Lees meer’ links gebruikt waarbij in de title attribuut het doel wordt aangegeven (bijvoorbeeld title=”Interne vacatures”). Dit is een toegestane techniek onder WCAG, maar wordt slecht ondersteund in hulpsoftware (de screenreader negeert de title). Beter is het om een met CSS verborgen tekst te gebruiken of een aria-labelledby verwijzing naar een eerder element met beschrijving, zoals een kop. Dit geldt ook voor de ‘Lees meer’-links in de Kalender. Profielpagina medewerker (incl. tabs) Onder de tab Gedeelde documenten staat een link zonder tekst. Deze heeft een icoontje van Onedrive. Zie screenshot nummer 4. Opmerking: Onder de berichten met gedeelde links staat een link achter de foto en achter de titel. Beide kunnen focus krijgen en worden voorgelezen door hulpsoftware. Dit zorgt voor veel dubbele informatie en kliks. Haal bijvoorbeeld de link achter foto weg en maak het gehele blok in een keer aanklikbaar.
2.4.5: Meerdere manieren	Hele sample Uitkomst: Voldoende
2.4.6: Koppen en labels	Hele sample Uitkomst: Onvoldoende Profielpagina medewerker (incl. tabs) Uitkomst: Onvoldoende Groepspagina Almere Academie (video) Uitkomst: Onvoldoende Profiel bewerken Uitkomst: Onvoldoende	Profielpagina medewerker (incl. tabs) Onder de tab Pages staat een invoerveld om een woord in te voeren. Deze heeft als label ‘filter’. Het is hier niet duidelijk wat je moet invoeren. Een label als ‘zoekwoord’ zou duidelijker zijn. Groepspagina Almere Academie (video) Onder de tab Planner staat een agenda. De knoppen om naar de vorige en volgende week te gaan hebben als label ‘prev’ en ‘next’. Dit is mogelijk niet voor iedereen duidelijk. Maar hier Nederlandse labels van. Profiel bewerken Wanneer je kennis en competenties hebt toegevoegd, kun je die later met een kruisje weghalen. Deze knop heeft als label ‘sluiten’. Het zou duidelijker zijn als deze ‘verwijderen’ zou heten.
2.4.7: Focus zichtbaar	Hele sample Uitkomst: Voldoende Startpagina Uitkomst: Voldoende	Startpagina Opmerking: binnen de kalender widget is de focusrand op de items alleen zichtbaar als streepje achter de tekst. Het zou duidelijker zijn als de rand er helemaal omheen staat. Zie screenshot nummer 9. Dit komt op meerdere plekken voor.
2.4.11: Focus Not Obscured (Minimum)	Hele sample Uitkomst: Onvoldoende Startpagina Uitkomst: Onvoldoende Random pagina 1 - vitale buurten maken de stad Uitkomst: Onvoldoende	Startpagina Wanneer je op desktop inzoomt boven 300% krijg je de keuze om te switchen naar de mobiele weergave. In deze weergave wordt de focus van veel elementen binnen de berichten verborgen achter het sticky menu in de footer. Zie screenshot nummer 12. Dit kan worden opgelost door een margin in de CSS toe te voegen zodat de items bij focus wel getoond worden. Zie ook https://www.w3.org/WAI/WCAG22/Techniques/css/C43 Random pagina 1 - vitale buurten maken de stad Wanneer je met de skiplink naar de hoofdinhoud gaat, is de focus op de breadcrumb verborgen achter de header. Dit kan worden opgelost door een margin in de CSS toe te voegen zodat de items bij focus wel getoond worden.

Success Criterium

Uitkomst

Bevindingen

2.4.1: Blokken omzeilen

Hele sample

Uitkomst: Voldoende

2.4.2: Paginatitel

Hele sample

Uitkomst: Voldoende

Hele sample

Bevindingen:

Opmerking: profielpagina’s hebben als titel ‘Profiel - Alfie’. Dit beschrijft de pagina in het algemeen, maar niet van welke persoon. Het toevoegen van de naam van de persoon aan de titel zou de locatie duidelijker maken. Dit geldt ook voor de pagina’s onder de tabs van een profiel. Die heet nu bijvoorbeeld ‘Berichten - Alfie’, maar het is niet duidelijk om wiens berichten het gaat. Dit geldt ook voor paginatitels onder groepen.

2.4.3: Focus volgorde

Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Kalender

Uitkomst: Voldoende

Startpagina

Wanneer je op de ‘bewerkt’ button klikt binnen een bericht, opent het bericht
(met versiegeschiedenis) in een popup. Via de eerste ‘sluiten’ knop (het kruisje) komt de focus weer in het bericht waar je vandaan kwam. Met de ‘sluiten’ knop onderaan het bericht komt de focus echter boven aan de pagina en moet je weer opnieuw naar het bericht navigeren. Dit komt op meerdere plekken voor, bijvoorbeeld ook na het toevoegen van widgets aan de startpagina (onder ‘Aan de slag’).

Kalender

Opmerking: Elk agenda-item heeft 3 links: achter de afbeelding, de titel en de ‘lees meer’ link. Voor toetsenbordgebruikers zorgt deze opzet met 3 links per item voor veel extra klikken. Haal bijvoorbeeld de link achter de afbeelding weg en geef deze een leeg alt-attribuut. Ook kan de focus op het blok als geheel worden gezet in plaats van op de losse onderdelen.

2.4.4: Linkdoel (in context)

Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Voldoende

Profielpagina medewerker (incl. tabs)

Uitkomst: Onvoldoende

Startpagina

Opmerking: in widgets op de startpagina worden ‘Lees meer’ links gebruikt waarbij in de title attribuut het doel wordt aangegeven
(bijvoorbeeld title=”Interne vacatures”). Dit is een toegestane techniek onder WCAG, maar wordt slecht ondersteund in hulpsoftware (de screenreader negeert de title). Beter is het om een met CSS verborgen tekst te gebruiken of een aria-labelledby verwijzing naar een eerder element met beschrijving, zoals een kop. Dit geldt ook voor de ‘Lees meer’-links in de Kalender.

Profielpagina medewerker (incl. tabs)

Onder de tab Gedeelde documenten staat een link zonder tekst. Deze heeft een icoontje van Onedrive. Zie screenshot nummer 4.

Opmerking: Onder de berichten met gedeelde links staat een link achter de foto en achter de titel. Beide kunnen focus krijgen en worden voorgelezen door hulpsoftware. Dit zorgt voor veel dubbele informatie en kliks. Haal bijvoorbeeld de link achter foto weg en maak het gehele blok in een keer aanklikbaar.

2.4.5: Meerdere manieren

Hele sample

Uitkomst: Voldoende

2.4.6: Koppen en labels

Hele sample

Uitkomst: Onvoldoende

Profielpagina medewerker (incl. tabs)

Uitkomst: Onvoldoende

Groepspagina Almere Academie (video)

Uitkomst: Onvoldoende

Profiel bewerken

Uitkomst: Onvoldoende

Profielpagina medewerker (incl. tabs)

Onder de tab Pages staat een invoerveld om een woord in te voeren. Deze heeft als label ‘filter’. Het is hier niet duidelijk wat je moet invoeren. Een label als ‘zoekwoord’ zou duidelijker zijn.

Groepspagina Almere Academie (video)

Onder de tab Planner staat een agenda. De knoppen om naar de vorige en volgende week te gaan hebben als label ‘prev’ en ‘next’. Dit is mogelijk niet voor iedereen duidelijk. Maar hier Nederlandse labels van.

Profiel bewerken

Wanneer je kennis en competenties hebt toegevoegd, kun je die later met een kruisje weghalen. Deze knop heeft als label ‘sluiten’. Het zou duidelijker zijn als deze ‘verwijderen’ zou heten.

2.4.7: Focus zichtbaar

Hele sample

Uitkomst: Voldoende

Startpagina

Uitkomst: Voldoende

Startpagina

Opmerking: binnen de kalender widget is de focusrand op de items alleen zichtbaar als streepje achter de tekst. Het zou duidelijker zijn als de rand er helemaal omheen staat. Zie screenshot nummer 9. Dit komt op meerdere plekken voor.

2.4.11: Focus Not Obscured (Minimum)

Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Onvoldoende

Random pagina 1 - vitale buurten maken de stad

Uitkomst: Onvoldoende

Startpagina

Wanneer je op desktop inzoomt boven 300% krijg je de keuze om te switchen naar de mobiele weergave. In deze weergave wordt de focus van veel elementen binnen de berichten verborgen achter het sticky menu in de footer. Zie screenshot nummer 12. Dit kan worden opgelost door een margin in de CSS toe te voegen zodat de items bij focus wel getoond worden. Zie ook https://www.w3.org/WAI/WCAG22/Techniques/css/C43

Random pagina 1 - vitale buurten maken de stad

Wanneer je met de skiplink naar de hoofdinhoud gaat, is de focus op de breadcrumb verborgen achter de header. Dit kan worden opgelost door een margin in de CSS toe te voegen zodat de items bij focus wel getoond worden.

2.5 Input Modaliteiten

Success Criterium	Uitkomst	Bevindingen
2.5.1: Aanwijzergebaren	Hele sample Uitkomst: Niet van toepassing
2.5.2: Aanwijzerannulering	Hele sample Uitkomst: Voldoende
2.5.3: Label in naam	Hele sample Uitkomst: Voldoende
2.5.4: Bewegingsactivering	Hele sample Uitkomst: Niet van toepassing
2.5.7: Dragging Movements	Hele sample Uitkomst: Voldoende
2.5.8: Target Size (Minimum)	Hele sample Uitkomst: Onvoldoende Startpagina Uitkomst: Onvoldoende	Startpagina In de header van berichten (ook binnen reacties op een bericht) staan meerdere links en buttons dicht bij elkaar die kleiner zijn dan 24 pixels en elkaar overlappen. Hierdoor kan het lastig zijn om de juiste link of button te activeren. Zorg voor grotere links/buttons of voor meer ruimte tussen de elementen via bijvoorbeeld padding of line-height. Zie screenshot nummer 13.

3 Begrijpelijk

3.1 Leesbaar

Success Criterium	Uitkomst	Bevindingen
3.1.1: Taal van de pagina	Hele sample Uitkomst: Voldoende
3.1.2: Taal van onderdelen	Hele sample Uitkomst: Niet van toepassing

Success Criterium

Uitkomst

Bevindingen

3.1.1: Taal van de pagina

Hele sample

Uitkomst: Voldoende

3.1.2: Taal van onderdelen

Hele sample

Uitkomst: Niet van toepassing

3.2 Voorspelbaar

Success Criterium	Uitkomst	Bevindingen
3.2.1: Bij focus	Hele sample Uitkomst: Voldoende
3.2.2: Bij input	Hele sample Uitkomst: Voldoende
3.2.3: Consistente navigatie	Hele sample Uitkomst: Voldoende
3.2.4: Consistente identificatie	Hele sample Uitkomst: Voldoende
3.2.6: Consistent Help	Hele sample Uitkomst: Niet van toepassing

3.3 Assistentie bij invoer

Success Criterium	Uitkomst	Bevindingen
3.3.1: Foutidentificatie	Hele sample Uitkomst: Voldoende
3.3.2: Labels of instructies	Hele sample Uitkomst: Voldoende
3.3.3: Foutsuggestie	Hele sample Uitkomst: Voldoende
3.3.4: Foutpreventie (wettelijk, financieel, gegevens	Hele sample Uitkomst: Niet van toepassing
3.3.7: Redundant Entry	Hele sample Uitkomst: Voldoende
3.3.8: Accessible Authentication (Minimum)	Hele sample Uitkomst: Voldoende

4 Robuust

4.1 Compatibel

Success Criterium	Uitkomst	Bevindingen
4.1.2: Naam, rol, waarde	Hele sample Uitkomst: Onvoldoende Startpagina Uitkomst: Voldoende Weten en regelen item Circulaire economie Uitkomst: Onvoldoende Zoekresultaten reizen Uitkomst: Onvoldoende Profielpagina medewerker (incl. tabs) Uitkomst: Onvoldoende Groepspagina Communicatie & KCC (incl. tabs) Uitkomst: Onvoldoende Random pagina 2 - reprowerkzaamheden Uitkomst: Onvoldoende	Startpagina Opmerking: Voor screenreadergebruikers is er geen aankondiging dat er tijdens het zoeken een lijst is geopend met zoeksuggesties. Dit kan worden opgelost door het gebruik van een combobox en het aria-expanded attribuut om aan te geven dat er een lijst is geopend. Zie voor een voorbeeld https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/. Links naar documenten (in berichten) worden geopend in een preview window. Hierbinnen staan knoppen (vorige, volgende, sluiten) zonder correcte rol en naam. Je kunt widgets toevoegen aan je startpagina via de bewerkmodus. Hierin staan div-elementen met een tekst, maar geen duidelijke rol. Maak hier bijvoorbeeld buttons van. Onder ‘Welkom op Alfie’ staat een lijstje met taken. Deze invoervelden hebben geen duidelijke rol en status. De checkboxes zijn verborgen voor hulpsoftware via display:none. De labels heten alle ‘Welkom op Alfie!”. Het is daardoor niet duidelijk welke items er zijn en welke op voltooid (checked) staan. In de mobiele weergave (boven 300% ingezoomd) staat er bovenaan een +-icoon. Dit is een span-element zonder duidelijke rol. Maak hier bij voorkeur een button element van met een duidelijke naam. Wanneer je in het gebruikermenu ‘notificaties’ activeert, opent er een panel. Hierin staan 3 tabs. In de code is deze rol van tab echter niet duidelijk, waardoor het ook niet duidelijk is welke informatie geopend is (de status). Dit kan worden aangegeven door in de code gebruik te maken van tab en tabpanel. Zie ook https://www.w3.org/TR/wai-aria-1.1/#tab Binnen de tab Uitnodigingen staat een uitnodiging in een div-element. Deze fungeert als link, maar heeft geen rol van link. Wanneer je in het gebruikermenu ‘Collega’s’ activeert, opent er een panel. Hierin staan div-elementen met personen, die fungeren als link. Deze elementen hebben echter geen rol van link. Weten en regelen item Circulaire economie Onder het kopje ‘Aanspreekpunt binnen afdeling EOG’ staan 2 list items met namen en profielfoto’s. Deze hebben een tabindex van 0 waardoor ze focus kunnen krijgen met het toetsenbord. Het zijn echter geen links of buttons. Maak hier bijvoorbeeld link elementen van zodat het duidelijk is dat deze naar hun profielpagina’s gaan. Haal bij voorkeur ook onnodige focus weg (nu is er 2 keer focus per item). Dit komt op meerdere plekken voor, bijvoorbeeld ook in het blok ‘Volgend’ binnen de Connecties tab van de profielpagina. Zoekresultaten reizen Onder de h2-kop ‘Resultaten’ staan filters. Dit zijn span-elementen waarvan via JavaScript links zijn gemaakt. Voor hulpsoftware is het niet duidelijk dat dit links zijn. Maak hier link elementen van of geef het element role=”link”. Profielpagina medewerker (incl. tabs) Onder de Tab Berichten kun je per bericht extra opties openen. Op deze knop wordt niet aangegeven dat dit menu geopend of gesloten is. Er staat een ‘aria-expanded’-attribuut op de lijst die wordt geopend, maar dit attribuut moet staan op de knop waarmee je de lijst opent. Onder de tab Gedeelde documenten staat een link zonder tekst. Deze heeft een icoontje van Onedrive. Zie screenshot nummer 4. Daarnaast staat een knop zonder juiste rol en zonder naam. Deze heeft als functie om van weergave te wisselen. De 3 knoppen ervoor (die nu disabled zijn) hebben een aria-label, maar geen juiste rol. Groepspagina Communicatie & KCC (incl. tabs) Onder de RSS kop staat een slider. Deze heeft een play of pauzeer knop. Deze knop heeft echter altijd de naam ‘Start Stop’, ongeacht of de slider loopt of stil staat. De status is hierdoor niet duidelijk. Onder de tab Pages kun je onder de tags zoeken op meer tags. Na de link ‘specificeer’ open er een invoerveld. Deze heeft geen label. Ook wordt er niet doorgegeven aan hulpsoftware dat er suggesties worden getoond. Dit komt ook voor onder de Leden tab bij functies. Random pagina 2 - reprowerkzaamheden In de tekst staan 2 links met een plus-icoon ervoor. om meer content uit te klappen. Deze hebben als rol een h3-kop. Dit is geen correcte rol, en ook de waarde (in- of uitgeklapt) wordt niet aangegeven. Maak hier bij voorkeur een button van en geef de waarde aan via het aria-expanded attribuut.
4.1.3: Statusberichten	Hele sample Uitkomst: Voldoende

Success Criterium

Uitkomst

Bevindingen

4.1.2: Naam, rol, waarde

Hele sample

Uitkomst: Onvoldoende

Startpagina

Uitkomst: Voldoende

Weten en regelen item Circulaire economie

Uitkomst: Onvoldoende

Zoekresultaten reizen

Uitkomst: Onvoldoende

Profielpagina medewerker (incl. tabs)

Uitkomst: Onvoldoende

Groepspagina Communicatie & KCC (incl. tabs)

Uitkomst: Onvoldoende

Random pagina 2 - reprowerkzaamheden

Uitkomst: Onvoldoende

Startpagina

Opmerking: Voor screenreadergebruikers is er geen aankondiging dat er tijdens het zoeken een lijst is geopend met zoeksuggesties. Dit kan worden opgelost door het gebruik van een combobox en het aria-expanded attribuut om aan te geven dat er een lijst is geopend. Zie voor een voorbeeld https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/.

Links naar documenten
(in berichten) worden geopend in een preview window. Hierbinnen staan knoppen (vorige, volgende, sluiten) zonder correcte rol en naam.

Je kunt widgets toevoegen aan je startpagina via de bewerkmodus. Hierin staan div-elementen met een tekst, maar geen duidelijke rol. Maak hier bijvoorbeeld buttons van.

Onder ‘Welkom op Alfie’ staat een lijstje met taken. Deze invoervelden hebben geen duidelijke rol en status. De checkboxes zijn verborgen voor hulpsoftware via display:none. De labels heten alle ‘Welkom op Alfie!”. Het is daardoor niet duidelijk welke items er zijn en welke op voltooid
(checked) staan.

In de mobiele weergave
(boven 300% ingezoomd) staat er bovenaan een +-icoon. Dit is een span-element zonder duidelijke rol. Maak hier bij voorkeur een button element van met een duidelijke naam.

Wanneer je in het gebruikermenu ‘notificaties’ activeert, opent er een panel. Hierin staan 3 tabs. In de code is deze rol van tab echter niet duidelijk, waardoor het ook niet duidelijk is welke informatie geopend is
(de status). Dit kan worden aangegeven door in de code gebruik te maken van tab en tabpanel. Zie ook https://www.w3.org/TR/wai-aria-1.1/#tab

Binnen de tab Uitnodigingen staat een uitnodiging in een div-element. Deze fungeert als link, maar heeft geen rol van link.

Wanneer je in het gebruikermenu ‘Collega’s’ activeert, opent er een panel. Hierin staan div-elementen met personen, die fungeren als link. Deze elementen hebben echter geen rol van link.

Weten en regelen item Circulaire economie

Onder het kopje ‘Aanspreekpunt binnen afdeling EOG’ staan 2 list items met namen en profielfoto’s. Deze hebben een tabindex van 0 waardoor ze focus kunnen krijgen met het toetsenbord. Het zijn echter geen links of buttons. Maak hier bijvoorbeeld link elementen van zodat het duidelijk is dat deze naar hun profielpagina’s gaan. Haal bij voorkeur ook onnodige focus weg
(nu is er 2 keer focus per item). Dit komt op meerdere plekken voor, bijvoorbeeld ook in het blok ‘Volgend’ binnen de Connecties tab van de profielpagina.

Zoekresultaten reizen

Onder de h2-kop ‘Resultaten’ staan filters. Dit zijn span-elementen waarvan via JavaScript links zijn gemaakt. Voor hulpsoftware is het niet duidelijk dat dit links zijn. Maak hier link elementen van of geef het element role=”link”.

Profielpagina medewerker (incl. tabs)

Onder de Tab Berichten kun je per bericht extra opties openen. Op deze knop wordt niet aangegeven dat dit menu geopend of gesloten is. Er staat een ‘aria-expanded’-attribuut op de lijst die wordt geopend, maar dit attribuut moet staan op de knop waarmee je de lijst opent.

Onder de tab Gedeelde documenten staat een link zonder tekst. Deze heeft een icoontje van Onedrive. Zie screenshot nummer 4. Daarnaast staat een knop zonder juiste rol en zonder naam. Deze heeft als functie om van weergave te wisselen. De 3 knoppen ervoor
(die nu disabled zijn) hebben een aria-label, maar geen juiste rol.

Groepspagina Communicatie & KCC (incl. tabs)

Onder de RSS kop staat een slider. Deze heeft een play of pauzeer knop. Deze knop heeft echter altijd de naam ‘Start Stop’, ongeacht of de slider loopt of stil staat. De status is hierdoor niet duidelijk.

Onder de tab Pages kun je onder de tags zoeken op meer tags. Na de link ‘specificeer’ open er een invoerveld. Deze heeft geen label. Ook wordt er niet doorgegeven aan hulpsoftware dat er suggesties worden getoond. Dit komt ook voor onder de Leden tab bij functies.

Random pagina 2 - reprowerkzaamheden

In de tekst staan 2 links met een plus-icoon ervoor. om meer content uit te klappen. Deze hebben als rol een h3-kop. Dit is geen correcte rol, en ook de waarde
(in- of uitgeklapt) wordt niet aangegeven. Maak hier bij voorkeur een button van en geef de waarde aan via het aria-expanded attribuut.

4.1.3: Statusberichten

Hele sample

Uitkomst: Voldoende

Sample met getoetste webpagina's

Startpagina - https://almere.embracecloud.nl/
Nieuwsoverzicht - https://almere.embracecloud.nl/umbraco/nieuws/
Nieuwsbericht vergoeding reiskosten fietsen - https://almere.embracecloud.nl/umbraco/nieuws/nieuwe-regels-vergoeding-reiskosten-fietsen/
Kalender - https://almere.embracecloud.nl/umbraco/kalender/
Kalender item informatieavond Hart van de Stad 2040 - https://almere.embracecloud.nl/umbraco/kalender/informatieve-avond-ontwikkelvisie-hart-van-de-stad-2040/
Weten en regelen - https://almere.embracecloud.nl/umbraco/weten-regelen/
Weten en regelen item Circulaire economie - https://almere.embracecloud.nl/umbraco/weten-regelen/circulaire-economie/
Zoekresultaten reizen - https://almere.embracecloud.nl/Search?q=reizen
Profielpagina medewerker (incl. tabs) - https://almere.embracecloud.nl/Profile/02RO0iGRpUC5GcC1_LRsQA
Groepspagina Communicatie & KCC (incl. tabs) - https://almere.embracecloud.nl/Project/CD
Groepspagina Almere Academie (video) - https://almere.embracecloud.nl/Project/AlmereAcademie
Instellingen - https://almere.embracecloud.nl/Settings
Profiel bewerken - https://almere.embracecloud.nl/Profile/Edit
Collega’s - https://almere.embracecloud.nl/Profiles
Random pagina 1 - vitale buurten maken de stad - https://almere.embracecloud.nl/umbraco/nieuws/vitale-buurten-maken-de-stad/
Random pagina 2 - reprowerkzaamheden - https://almere.embracecloud.nl/umbraco/weten-regelen/reprowerkzaamheden/

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,PDF

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek: Chrome versie 123 binnen Citrix werkplek op MacOS 13.6.6. Getest met instelling op hoog contrast en Chromevox extensie (OS screenreader werkt niet binnen Citrix).