Rapport:
Audit digitale toegankelijkheid website De Bouw App

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://debouw.app/onboarding/welcome staan onder de kop “Hoe wil je op de hoogte blijven?” twee afbeeldingen. Deze zijn toegevoegd met een img-element, maar het alt-attribuut ontbreekt. Een img-element moet altijd een alt-attribuut hebben. Alleen als de afbeelding decoratief is en geen betekenis overbrengt, mag het attribuut leeg blijven met alt=””. Als de afbeelding informatief is, moet het alt-attribuut een duidelijke beschrijving bevatten van wat er op de afbeelding te zien is.
Ditzelfde probleem is aanwezig op pagina https://debouw.app/feed bij het logo naast de tekst “de BouwApp”.

Op pagina https://debouw.app/projects/ikc-woubrugge in het tabblad “Over” onder “Over ons” staat een logo met de zichtbare tekst “Gemeente Kaag en Braassem”. In het tekstalternatief staat echter “Projectlogo”. De tekst op het logo komt niet overeen met de alternatieve tekst. Dit moet worden aangepast naar: “Logo Gemeente Kaag en Braassem”, zodat ook bezoekers die het logo niet kunnen zien, begrijpen wat er in het logo staat.
Ditzelfde probleem is aanwezig op pagina https://debouw.app/projects/spoorzone-ede in het tabblad “Over”, bij een logo met de zichtbare tekst “ede”; en op pagina https://debouw.app/projects/ikc-woubrugge in het tabblad “Over”.

Op pagina https://debouw.app/projects/ikc-woubrugge, onder het tabblad “Updates”, hebben afbeeldingen in berichten een alternatieve tekst zoals “Door gebruiker geüpload beeld” of “Door gebruiker geüpload PDF-bestand” wanneer het om een voorbeeldweergave van een PDF-bestand gaat. Deze alternatieve teksten geven onvoldoende informatie over de inhoud van de afbeelding. Afbeeldingen die informatie overbrengen, moeten een betekenisvolle alternatieve tekst hebben waarin de belangrijkste informatie uit de afbeelding wordt beschreven. Als een afbeelding decoratief is, moet het alt-attribuut leeg blijven met alt=””.

Op pagina https://debouw.app/projects/ikc-woubrugge, onder het tabblad “Updates”, bevatten berichten verschillende bijlagen met knoppen waarin pijltjes-iconen worden gebruikt. Deze iconen hebben geen tekstalternatief. Als een knop alleen uit een afbeelding bestaat, dan moet de alternatieve tekst van die afbeelding beschrijven wat de functie van de knop is, zoals “Volgende dia”. Als dit ontbreekt, is de functie van de knop niet duidelijk voor schermlezers. Dit kan worden opgelost door een beschrijving toe te voegen via een title-element in de SVG, een aria-label of visueel verborgen tekst die toegankelijk is voor hulpsoftware, zoals schermlezers.

Op pagina https://debouw.app/projects/ikc-woubrugge, onder het tabblad “Updates”, openen bijlagen in een dialoogvenster wanneer erop geklikt wordt. In dit venster hebben het sluit-icoon en het deel-icoon geen tekstalternatief. Daardoor is de functie van deze iconen niet toegankelijk voor schermlezers. Er moet een tekstalternatief worden toegevoegd zodat duidelijk is wat de functie van de knop is. Dit kan met een title-element in de SVG, een aria-label of tekst die visueel verborgen is maar toegankelijk is voor schermlezers.

Op pagina https://debouw.app/projects/ikc-woubrugge, in het tabblad “Updates”, staat in een bericht van 15 juni 2022 een complexe afbeelding met als alternatieve tekst “Door gebruiker geüpload beeld”. Deze tekst geeft geen beschrijving van de inhoud van de afbeelding. Omdat de afbeelding veel informatie bevat, kan deze informatie niet samengevat worden in de korte alternatieve tekst. Er moet een korte alternatieve tekst worden toegevoegd die verwijst naar een lange beschrijving. De uitgebreide beschrijving moet beschikbaar zijn op de pagina zelf, op een andere pagina of in een downloadbaar bestand.

Op pagina https://debouw.app/projects/veldkamp-borchert-in-denekamp, in het tabblad “Updates”, staat in een bericht van 7 november 2024 een complexe afbeelding met als alternatieve tekst “Door gebruiker geüpload beeld”. Ook in dit geval beschrijft de tekst de afbeelding niet. Voor complexe afbeeldingen moet een korte beschrijving worden gegeven in de alternatieve tekst, met daarin een verwijzing naar een lange beschrijving. De uitgebreide beschrijving moet beschikbaar worden gemaakt op de pagina, op een andere pagina of in een downloadbaar bestand.

In het PDF-document op https://cdn.debouwapp.nl/updateattachmentfile/67c0287f33b2b314520448.pdf, op pagina 2, staat een afbeelding van een handtekening die is getagd als figuur. De afbeelding heeft geen alternatieve tekst. Afbeeldingen die zijn toegevoegd met een figure-tag moeten altijd een alt-tekst bevatten. De figure-tag is bedoeld voor informatieve afbeeldingen. Zonder alt-tekst spreekt hulpsoftware alleen het woord “afbeelding” uit. Hierdoor krijgen blinde bezoekers niet de volledige informatie. Zorg dat een passende alt-tekst wordt toegevoegd aan deze afbeelding.

In het PDF-document op https://cdn.debouwapp.nl/updateattachmentfile/681207cc86006099992232.pdf, op pagina’s 3 tot en met 6, staan afbeeldingen die zijn getagd als figuur, maar er is geen alternatieve tekst toegevoegd. Als deze afbeeldingen informatief zijn, moet aan de figure-tag een alt-tekst worden toegevoegd die beschrijft wat er op de afbeelding te zien is. Als de afbeeldingen decoratief zijn, moeten ze als artefact worden getagd zodat ze niet worden voorgelezen door hulpsoftware.

In het PDF-document op https://cdn.debouwapp.nl/updateattachmentfile/67c0287f33b2b314520448.pdf, op pagina 1, staat een logo dat is gemarkeerd als artefact. Afbeeldingen die als artefact zijn gemarkeerd, worden niet weergegeven door hulpsoftware. Daardoor is de informatie in deze afbeelding niet toegankelijk voor bezoekers die gebruikmaken van voorleessoftware. Als het logo informatief is, moet het worden gemarkeerd met een figure-tag en voorzien zijn van een alt-tekst die duidelijk beschrijft wat er in het logo staat.

In het PDF-document op https://cdn.debouwapp.nl/updateattachmentfile/681207cc86006099992232.pdf, op pagina 1, staat eveneens een logo dat als artefact is gemarkeerd. Ook hier geldt dat de afbeelding niet toegankelijk is voor bezoekers die hulpsoftware gebruiken. Als het logo informatief is, moet het worden getagd als figuur en van een alt-tekst worden voorzien waarin de inhoud van het logo wordt beschreven.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://debouw.app/onboarding/address/create, onder “Markeer het gebied dat je wilt volgen.” zijn teksten zoals “Grimburgwal: vervangen kademuren en bruggen” en “Vernieuwen brug 215 (Paulusbroedersluis)” ten onrechte gemarkeerd met een h2-element. Deze teksten functioneren niet als koppen, omdat er geen bijbehorende inhoud onder staat. Het h2-element is hier gebruikt om het lettertype te vergroten, maar geeft ten onrechte een semantische betekenis aan de tekst. Koppen (h1-h6) moeten uitsluitend worden gebruikt om structuur aan te brengen in de inhoud van de pagina. Bezoekers die hulpsoftware gebruiken, vertrouwen op deze structuur om de pagina te begrijpen. Vervang het h2-element door een p-element en gebruik CSS om de gewenste opmaak toe te passen.

Op pagina https://debouw.app/onboarding/search verschijnt een dialoogvenster wanneer op de plusknop bij een zoekresultaat wordt geklikt. In dit venster staat de tekst “In welke doelgroep valt u?” die niet als kop is gemarkeerd. Bezoekers die hulpsoftware gebruiken, kunnen daardoor de structuur van het venster niet goed begrijpen of snel navigeren. Zet deze tekst om in een kop (bijvoorbeeld h1 of h2), zodat deze ook technisch als kop functioneert.

Op pagina https://debouw.app/projects/ikc-woubrugge, in het tabblad “Updates”, verschijnt een dialoogvenster wanneer op de knop “Filteren” wordt geklikt. In dit venster is de tekst “Filteren” niet gemarkeerd als een kop. Voor bezoekers die hulpsoftware gebruiken, is het essentieel dat koppen ook technisch als kop worden aangeduid. Dit zorgt voor een duidelijke structuur en maakt navigatie binnen de inhoud mogelijk. Zet deze tekst daarom om in een kop (h1-h6).

Op pagina https://debouw.app/feed staan teksten zoals “de BouwApp”, “Spoorzone Ede” en “Herinrichting A.C. de Graafweg (N241)” die niet als kop zijn gemarkeerd. Voor bezoekers die hulpsoftware gebruiken, is het belangrijk dat kopteksten ook als echte koppen (h1-h6) zijn aangeduid. Koppen geven structuur aan de inhoud en maken het mogelijk om snel door de pagina te navigeren. Zet deze teksten om in een kop (h1-h6) zodat ook schermlezers deze informatie als kop kunnen interpreteren.

Op pagina https://debouw.app/projects/ikc-woubrugge, in het tabblad “Planning”, is de tekst “Participatiebijeenkomst woningbouw Emmalaan” niet als kop is gemarkeerd. Ook hier is het belangrijk dat de tekst wordt gemarkeerd als een kop (h1-h6), zodat hulpsoftware de structuur van de pagina correct kan overbrengen.

Op pagina https://debouw.app/onboarding/search verschijnt een dialoogvenster wanneer op de plusknop bij een zoekresultaat wordt geklikt. In dit venster staat een groep knoppen die visueel bij elkaar hoort. Deze groepering wordt echter niet weerspiegeld in de HTML-structuur. Als voor ziende bezoekers duidelijk is dat de knoppen een samenhangende groep vormen, moet deze relatie ook in de code worden aangegeven. Gebruik een ul-element of nav-element om de knoppen logisch te groeperen, zodat deze structuur ook toegankelijk is voor bezoekers die hulpsoftware gebruiken.
Een vergelijkbaar probleem komt voor op pagina https://debouw.app/projects/ikc-woubrugge. Hier verschijnt een dialoogvenster wanneer op de knop “Filteren” wordt geklikt.

Op projectpagina’s zoals https://debouw.app/projects/ikc-woubrugge, in het tabblad “Contact”, staat een formulier. In dit formulier verschijnt de foutmelding “Deze waarde mag niet leeg zijn.” wanneer een verplicht veld niet is ingevuld. Hulpsoftware die in formuliermodus werkt, slaat de inhoud tussen invoervelden over. Daardoor kan de foutmelding onopgemerkt blijven. De relatie tussen het invoerveld en de foutmelding is niet vastgelegd in de code. Hierdoor kan de foutmelding niet worden aangekondigd door hulpsoftware. Dit kan worden opgelost door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

Op pagina https://debouw.app/projects/spoorzone-ede, in het tabblad “Feedback”, staat een groep knoppen waarmee de gebruikservaring kan worden beoordeeld. De actieve knop heeft een afwijkende visuele stijl, maar deze visuele informatie is niet terug te vinden in de code. Bezoekers die hulpsoftware gebruiken, hebben daardoor geen toegang tot deze informatie. Zorg voor een alternatieve manier om deze status over te dragen, zodat ook slechtziende of blinde bezoekers dit kunnen begrijpen. Voeg bijvoorbeeld het attribuut aria-current="true" toe aan de actieve knop. Ook kan het attribuut aria-pressed worden toegevoegd, met de waarde “true” voor de actieve knop en “false” voor de overige knoppen. Andere oplossingen zijn ook mogelijk.

Op pagina https://debouw.app/projects/ikc-woubrugge is in het tabblad “Updates” een rood stip-icoon te zien wanneer er ongelezen updates zijn. Dit is visuele informatie die niet beschikbaar is voor hulpsoftware, zoals schermlezers. Zorg dat deze informatie ook aanwezig is in de code, bijvoorbeeld met een visueel onzichtbare tekst.

Op pagina https://debouw.app/projects/ikc-woubrugge, in het tabblad “Updates”, wordt het strong-element onjuist gebruikt voor opmaakdoeleinden. In het bericht van 28 maart 2025 is de zin “Kom naar de themamarkt in Woubrugge en Hoogmade op 16 april!” volledig omgeven door een strong-element om de tekst vetgedrukt weer te geven. Dit gebeurt ook in het bericht van 17 oktober 2024 met de zin “Gemeente en kindpartners kiezen architect voor IKC Woubrugge.” en in andere berichten op deze pagina. Het strong-element heeft een semantische betekenis en geeft aan dat de inhoud extra nadruk verdient. Het mag niet worden gebruikt puur om tekst visueel vet te maken. Gebruik hiervoor CSS.

Op pagina https://debouw.app/projects/spoorzone-ede zijn teksten zoals “Wat gebeurt er op de bouwplaats van de nieuwe P+R-garage?”, “Let op: tijdelijke afsluiting voetpad tussen Akulaan/Klinkenbergerweg en het station” en “Werkzaamheden aan de P+R-garage worden zichtbaar” gemarkeerd met een strong-element in plaats van als een kop. Het strong-element is bedoeld om nadruk te geven aan woorden of zinsdelen, maar niet om structuur aan te brengen in een pagina. Koppen moeten worden gemarkeerd als een kop, zoals h2, zodat hulpsoftware de structuur van de inhoud correct kan overbrengen. Pas de opmaak aan door deze teksten te markeren met een passende kop (bijvoorbeeld h2).

Op pagina https://debouw.app/about-app is de tekst “Hallo gebruiker van de BouwApp,” opgemaakt met een strong-element in plaats van als een kop. Omdat deze tekst de functie van kop vervult, moet deze worden gemarkeerd als een kop (h1-h6), zodat bezoekers die hulpsoftware gebruiken de inhoud goed kunnen interpreteren.

Op pagina https://debouw.app/projects/ikc-woubrugge, in het tabblad “Updates”, staan onder de berichten knoppen zoals “vind ik leuk” en “vind ik niet leuk”. Het aantal reacties wordt per knop weergegeven met een teller, maar deze informatie is niet toegankelijk voor hulpsoftware. De teller staat in de knop met een aria-label-attribuut dat niet automatisch wordt bijgewerkt. Hierdoor krijgen bezoekers die hulpsoftware gebruiken geen inzicht in het aantal reacties. Overweeg om het element met de teller buiten de knop te plaatsen of het aria-label van de knop dynamisch te updaten, zodat de informatie over het aantal reacties beschikbaar wordt voor hulpsoftware.

In het PDF-document op https://cdn.debouwapp.nl/updateattachmentfile/67c0287f33b2b314520448.pdf is de tagstructuur onvolledig. Op pagina 1 zijn het adresblok en de tekst in de footer, zoals “Bilderdam” en “Hoogmade”, niet getagd. Deze onderdelen van het document kunnen daardoor niet worden gelezen door hulpsoftware. Hierdoor kunnen succescriteria die betrekking hebben op de PDF-codelaag, zoals semantische koppen en alternatieve teksten, niet worden beoordeeld. Als dit probleem wordt opgelost, kunnen andere toegankelijkheidsproblemen zichtbaar worden, bijvoorbeeld met tekstlabels voor formuliervelden of de relatie tussen formuliervelden en de kolomkoppen erboven.

In het PDF-document op https://cdn.debouwapp.nl/updateattachmentfile/67c0287f33b2b314520448.pdf is op pagina 1 een datatabel gebruikt om tekst in kolommen weer te geven. Voor dit doeleinde mag geen datatabel worden toegepast. In deze situatie zijn tags gebruikt die bedoeld zijn voor een datatabel, zoals th-tags. Deze tags horen alleen te worden toegepast als er een inhoudelijke relatie bestaat tussen rijen en kolommen. In een lay-outtabel leidt het gebruik van th-tags tot verwarring voor blinde bezoekers, omdat hulpsoftware ervan uitgaat dat de structuur betekenisvol is.

In het PDF-document op https://cdn.debouwapp.nl/updateattachmentfile/681207cc86006099992232.pdf, op pagina 1 onder “Aanwezigen”, staat een tabel zonder dat de structuur als tabel is gemarkeerd. Omdat de tabelmarkering ontbreekt, kan hulpsoftware de relatie tussen kolommen en rijen niet herkennen. Hierdoor is de inhoud niet toegankelijk voor bezoekers die gebruikmaken van hulpsoftware. Markeer de structuur als een tabel, zodat de relatie tussen de cellen duidelijk is.

In het PDF-document op https://cdn.debouwapp.nl/updateattachmentfile/67c0287f33b2b314520448.pdf zijn meerdere teksten visueel als kop opgemaakt, maar niet als kop getagd. Voorbeelden hiervan zijn “Wat gaan we doen?” en “Hoe is het ontwerp tot stand gekomen?”. Omdat deze teksten zijn gemarkeerd met een P-tag in plaats van een H-tag, komt de tagstructuur niet overeen met de visuele structuur van het document. Pas deze P-tags aan naar H-tags, zodat de structuur ook semantisch correct is.

In het PDF-document op https://cdn.debouwapp.nl/updateattachmentfile/681207cc86006099992232.pdf is hetzelfde probleem aanwezig. Teksten zoals “Verslag vergadering”, “Aanwezigen” en “Verslag:” zijn visueel als kop opgemaakt, maar niet als kop getagd. Hierdoor is de documentstructuur voor hulpsoftware niet juist. Zorg dat deze teksten met H-tags worden gemarkeerd, zodat de semantische structuur van het document aansluit bij de visuele opmaak.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://debouw.app/onboarding/search staat de HTML-structuur van de zoekresultaten-items in een onlogische volgorde. De afbeelding staat in de code boven de kop, gevolgd door de tekst. Hierdoor is het voor schermlezers niet duidelijk welke afbeelding en welke datum bij welk artikel horen, omdat de kop niet als eerste wordt voorgelezen. Dit kan verwarring veroorzaken bij bezoekers die hulpsoftware gebruiken. Om dit probleem op te lossen, moet in de HTML-structuur alle inhoud die bij een bepaalde kop hoort — zoals de afbeelding en de tekst — onder de kop worden geplaatst. Zo ontstaat er een logische en toegankelijke structuur. De visuele weergave van de pagina hoeft niet te worden aangepast, deze kan via CSS behouden blijven. Een alternatieve oplossing is om de afbeeldingen als decoratief te markeren door het alt-attribuut leeg te laten (alt=””). In dat geval wordt de afbeelding niet voorgelezen en volgt de schermlezer de structuur: koptekst – inhoud.
Op pagina https://debouw.app/projects, in de lijst met projecten, doet zich hetzelfde probleem voor. Ook hier staat de afbeelding in de HTML-structuur boven de kop, wat de volgorde waarin de informatie wordt voorgelezen verwarrend maakt voor bezoekers die hulpsoftware gebruiken. Pas de structuur aan zodat de kop het eerste element is binnen een project-item en de afbeelding en overige inhoud daaronder worden geplaatst.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op projectpagina’s zoals https://debouw.app/projects/ikc-woubrugge, in het tabblad “Contact”, bevat het formulier een invoerveld voor persoonlijke gegevens, zoals de naam. Dit invoerveld heeft geen attribuut autocomplete. Invoervelden waarin persoonlijke informatie wordt gevraagd, zoals een naam, e-mailadres of telefoonnummer, moeten dit attribuut bevatten. Dit maakt het mogelijk voor browsers en hulpsoftware om gegevens automatisch aan te vullen, wat de toegankelijkheid en het gebruiksgemak verbetert. Gebruik het attribuut autocomplete in alle relevante velden. Voor de naam moet bijvoorbeeld autocomplete=“name” worden toegepast. Meer informatie over het gebruik van autocomplete en de juiste waarden is te vinden op https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Op pagina https://debouw.app/login ontbreekt het attribuut autocomplete bij het invoerveld “E-mailadres”. Hier moet autocomplete=“email” worden toegevoegd, zodat bezoekers sneller en eenvoudiger hun gegevens kunnen invullen met hulp van automatische aanvulopties.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://debouw.app/onboarding/search verschijnt een dialoogvenster wanneer een bezoeker op een “+”-knop klikt. In dit venster staan knoppen onder de kop “In welke doelgroep valt u?” die gebruikmaken van een aangepaste focusindicator. Deze focus wordt alleen aangeduid door een verandering in de achtergrondkleur. De contrastratio tussen de gefocuste en niet-gefocuste staat van deze achtergrondkleur of randkleur is echter lager dan 3,0:1. Hierdoor is de verandering niet goed zichtbaar voor bezoekers met een visuele beperking of kleurenblindheid. Ook voor bezoekers die met het toetsenbord navigeren, is een duidelijke focusindicator noodzakelijk om te kunnen zien waar de focus zich bevindt op de pagina. Voeg daarom een extra visueel kenmerk toe aan de focus, zoals een dikkere rand, onderstreping of een opvallende achtergrondkleur met voldoende contrastratio, zodat de focus voor iedereen waarneembaar is.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de hele website worden combinaties gebruikt van de oranje kleur (HEX #F6B03E) op een witte of grijze achtergrond (HEX #F3F1EF en HEX #F9F6F2). De contrastratio tussen deze kleuren ligt tussen 1,7:1 en 1,9:1. Dit voldoet niet aan de minimale vereisten van 4,5:1 voor normale tekst en 3,0:1 voor grote tekst. Voorbeelden zijn de link “Overslaan” op pagina https://debouw.app/onboarding/welcome, de knoppen “Projecten toevoegen” en “Bekijk project” en de tekst “Aangeraden project” op pagina https://debouw.app/feed, de link “www.debouwapp.nl” op pagina https://debouw.app/about-app, de knop “Volgen” en het geselecteerde tabblad “Overzicht” op pagina https://debouw.app/projects/ikc-woubrugge, en andere elementen. Omdat de tekst kleiner is dan 24 pixels en niet vetgedrukt is, moet de contrastratio minimaal 4,5:1 zijn. De huidige combinatie voldoet hier niet aan, waardoor de leesbaarheid voor bezoekers met een visuele beperking of kleurenblindheid onvoldoende is.

Op pagina https://debouw.app/onboarding/search verschijnt een dialoogvenster wanneer een bezoeker op een “+”-knop klikt. In dit venster verandert de tekstkleur van de knoppen wanneer de muisaanwijzer boven een knop wordt gehouden. De tekst wordt dan oranje weergegeven op een bijna witte achtergrond. De contrastratio in deze hovertoestand is 2,0:1. Tekst van informatieve elementen zoals knoppen en links moet altijd voldoende contrast hebben, ook wanneer het element toetsenbordfocus krijgt of wanneer de bezoeker er met de muis overheen beweegt. De minimale contrastratio moet 4,5:1 zijn om goed leesbaar te zijn voor bezoekers met een visuele beperking.

Op pagina https://debouw.app/onboarding/search verschijnt een dialoogvenster wanneer een bezoeker op een “+”-knop klikt. In dit venster heeft de knop “Annuleren” rode tekst (HEX #FD5547) op een bijna witte achtergrond (HEX #F3F1EF). De contrastratio van deze combinatie is 2,8:1, en in de gefocuste toestand daalt deze tot 2,7:1. Dit is onvoldoende, want de minimale vereiste contrastratio voor tekst is 4,5:1.
Hetzelfde probleem komt voor op pagina https://debouw.app/projects/ikc-woubrugge, in het tabblad “Updates”, bij de knop “Filteren”.

Op pagina https://debouw.app/projects/spoorzone-ede, in het tabblad “Feedback”, verschijnt de link “Verder met onderzoek” zodra een optie is gekozen. Deze link heeft blauwe tekst (HEX #3372EA) op een witte achtergrond. De contrastratio van deze combinatie is 4,4:1. Dit is lager dan de vereiste minimale contrastratio van 4,5:1 voor normale tekst.

In het PDF-document op https://cdn.debouwapp.nl/updateattachmentfile/67c0287f33b2b314520448.pdf staat groene tekst (HEX #9CBF33), zoals “Bezoekadres” en “Postadres”, op een witte achtergrond. De contrastratio van deze combinatie is 2,1:1. Dit voldoet niet aan de minimale eisen voor kleurcontrast. Voor tekst met een lettergrootte tot 18 pt die niet vetgedrukt is, moet de contrastratio minimaal 4,5:1 zijn. Voor grotere of vetgedrukte tekst is minimaal 3,0:1 vereist. De huidige kleurcombinatie maakt de tekst slecht leesbaar voor bezoekers met een visuele beperking. Pas het kleurgebruik aan zodat de tekst voldoende contrast heeft met de achtergrond.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de hele website wordt de oranje kleur (HEX #F6B03E) gebruikt op een witte achtergrond (HEX #F3F1EF of HEX #FFFFFF) voor iconen en andere grafische elementen. De contrastratio van deze combinatie ligt tussen 1,7:1 en 1,9:1. Dit is onvoldoende voor grafische elementen die betekenis of functie overbrengen. Voorbeelden hiervan zijn het huis-icoon in het onderste menu op pagina https://debouw.app/feed, dat de huidige tab aanduidt, en het zoekicoon in de knop op pagina https://debouw.app/onboarding/search. De minimale vereiste contrastratio voor informatieve of interactieve grafische elementen is 3,0:1. Pas het kleurgebruik van deze iconen aan, zodat ze voldoende contrast hebben en goed zichtbaar zijn voor bezoekers met een visuele beperking.

Op pagina https://debouw.app/onboarding/search verschijnt een dialoogvenster wanneer een bezoeker op een “+”-knop klikt. In dit venster hebben de knoppen een aangepaste focusindicator: een grijze rand (HEX #DFDFDF) op een witte achtergrond (HEX #F9F9F9). De contrastratio is 1,3:1 en voldoet niet aan de minimale vereiste van 3,0:1 voor aangepaste focusstijlen. Omdat op de site niet de standaard browserfocus wordt gebruikt, moet de aangepaste focusindicator voldoen aan de WCAG-eisen. Zorg dat de focusstijl een contrastratio van ten minste 3,0:1 heeft, zodat bezoekers die met het toetsenbord navigeren goed kunnen zien welk element de focus heeft.

Op pagina https://debouw.app/projects/ikc-woubrugge, in het tabblad “Updates”, verschijnt een dialoogvenster wanneer op de knop “Filteren” wordt geklikt. De knoppen in dit venster hebben eveneens een aangepaste focusindicator met onvoldoende contrast.
Ook op pagina https://debouw.app/feed is de zichtbaarheid van de toetsenbordfocus onvoldoende bij de knoppen in het onderste menu. De focusindicator moet worden aangepast zodat deze een contrastratio van minimaal 3,0:1 heeft.

Op pagina’s met navigatie, zoals https://debouw.app/search, staat onderaan een groep knoppen met iconen. Deze gebruiken een aangepaste focusindicator met een grijze rand (HEX #E0E0E0) op een witte achtergrond (HEX #FFFFFF). De contrastratio van 1,3:1 is onvoldoende. Voor aangepaste focusstijlen is een minimale contrastratio van 3,0:1 vereist om de zichtbaarheid te waarborgen.

Op pagina https://debouw.app/feed gebruiken de knoppen in het bovenste menu, zoals voor filters en meldingen, een aangepaste focusindicator. Deze wordt weergegeven met een lichtoranje rand (HEX #F2EADE) op een lichtgrijze achtergrond (HEX #F3F1EF). De contrastratio van 1,1:1 is ver onder de vereiste 3,0:1. Pas de focusindicator aan zodat deze goed zichtbaar is voor bezoekers met een visuele beperking.

Op pagina https://debouw.app/projects/ikc-woubrugge, in het tabblad “Updates”, staat onder elk bericht een groep iconen. De oranje hart-icoon (HEX #F6B048) en de groene lamp-icoon (HEX #48DA15) worden getoond op een witte achtergrond. De contrastratio van deze iconen is 1,9:1, wat niet voldoet aan de vereiste contrastratio van 3,0:1 voor informatieve grafische elementen. Zorg dat deze iconen worden aangepast zodat ze voldoende zichtbaar zijn.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://debouw.app/onboarding/welcome, onder de kop “Hoe wil je op de hoogte blijven?”, zijn de knoppen “Volg een gebied…” en “Volg specifieke projecten…” niet toegankelijk via het toetsenbord. Deze knoppen kunnen niet worden geactiveerd met de spatiebalk of de Enter-toets. Voor bezoekers die zonder muis navigeren, is het noodzakelijk dat interactieve elementen volledig toetsenbordtoegankelijk zijn. Zorg dat deze knoppen geactiveerd kunnen worden met zowel de spatiebalk als de Enter-toets. Alleen dan zijn ze goed bruikbaar voor iedereen die via het toetsenbord navigeert.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://debouw.app/onboarding/address/create verschijnt onderaan de pagina de melding “We konden je locatie niet ophalen” wanneer de locatie niet beschikbaar is. Deze melding verdwijnt automatisch na korte tijd. Daardoor hebben sommige bezoekers, zoals mensen met een cognitieve beperking of die gebruikmaken van hulpsoftware, niet genoeg tijd om de boodschap rustig te lezen of erop te reageren. Dit kan worden opgelost door een mechanisme toe te voegen waarmee de tijdslimiet verlengd of verwijderd kan worden. De tijdslimiet mag maximaal 20 uur bedragen, zodat alle bezoekers voldoende gelegenheid hebben om het bericht te verwerken.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s van de website, zoals https://debouw.app/onboarding/welcome en https://debouw.app/search, staat dezelfde tekst in het title-element: “de BouwApp”. Dit is niet correct. Elke pagina moet een unieke tekst in het title-element hebben die de inhoud van die specifieke pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie.
Als meerdere pagina’s dezelfde title-tekst hebben, kan dit verwarrend zijn voor bezoekers. Het maakt navigatie moeilijker, vooral voor gebruikers van hulpsoftware of bij het gebruik van tabbladen in de browser. Pas daarom de tekst in het title-element aan, zodat elke pagina een unieke en beschrijvende titel heeft die de inhoud van die pagina duidelijk weergeeft.

In het PDF-document op https://cdn.debouwapp.nl/updateattachmentfile/681207cc86006099992232.pdf is geen titel ingesteld in de bestandseigenschappen. Zelfs als er op de eerste pagina van het document een visuele titel aanwezig is, moet er ook in de PDF-instellingen een documenttitel worden vastgelegd. Wanneer een PDF wordt geopend in een PDF-lezer, zoals Adobe Acrobat of een browser, wordt standaard de bestandsnaam getoond in de titelbalk, bijvoorbeeld document123.pdf. Als er echter een documenttitel is ingesteld in de metadata, dan wordt die weergegeven in plaats van de bestandsnaam. Dit verhoogt de toegankelijkheid van het document, omdat bezoekers — ook met een beperking — sneller kunnen beoordelen of het document relevant is. Stel daarom een duidelijke en beschrijvende titel in via de bestandseigenschappen van het bronbestand of rechtstreeks in het PDF-document.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://debouw.app/onboarding/search staat onder de kaart een lijst met elementen die niet interactief zijn, maar toch zijn voorzien van tabindex=“0”. Hierdoor kunnen deze elementen onnodig worden bereikt met de Tab-toets, wat leidt tot verwarring en een inefficiënte toetsenbordnavigatie. Ook bevindt de link “Volgende” in de header zich in een container die niet interactief is, maar wel een tabindex=“0” heeft. Hierdoor kan de focus daar dubbel naartoe gaan. Alleen elementen die interactief zijn, mogen toetsenbordfocus krijgen. Verwijder tabindex=“0” van elementen die geen interactie vereisen, zodat de navigatie logisch en vloeiend blijft voor bezoekers die met het toetsenbord navigeren.

Op pagina https://debouw.app/onboarding/search verloopt de toetsenbordnavigatie niet volgens de visuele structuur. Na de header springt de focus direct naar de zoekresultaten in plaats van naar de zoekbalk, terwijl de zoekbalk visueel bovenaan staat en als eerste verwacht wordt. Voor bezoekers die afhankelijk zijn van het toetsenbord is een voorspelbare en logische volgorde van de focus cruciaal. Zorg dat de toetsenbordfocus na de header direct naar de zoekbalk gaat, zodat dit overeenkomt met de visuele opbouw van de pagina en de inhoud beter te begrijpen is.

Op pagina’s met navigatie, zoals https://debouw.app/search, bevindt zich onderaan een groep tabbladen. Wanneer een bezoeker via een link in deze navigatie een nieuwe pagina opent, blijft de focus staan op de volgende link in de navigatiebalk. Hierdoor lijkt het alsof er niets is veranderd of wordt belangrijke nieuwe inhoud gemist. Dit is verwarrend voor bezoekers die met het toetsenbord navigeren. Zorg dat bij het laden van een nieuwe pagina de toetsenbordfocus programmatig wordt verplaatst naar een logisch startpunt in de nieuwe inhoud, zoals de eerste kop of het gebied met de hoofdinhoud. Zo blijft de navigatie voorspelbaar en toegankelijk.

Op projectpagina’s zoals https://debouw.app/projects/ikc-woubrugge worden tabbladen gebruikt, zoals “Overzicht”, om verschillende delen van de inhoud te tonen. Elk tabblad bestaat uit een tablink en een bijbehorend tabpaneel waarvan er steeds één zichtbaar is. De toetsenbordnavigatie binnen deze tabinterface werkt echter niet zoals verwacht. Wanneer een bezoeker met het toetsenbord een tab activeert, wordt de juiste inhoud getoond, maar blijft de focus op het tabblad zelf of springt naar het volgende tabblad. Dit wijkt af van de richtlijnen voor toegankelijke tabinterfaces. Volgens de richtlijnen van WAI-ARIA (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) moet de toetsenbordfocus bij activatie van een tabblad automatisch verplaatst worden naar het eerste interactieve of inhoudelijke element in het zichtbare tabpaneel. Pas de focusvolgorde aan zodat deze logisch en voorspelbaar is voor bezoekers die hulpsoftware of het toetsenbord gebruiken.

Op pagina https://debouw.app/projects/ikc-woubrugge, in het tabblad “Contact”, staat een formulier. Wanneer dit formulier met lege of onjuiste gegevens wordt verzonden, verschijnen foutmeldingen zonder dat de pagina opnieuw wordt geladen. De toetsenbordfocus wordt dan niet automatisch naar de eerste foutmelding verplaatst. Voor bezoekers die met het toetsenbord navigeren is het daardoor lastig om de fout snel te vinden en te corrigeren. Zorg dat de focus bij een fout direct wordt verplaatst naar de eerste foutmelding, zodat de bezoeker onmiddellijk weet waar het probleem zit en de invoer eenvoudig kan aanpassen.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op deze website is geen tweede manier aangeboden om alle pagina’s te vinden.
Op pagina https://debouw.app/onboarding/search staat een zoekveld. Echter niet alle pagina’s kunnen via dit zoekveld worden gevonden. Alle pagina’s van de website moeten via meerdere manieren gevonden kunnen worden. Dat mag via een zoekveld, een sitemap of een inhoudsopgave.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://debouw.app/404 geeft de kop “404” onvoldoende informatie over de inhoud van de pagina. Deze kop biedt geen duidelijke context voor bezoekers, vooral niet voor degenen die schermlezers gebruiken. Schermlezergebruikers laten vaak alleen de koppen op een pagina voorlezen om de structuur en inhoud snel te begrijpen. Een algemene aanduiding zoals “404” is daarom niet voldoende. Vervang deze kop door een specifieke en beschrijvende kop, zoals “Pagina niet gevonden”, zodat duidelijk wordt wat voor soort pagina is geopend.

Op pagina https://debouw.app/onboarding/search staan meerdere knoppen met het label “+” en de toegankelijke naam “Project volgen”. Deze knoppen voeren verschillende acties uit, maar hebben toch dezelfde naam. Voor bezoekers die schermlezers gebruiken is het niet duidelijk welke actie met welke knop wordt uitgevoerd. Zorg dat de knoptekst past bij de specifieke functie van de knop, zodat elk uniek doel ook een unieke toegankelijke naam krijgt.
Op pagina https://debouw.app/projects doet zich hetzelfde probleem voor in een lijst van projecten. Ook hier hebben meerdere knoppen met verschillende functies dezelfde toegankelijke naam. Pas de namen aan, zodat bezoekers met hulpsoftware duidelijk kunnen onderscheiden wat elke knop doet.

Op pagina https://debouw.app/projects/ikc-woubrugge, in het tabblad “Updates”, staan knoppen met dezelfde toegankelijke naam “PDF openen”, terwijl deze knoppen verschillende bestanden openen. Hetzelfde geldt voor de knoppen “Lees meer”, “Delen” en de reactieknoppen zoals “Leuk”, “Geweldig” en “Goed idee”. Voor bezoekers die hulpsoftware gebruiken, is niet duidelijk welk bestand of bericht met welke knop wordt geopend of gedeeld. Voeg aan elke knop een unieke toegankelijke naam toe waarin het doel of de context van de actie wordt benoemd, bijvoorbeeld “PDF openen: nieuwsbrief juni” of “Lees meer over bericht van 12 mei”.

Op pagina https://debouw.app/feed is hetzelfde probleem zichtbaar bij knoppen met gelijke toegankelijke namen, terwijl ze betrekking hebben op verschillende berichten of functies. Ook hier is het noodzakelijk dat de namen worden aangepast aan de specifieke actie of inhoud die erbij hoort.

Op pagina https://debouw.app/projects/ikc-woubrugge, onder het tabblad “Updates”, staan berichten met bijlagen waarbij knoppen dezelfde toegankelijke naam “Open in galerij” hebben. Bezoekers die hulpsoftware gebruiken, kunnen niet onderscheiden welke knop bij welke afbeelding of bijlage hoort. Zorg dat de knopteksten specifiek maken welke galerij wordt geopend, bijvoorbeeld “Open galerij: werkzaamheden schoolplein”.
Op pagina https://debouw.app/projects/spoorzone-ede, in het tabblad “Over”, staan onder de koppen “Overzichtskaarten”, “Impressies” en “Bewonersbrieven” downloadknoppen met dezelfde toegankelijke naam “Downloaden”. Voor een goede toegankelijkheid moet elke knop een beschrijving bevatten van het specifieke bestand dat wordt gedownload, bijvoorbeeld “Download bewonersbrief juni 2023”.

Op pagina https://debouw.app/projects/spoorzone-ede, in het tabblad “Feedback”, staat een groep knoppen waarmee de gebruikservaring kan worden beoordeeld. De knoppen zijn genummerd met “1”, “2”, “3” enzovoort, maar deze aanduidingen geven geen betekenis aan de functie. Voor blinde bezoekers is het daardoor niet duidelijk wat elke knop doet. Voeg beschrijvende tekst toe aan elke knop, zoals “Beoordeling 1 ster: zeer ontevreden” of “Beoordeling 5 sterren: zeer tevreden”, zodat ook bezoekers die schermlezers gebruiken de betekenis begrijpen.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://debouw.app/feed, onder de kop “Voorgestelde projecten”, staan artikelen in het Duits, zoals “Wallstraßenbrücke/Blaubeurer Tor-Tunnel” en “Gänstorbrücke”. Deze teksten worden weergegeven in het Duits, maar zijn niet voorzien van een taalcode. Hierdoor worden ze door schermlezers uitgesproken volgens de uitspraakregels van het Nederlands, de hoofdtaal van de pagina. Dit leidt tot onduidelijke of verkeerde uitspraak. Voeg een lokaal lang-attribuut toe aan het element dat deze Duitstalige tekst bevat, bijvoorbeeld lang=“de”, zodat schermlezers correct kunnen overschakelen naar de juiste uitspraakregels.

Op pagina https://debouw.app/settings staan links in het Engels, zoals “End User License Agreement” en “Privacy Statement”, maar ook hier ontbreekt het lang-attribuut. Deze teksten worden uitgesproken als Nederlands, wat verwarring kan opleveren voor bezoekers die hulpsoftware gebruiken. Voeg ook hier een lokaal lang-attribuut toe, zoals lang=“en”, aan het element waarin de Engelstalige tekst staat.

Op veel pagina’s van de website, zoals https://debouw.app/onboarding/address/create, heeft de terugknop een toegankelijke naam in het Engels, zoals “back”. Deze aria-labels worden voorgelezen volgens de uitspraakregels van de primaire taal van de pagina, namelijk Nederlands. Dit zorgt voor een incorrecte uitspraak. Vertaal deze aria-labels naar het Nederlands, bijvoorbeeld naar “terug”, zodat schermlezers de knop correct kunnen uitspreken en de functie ervan duidelijk is voor Nederlandstalige bezoekers.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op projectpagina’s zoals https://debouw.app/projects/ikc-woubrugge staat in het tabblad “Contact” een formulier. De foutmelding in dit formulier toont de tekst “Deze waarde mag niet leeg zijn.” Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: “Het veld is niet (goed) ingevuld”.

Uitkomst: Onvoldoende

Bevindingen: Op projectpagina’s zoals https://debouw.app/projects/ikc-woubrugge staat in het tabblad “Contact” een formulier waar bij de verplichte velden een asterisk "*" wordt getoond. Nergens binnen het formulier staat vermeld dat dit betekent dat dit veld verplicht is. Plaats een melding bovenaan, binnen het formulier, bijvoorbeeld: "Velden met een sterretje (*) zijn verplicht".

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://debouw.app/onboarding/search staan in de zoekresultaten knoppen met een “+”-icoon in een div-element dat het attribuut aria-disabled=“true” bevat. Deze knoppen zijn echter niet uitgeschakeld. Voor schermlezers lijkt het daardoor alsof de knop niet werkt, wat verwarrend is. Verwijder het attribuut aria-disabled=“true” uit het bovenliggende div-element als het element daadwerkelijk interactief is. Zo wordt de knop correct geïnterpreteerd door hulpsoftware.

Op pagina’s met navigatie, zoals https://debouw.app/search, bestaat de onderliggende navigatie uit tabs die als links functioneren en naar andere pagina’s leiden. Dit gebruik van het tablist-patroon is onjuist. Een tabbalk is bedoeld voor het wisselen van inhoud op dezelfde pagina. Voor navigatie tussen pagina’s moeten standaard a-elementen met href-attributen worden gebruikt. Gebruik daarbij ook aria-current=“page” om aan te geven welke pagina actief is. Dit zorgt voor heldere en toegankelijke hoofd­navigatie.

Op pagina https://debouw.app/onboarding/search staan niet-interactieve elementen in de zoekresultaten die onterecht de rol link hebben. Hierdoor denken schermlezers dat het om links gaat, terwijl deze elementen niet aanklikbaar zijn. Dit leidt tot verwarring en frustratie bij bezoekers die hulpsoftware gebruiken. Verwijder de rol link uit elementen die geen linkfunctie vervullen.
Op pagina https://debouw.app/onboarding/address/create doet zich hetzelfde probleem voor. Ook daar zijn niet-interactieve elementen ten onrechte gemarkeerd met de rol link. Zorg dat deze rol alleen wordt toegepast op elementen die daadwerkelijk als link functioneren.

Op projectpagina’s zoals https://debouw.app/projects/ikc-woubrugge worden tabs gebruikt, zoals “Overzicht”. Deze tabs missen het attribuut aria-controls. Hierdoor is de relatie tussen het tabblad en het bijbehorende paneel niet vastgelegd in de code. Voeg het attribuut aria-controls toe aan elk tabblad en verwijs daarbij naar de ID van het bijbehorende inhoudspaneel, zodat schermlezers de structuur kunnen begrijpen. Een aanvullend probleem is dat het element met role="tablist" geen naam heeft.

Op pagina https://debouw.app/projects/ikc-woubrugge, onder het tabblad “Updates”, staan berichten met bijlagen en pijlen die als knoppen functioneren. Deze elementen hebben geen rol en geen toegankelijke naam. Hierdoor is niet duidelijk dat het om knoppen gaat en wat hun functie is. Voeg de rol button toe en geef elke knop een toegankelijke naam die beschrijft wat de knop doet, bijvoorbeeld “Volgende afbeelding” of “Vorige bijlage”.

Op pagina https://debouw.app/projects/ikc-woubrugge wordt bij het klikken op een bijlage een dialoogvenster geopend. Dit dialoogvenster heeft geen toegankelijke naam. Voor bezoekers die schermlezers gebruiken is daardoor niet duidelijk wat er wordt geopend. Voeg een aria-label toe aan het dialoogvenster met een korte, duidelijke beschrijving van de inhoud, zoals “Bijlagevoorbeeld” of “PDF-voorbeeld”, zodat bezoekers weten wat ze kunnen verwachten.

Op pagina https://debouw.app/projects/ikc-woubrugge, onder het tabblad “Updates”, staan berichten met bijlagen. Bij het klikken op een bijlage wordt een dialoogvenster geopend. De sluitknop en de knop om te delen hebben geen toegankelijke naam, waardoor schermlezers de functie van deze knoppen niet kunnen doorgeven aan gebruikers. Er zijn meerdere oplossingen om deze knoppen een naam te geven, bijvoorbeeld via een aria-label.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://debouw.app/onboarding/search wordt bij het verplaatsen van de kaart het zoekresultaat automatisch bijgewerkt. Daarbij verschijnt een melding zoals “417 van 1642 projecten”, maar deze melding wordt niet aangekondigd door schermlezers. Aangezien dit een statusbericht is dat essentiële informatie geeft over het resultaat van een actie, moet het automatisch worden voorgelezen zodra het verschijnt of verandert. Voeg aan het element dat deze melding bevat het attribuut aria-live=“polite” of role=“status” toe, zodat schermlezers het bericht automatisch kunnen aankondigen.

Op pagina https://debouw.app/onboarding/search wordt bij het verplaatsen van de kaart ook een wachtanimatie getoond. Deze animatie geeft visueel weer dat er nieuwe zoekresultaten worden geladen. Omdat dit ook een statusbericht is, moet het toegankelijk zijn voor bezoekers die schermlezers gebruiken. Voeg daarom aan het element dat de animatie bevat bijvoorbeeld aria-live=“polite” of role=“status” toe, zodat schermlezers dit bericht kunnen aankondigen zodra het verschijnt.

Bij het typen in de zoekbalk op pagina https://debouw.app/onboarding/search verschijnt een wachtanimatie terwijl de resultaten worden bijgewerkt. Ook dit is een statusbericht dat voor alle bezoekers waarneembaar moet zijn, inclusief blinde bezoekers. Zorg dat het element waarin de animatie staat role=“status” of aria-live=“polite” krijgt, zodat schermlezers automatisch aangeven dat het systeem bezig is met zoeken. Dit verhoogt de toegankelijkheid en zorgt voor een betere gebruikerservaring voor mensen die afhankelijk zijn van hulpsoftware.