Rapport:
Audit digitale toegankelijkheid website capellebouwtaandestad.nl

Uitkomst: Onvoldoende

Bevindingen: In de footer van pagina https://capellebouwtaandestad.nl/ staat het logo van de website. Deze afbeelding heeft geen alternatieve tekst. Omdat de afbeelding ook is opgemaakt als link heeft de link hierdoor ook geen toegankelijke naam (zie succescriterium 2.4.4 en 4.1.2).
Zorg ervoor dat dit logo een alternatieve tekst krijgt. De tekst 'Logo Capelle bouwt aan de stad .nl' is voldoende. In de alternatieve tekst moet minstens het woord 'logo' en de visuele tekst op het logo voorkomen. Omdat deze afbeelding een svg-element is, kan dit opgelost worden door het img-element aan het svg-element toe te voegen en de alternatieve tekst met een aria-label te plaatsen.
Hetzelfde probleem komt ook voor bij het logo 'Wijwillendit' wat ook is opgemaakt als link.

Op pagina https://capellebouwtaandestad.nl/ staat naast de tekst 'Samen maken we Capelle!' een decoratieve afbeeldingen. Het img-element van deze afbeelding heeft geen leeg alt-attribuut. Hierdoor is de decoratieve afbeelding niet verborgen voor hulpsoftware. Zorg ervoor dat als dit een decoratieve afbeelding is het img-element een leeg alt-attribuut krijgt. Als de afbeelding wel informatief is moet deze een alternatieve tekst krijgen, ook via het alt-attribuut.
Hetzelfde komt voor bij de afbeeldingen onder de kop 'Initiatieven' op dezelfde pagina.
Dit komt ook voor bij afbeeldingen op andere pagina's, zoals pagina https://capellebouwtaandestad.nl/overzicht?thema=&wijk=&term=woning, https://capellebouwtaandestad.nl/nieuws en https://capellebouwtaandestad.nl/project/beheer-en-actieplan-schollebos.

Voor de kaart op pagina https://capellebouwtaandestad.nl/ is geen alternatieve tekst aanwezig. Hierdoor weten bezoekers die het scherm niet kunnen zien niet dat hier een kaart staat. Zorg ervoor dat er een alternatieve tekst voor de kaart komt. Dat mag bijvoorbeeld ook door gebruik te maken van een (visueel verborgen) kop.
Dit komt ook voor bij andere kaarten op de website, bijvoorbeeld op pagina https://capellebouwtaandestad.nl/initiatief/indienen en https://capellebouwtaandestad.nl/overzicht.

Op pagina https://capellebouwtaandestad.nl/project/maaien staat onder de kop 'Planning' een soort grafiek. De teksten in deze grafiek zijn beschikbaar voor hulpsoftware, zoals '2023' en 'Gazon maaien', maar de balken die aangeven om welke periode de taken worden uitgevoerd hebben geen alternatieve tekst. Zorg ervoor dat hier een alternatieve tekst beschikbaar is die de periode aangeeft. Dit kan bijvoorbeeld door de periode in tekst te plaatsen op de pagina.
Dit komt ook voor op pagina https://capellebouwtaandestad.nl/project/verbeteren-golfbaanpad-als-verkeersveilige-en-aantrekkelijke-fietsroute.

Op pagina https://capellebouwtaandestad.nl/project/maaien staat voor de tekst 'Capelle aan den IJssel' een locatie icoon. Dit icoon heeft geen alternatieve tekst, hierdoor weten niet-ziende bezoekers niet dat de tekst achter het icoon de locatie van het initiatief is. Zorg ervoor dat het locatie icoon een alternatieve tekst krijgt.
Dit komt ook voor op pagina https://capellebouwtaandestad.nl/project/beheer-en-actieplan-schollebos en op https://capellebouwtaandestad.nl/project/verbeteren-golfbaanpad-als-verkeersveilige-en-aantrekkelijke-fietsroute.

Op pagina https://capellebouwtaandestad.nl/registreren staat een Captcha. Voor het invullen hiervan is geen toegankelijk alternatief aanwezig, zoals een voorleesfunctie. Hierdoor kunnen bijvoorbeeld mensen die het scherm niet (goed) kunnen zien dit formulier niet opsturen. Zorg voor een toegankelijke Captcha in dit formulier.

Vanaf pagina https://capellebouwtaandestad.nl/project/maaien kunnen bezoekers de PDF 'Maaibeheer Capelle aan den IJssel verder uitgelegd' downloaden. Deze PDF bevat twee logo's die zijn opgemaakt als artefact. Hierdoor zijn deze logo's verborgen voor hulpsoftware. Zorg ervoor dat deze logo's met een Figure-tag in de codelaag komen te staan en een alternatieve tekst krijgen. Omdat de logo's op meerdere pagina's voorkomen is het voldoende om de logo's één keer terug te laten komen in de codelaag.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capellebouwtaandestad.nl/ is gebruik gemaakt van het em-element om teksten visueel schuingedrukte mee te maken. Het em-element heeft een eigen semantische waarde; het geeft aan hulpsoftware aan dat het met nadruk moet worden uitgesproken. Het em-element mag daarom niet worden gebruikt voor de visuele opmaak van teksten. Verwijder het em-element van de schuingedrukte teksten en maak deze op een andere manier op, bijvoorbeeld met CSS.
Op andere pagina's wordt het em-element ook gebruikt voor de visuele opmaak van teksten, bijvoorbeeld https://capellebouwtaandestad.nl/meer-informatie/groenbeheer en https://capellebouwtaandestad.nl/project/maatregelen-algeracorridor/nieuws/verkeersverbeteringen-moeten-doorstroming-algeracorridor-verbeteren/.

Op pagina https://capellebouwtaandestad.nl/meer-informatie/groenbeheer is de kop 'Jaarlijkse groenactiviteiten' opgemaakt met zowel het strong- als het em-element. Beide elementen zijn niet geschikt voor de visuele opmaak van koppen. Dat komt omdat beide elementen een eigen semantische waarde hebben die niet gelijk is aan dat van een kop-element. Verwijder daarom het em- en strong-element van deze tekst en maak het op met een kop-element, bij voorkeur een h4 als de huidige koppenstructuur blijft staan.
Dit komt met alleen het em-element voor op pagina https://capellebouwtaandestad.nl/project/maaien, bij koppen zoals 'Regelmatig maaien'.
Op pagina https://capellebouwtaandestad.nl/project/verbeteren-golfbaanpad-als-verkeersveilige-en-aantrekkelijke-fietsroute komt dit voor met alleen het strong-element, bij koppen zoals 'Toegang naar Schollebos'.

Op pagina https://capellebouwtaandestad.nl/meer-informatie/groenbeheer zijn verschillende koppen opgemaakt met zowel een kop-element als het strong-element, bijvoorbeeld bij de h3 kop 'Groenkalender'. Het strong-element op een kop is overbodig. Verwijder deze daarom van de koppen.

Op pagina https://capellebouwtaandestad.nl/nieuws staan blokken content die visueel een kop bevatten, maar in de code niet zijn opgemaakt met een kop-element. Hierdoor kunnen gebruikers van hulpsoftware niet weten dat hier koppen staan. Ook kunnen ze niet op basis van de koppen op de pagina navigeren. Zorg ervoor dat de koppen in deze blokken content worden opgemaakt met een kop-element, bij voorkeur een h2.
Een soortgelijk probleem komt ook voor op pagina https://capellebouwtaandestad.nl/project/beheer-en-actieplan-schollebos bij de kop 'Meer weten over dit project?'. Deze kop staat ook op pagina https://capellebouwtaandestad.nl/project/verbeteren-golfbaanpad-als-verkeersveilige-en-aantrekkelijke-fietsroute.

Op pagina https://capellebouwtaandestad.nl/project/beheer-en-actieplan-schollebos zijn de afbeelding opgemaakt met een figure-element, de datum die bij de afbeelding staat figcaption-element. Dit is geen juiste opmaak van deze tekst, omdat de datum geen bijschrift is van de afbeelding. Haal daarom de data bij de contentblokken op deze pagina uit het figcaption-element. Het is wel correct om deze data op te maken met het time-element.

Op pagina https://capellebouwtaandestad.nl/project/beheer-en-actieplan-schollebos staat een visuele lijst onder de kop 'Afhaallocaties'. Deze lijst is in de code niet opgemaakt met de juiste elementen. Hierdoor kan hulpsoftware niet aangeven dat hier een lijst staat. Zorg ervoor dat deze lijst wordt opgemaakt met een ul-element, alle lijstitems moeten staan in een eigen li-element.

Wanneer bezoekers op onder andere pagina https://capellebouwtaandestad.nl/ een knop 'Geïnteresseerd [getal]' activeren met de muisaanwijzer en niet zijn ingelogd op de website, verschijnt er een venster op de pagina. Dit venster wordt niet opgemerkt door hulpsoftware. Hierdoor kunnen bijvoorbeeld niet-ziende bezoekers het venster missen. Zorg ervoor dat hulpsoftware het venster kan opmerken, bijvoorbeeld door hier focus op te plaatsen zodra het verschijnt.
Hetzelfde probleem komt ook voor bij het venster dat verschijnt op pagina https://capellebouwtaandestad.nl/profiel/bewerken wanneer bezoekers de knop 'Bijwerken' hebben geactiveerd.

Vanaf pagina https://capellebouwtaandestad.nl/project/maaien kunnen bezoekers de PDF 'Maaibeheer Capelle aan den IJssel verder uitgelegd' downloaden. In de codelaag van deze PDF zijn de koppen niet opgemaakt met kop-tags (<H1>, <H2>, ect.). Hierdoor kan hulpsoftware niet aangegeven dat hier koppen staan en is het niet mogelijk om bladwijzers aan te maken op basis van de koppen. Zorg ervoor dat alle visuele koppen in het bestand worden opgemaakt met een kop-tag op het juiste niveau.

Advies: Vanaf pagina https://capellebouwtaandestad.nl/project/maaien kunnen bezoekers de PDF 'Maaibeheer Capelle aan den IJssel verder uitgelegd' downloaden. In de codelaag van deze PDF staan meerdere P-tags die gevuld zijn met witruimte. Sommige hulpsoftware lezen deze tag voor als 'leeg'. Daarom is het beter om de lege P-tags te verwijderen.

Advies: Op pagina https://capellebouwtaandestad.nl/initiatief/indienen (als bezoekers niet zijn ingelogd) wordt een h1 kop opgevolgd door een h3 kop. Dit is geen logische koppenstructuur. Bij een logische koppenstructuur worden kopniveaus hiërarchisch gebruikt en worden geen kopniveaus overgeslagen. Een goede koppenstructuur begint dus bij een h1 kop voor de titel van de pagina, h2 koppen voor de koppen op de pagina, h3 koppen voor de tussenkoppen, ect. Het is niet verplicht om een logisch, aflopende koppenstructuur te gebruiken, maar wanneer dat wel wordt toegepast helpt het mensen die gebruikmaken van hulpsoftware om beter te navigeren.
Dit komt ook voor op andere pagina's, bijvoorbeeld https://capellebouwtaandestad.nl/meer-informatie/groenbeheer en https://capellebouwtaandestad.nl/test.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capellebouwtaandestad.nl/project/beheer-en-actieplan-schollebos staan blokken content onder de kop 'Nieuws'. Deze blokken bestaan uit een kop, afbeelding, datum en tekst. De afbeelding en datum zijn boven de bijbehorende kop geplaatst in de HTML code. Hierdoor worden door hulpsoftware de afbeelding en datum aangegeven voor de bijbehorende kop, waardoor het lastig kan zijn om te bepalen welke datum bij welke kop hoort. Plaats in de code de datum en afbeelding na de bijbehorende kop.

Uitkomst: Voldoende

Bevindingen: Advies: Op pagina https://capellebouwtaandestad.nl/initiatief/indienen (wanneer bezoekers niet zijn ingelogd) staat de verwijzing 'Klik rechtsboven de pagina op de knop 'inloggen' of als je nog geen account hebt op 'meld je aan'.'. Deze zintuigelijke verwijzing klopt niet helemaal, omdat de link rechtsboven 'inloggen / meld je aan' heet. Mogelijk moet verwezen worden naar de knoppen onderaan de tekst op de pagina, waar wel twee aparte knoppen staan met de labels die in de verwijzing staan. Het is belangrijk bij verwijzingen om duidelijk te zijn, niet alleen te rekenen op de zintuigen van bezoekers en elementen bij hun label en/of toegankelijke naam te benoemen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer focus wordt geplaatst op de knop 'Filter' op pagina https://capellebouwtaandestad.nl/, wordt de focus alleen aangegeven met een lichte kleurverandering van de knop. De kleur van de knop gaat van zwart naar licht zwart (HEX #1F1F1F) als hier focus op wordt geplaatst. Niet iedereen kan deze kleurverandering zien, bijvoorbeeld als mensen slecht zicht hebben of kleurblind zijn. Daarom is het belangrijk dat kleur niet het enige middel is waarmee informatie wordt overgebracht, als dat wel gebeurt moet deze kleur een contratsverhouding van 3:1 hebben met bijvoorbeeld omliggende tekst of de andere staat van het element. Los het probleem hier bij voorkeur op door gebruik te maken van een focusrand met voldoende contrast.
Hetzelfde probleem komt ook voor op andere pagina's, bijvoorbeeld op https://capellebouwtaandestad.nl/initiatief/indienen (wanneer bezoekers zijn ingelogd) bij de knoppen 'locatie toevoegen' en 'ik wil mijn initiatief toevoegen' en op https://capellebouwtaandestad.nl/overzicht?thema=&wijk=&term=woning bij de knop 'Filter'.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capellebouwtaandestad.nl/ staat een invoerveld met de placeholdertekst 'Uw zoekterm'. Deze grijze placeholdertekst (HEX #999999) heeft te weinig contrast op de witte achtergrond. De contrastverhouding is hier 2,8:1, waar dat minimaal 4,5:1 moet zijn.
Dit komt ook voor op andere pagina's waar dit invoerveld op staat, bijvoorbeeld pagina https://capellebouwtaandestad.nl/overzicht.
Ook op pagina https://capellebouwtaandestad.nl/project/maaien staat de grijze tekst 'initiatiefnemer' (HEX #999999) op een witte achtergrond. Hier is de contrastverhouding ook onvoldoende. Dit contrastprobleem komt ook voor op pagina https://capellebouwtaandestad.nl/project/beheer-en-actieplan-schollebos en https://capellebouwtaandestad.nl/registreren.

Op pagina https://capellebouwtaandestad.nl/project/beheer-en-actieplan-schollebos staan onder de kop 'Nieuws' meerdere grijze teksten (HEX #999999) op een lichte achtergrond (HEX #F5F7FA). Deze kleurencombinatie heeft een contrastverhouding van 2,6:1, wat niet voldoet aan de minimale waarde van 4,5:1.

Wanneer bezoekers op pagina https://capellebouwtaandestad.nl/profiel/bewerken hun e-mailadres nog moeten verifiëren en de knop activeren waarmee je een nieuwe e-mail kan sturen, verschijnt er een groen venster op het scherm. Het contrast van de witte tekst op de groene achtergrond (HEX #58CB55) is te laag. De contrastverhouding is hier 2:1, waar dat minimaal 4,5:1 moet zijn. Het groene venster verschijnt ook wanneer bezoekers op deze pagina hun profiel bijwerken.

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina staat in de HTML-code bij meta name="viewport" de volgende instellingen: 'user-scalable=no'. Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instellingen weg.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina staat in de HTML-code bij meta name="viewport" de volgende instellingen: 'user-scalable=no'. Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instellingen weg.

Wanneer bezoekers op pagina https://capellebouwtaandestad.nl/ inzoomen tot 400% bij een schermbreedte van 1280 bij 1024 pixels, valt content buiten de schermweergave. Het is niet toegestaan bij de succescriterium om horizontaal te moeten scrollen om content zichtbaar te maken (behalve bij bepaalde uitzonderingen zoals tabellen). Zorg ervoor dat alle content binnen de schermweergave blijft als bezoekers inzoomen op deze pagina.
Dit komt ook voor bij inzoomen op de meeste andere pagina's, bijvoorbeeld op pagina https://capellebouwtaandestad.nl/digitoegankelijkheid, https://capellebouwtaandestad.nl/initiatief/indienen (wanneer bezoekers zijn ingelogd) en https://capellebouwtaandestad.nl/overzicht?thema=&wijk=&term=woning.

Advies: Op pagina https://capellebouwtaandestad.nl/initiatief/indienen (wanneer bezoekers zijn ingelogd), wanneer bezoekers inzoomen tot 200% bij een schermbreedte van 1280 bij 1024 pixels, verdwijnt de kaart achter een knop. Hierdoor is het niet zichtbaar wanneer de marker op de kaart verschijnt na het activeren van de knop 'locatie toevoegen'. Omdat de functionaliteit nog steeds beschikbaar is in ingezoomde weergave, is dit geen reden voor afkeur op basis van de WCAG. Toch zou het voor bijvoorbeeld bezoekers die een mobiele telefoon gebruiken duidelijker zijn als de kaart niet verborgen is achter een knop.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capellebouwtaandestad.nl/ staat het invoerveld 'Zoek op titel of omschrijving'. De grijze randen van dit invoerveld (HEX #E1E4E9) hebben te weinig contrast op de witte achtergrond. De contrastverhouding is hier 1,2:1, waar dat minimaal 3:1 moet zijn.
Dit probleem komt ook voor bij invoervelden op andere pagina's, bijvoorbeeld in het formulier op pagina https://capellebouwtaandestad.nl/initiatief/indienen, op https://capellebouwtaandestad.nl/overzicht?thema=&wijk=&term=woning en op https://capellebouwtaandestad.nl/profiel/bewerken.

Op pagina https://capellebouwtaandestad.nl/profiel/bewerken staat een grijs selectievakje (HEX #E1E4E9) op een witte achtergrond. Dit element heeft onvoldoende contrast. De contrastverhouding is hier 1,2:1, waar dat minimaal 3:1 moet zijn.
Dit contrastprobleem komt ook voor bij de selectievakjes op pagina https://capellebouwtaandestad.nl/registreren.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op onder andere pagina https://capellebouwtaandestad.nl/ staat de knop 'Menu'. Deze knop is opgemaakt met een a-element zonder href-attribuut. Hierdoor is de knop niet te bereiken of bedienen voor toetsenbordgebruikers. Zorg ervoor dat het mogelijk is voor toetsenbordgebruikers om focus te plaatsen op deze knop en het te bedienen met de entertoets en/of spatiebalk. Het beste is dan ook om de knop op te maken met een button-element.
Dit komt ook voor bij de 'Sluiten' knop die zichtbaar is wanneer het menu is geopend.

In de kaart op pagina https://capellebouwtaandestad.nl/ staan knoppen die een initiatief aangeven. Voor bezoekers die een muisaanwijzer gebruiken werken de knoppen als een link naar de pagina van het initiatief. Toetsenbordgebruikers kunnen wel focus plaatsen op deze knoppen, maar kunnen ze niet activeren. Zorg ervoor dat toetsenbordgebruikers deze knoppen ook kunnen bedienen.
Dit komt ook voor bij andere kaarten, bijvoorbeeld op pagina https://capellebouwtaandestad.nl/initiatief/indienen (wanneer bezoekers zijn ingelogd) en op https://capellebouwtaandestad.nl/overzicht?thema=&wijk=&term=woning.

Wanneer bezoekers zijn ingelogd staat er bovenaan iedere pagina een knop waarmee bezoekers twee links zichtbaar kunnen maken. Deze knop is visueel gelabeld met de volledige naam van de bezoeker (die zij heeft opgegeven bij het profiel aanmaken). De knop is niet te bedienen met het toetsenbord. Dat komt waarschijnlijk doordat de knop is opgemaakt met div-element en niet met een button-element. Zorg ervoor dat deze knop te bereiken en bedienen is met het toetsenbord. Een mogelijk oplossing is om gebruik te maken van het button-element.

Op pagina https://capellebouwtaandestad.nl/initiatief/indienen (als bezoekers zijn ingelogd) is het mogelijk om een locatie in het formulier toe te voegen. Voor toetsenbordgebruikers werkt deze functionaliteit niet. Zij kunnen wel de knop 'locatie toevoegen' activeren waardoor er op de kaart een marker wordt geplaatst, maar het is voor toetsenbordgebruikers niet mogelijk om deze marker te verplaatsen naar de gewenste locatie op de kaart. Zorg ervoor dat deze functionaliteit beschikbaar is voor toetsenbordgebruikers, let daarbij ook op de focus volgorde. Of maak gebruik van een toegankelijke alternatief voor deze functionaliteit, zoals een invoerveld waarmee bezoekers de locatie(s) kunnen toevoegen.

Wanneer bezoekers op onder andere pagina https://capellebouwtaandestad.nl/ een knop 'Geïnteresseerd [getal]' activeren met de muisaanwijzer en niet zijn ingelogd op de website, verschijnt er een venster op de pagina. Dit venster verschijnt niet wanneer toetsenbordgebruikers deze knoppen activeren, dan lijkt er niets te gebeuren. Ook als bezoekers wel zijn ingelogd kunnen zij de knoppen niet activeren met het toetsenbord. Zorg ervoor dat toetsenbordgebruikers deze 'Geïnteresseerd [getal]' knoppen kunnen activeren.

Op pagina https://capellebouwtaandestad.nl/project/maaien staan onder de kop 'Downloads' twee bestanden die bezoekers kunnen downloaden. Toetsenbordgebruikers kunnen geen focus plaatsen op deze elementen. Hierdoor zijn deze bestanden niet te downloaden voor toetsenbordgebruikers. Zorg ervoor dat het mogelijk is voor toetsenbordgebruikers om focus te plaatsen op deze bestanden en ze te kunnen downloaden.
Dit probleem komt ook voor op pagina https://capellebouwtaandestad.nl/project/verbeteren-golfbaanpad-als-verkeersveilige-en-aantrekkelijke-fietsroute.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Als een bezoeker is ingelogd op de website https://capellebouwtaandestad.nl/, worden zij na enige tijd automatisch uitgelogd. Dit gebeurt zonder een waarschuwing. Voor tijdslimieten geldt dat een bezoeker deze moet kunnen uitzetten, aanpassen of verlengen, tenzij de tijdslimiet meer dan 20 uur duurt. Dit kan bijvoorbeeld worden opgelost door een waarschuwing te geven in een venster waarin bezoekers kunnen aangeven dat zij ingelogd willen blijven. Dit venster moet wel volledig toegankelijk zijn.

Uitkomst: Onvoldoende

Bevindingen: Als bezoekers op pagina https://capellebouwtaandestad.nl/initiatief/indienen (wanneer de bezoeker is ingelogd) de knop 'locatie toevoegen' verschijnt er op de kaart een een maker. Deze marker beweegt en stopt pas als het met de muisaanwijzer verplaatst wordt. Bij sommige mensen kan de beweging misselijkheid veroorzaken. Voor mensen met bijvoorbeeld een cognitieve beperking kan het lastig zijn omdat zij zich tijdens het lezen niet kunnen concentreren op de tekst, door de beweging op het scherm. Daarom moet het mogelijk zijn voor bezoekers om de beweging te pauzeren, stoppen of verbergen. De beweging kan wel gestopt worden, maar alleen als bezoekers de marker met de muisaanwijzer verplaatsen. Dat is geen optie voor toetsenbordgebruikers (zie succescriterium 2.1.1). Daarnaast is het doel van dit succescriterium dat er gebruik wordt gemaakt van een pauzeerknop (of soortgelijk mechanisme) en geen andere handelingen die de bezoeker moet uitvoeren, zoals het plaatsen van focus op het element.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op elke pagina ontbreekt een mechanisme om de herhalende content over te slaan. Bezoekers die de website met toetsenbord bedienen en/of hulpsoftware moeten op elke pagina langs dezelfde onderdelen gaan voordat ze bij de inhoud van de pagina zijn. Dit kan je oplossen door een link op de pagina te plaatsen (skiplink) die de focus verplaatst naar de eerste unieke inhoud van de pagina. Deze link moet de eerste link van de pagina zijn. Deze link mag standaard verborgen zijn voor bezoekers, maar moet zichtbaar worden als de focus er op komt wanneer met het toetsenbord wordt genavigeerd.

Uitkomst: Onvoldoende

Bevindingen: Vanaf pagina https://capellebouwtaandestad.nl/project/maaien kunnen bezoekers de PDF 'Maaibeheer Capelle aan den IJssel verder uitgelegd' downloaden. Deze PDF bevat geen documenttitel. Een documenttitel is een belangrijk navigatiemiddel dat aangeeft waar het document over gaat. Daarom is het belangrijk dat deze PDF een documenttitel krijgt in de documenteigenschappen.

Advies: De paginatitel (zichtbaar in het tabblad in de browser) van de sommige pagina's bevatten niet de naam van de website. Kijk bijvoorbeeld naar pagina https://capellebouwtaandestad.nl/initiatief/indienen (wanneer bezoekers niet zijn ingelogd), waar de paginatitel alleen 'Je hebt een account nodig' is. Een paginatitel is een belangrijk navigatiemiddel voor vele bezoekers, maar vooral voor mensen die gebruikmaken van hulpsoftware. Het geeft aan waar de pagina over gaat. Daarom is het beter om ook de websitenaam te benoemen in de paginatitel.

Uitkomst: Onvoldoende

Bevindingen: Wanneer toetsenbordgebruikers over de homepage https://capellebouwtaandestad.nl/ navigeren, is het mogelijk om focus te plaatsen op de links achter de 'Menu' knop. Deze links krijgen als eerst op de pagina focus. Voor ziende toetsenbordgebruikers is het op dat moment niet zichtbaar wat focus heeft, omdat de menuknop is ingeklapt en het achterliggende menu niet zichtbaar is. Zorg ervoor dat de focus volgorde correct loopt bij dit menu. Het moet hierbij mogelijk zijn om focus te plaatsen op de menuknop en deze te bedienen (zie succescriterium 2.1.1). Wanneer het menu zichtbaar is moet het mogelijk zijn om focus te plaatsen op de links, de focus mag niet verder gaan op de achterliggende pagina terwijl het menu openstaat. Als het menu is ingeklapt moet het voor toetsenbordgebruikers niet mogelijk zijn om focus op de dan niet-zichtbare links te plaatsen.

Wanneer bezoekers zijn ingelogd staat er bovenaan iedere pagina een knop waarmee bezoekers twee links zichtbaar kunnen maken. Deze knop is visueel gelabeld met de volledige naam van de bezoeker (die zij heeft opgegeven bij het profiel aanmaken). Toetsenbordgebruikers kunnen focus plaatsen op de links achter de knop, terwijl de links visueel niet-zichtbaar zijn. Dit is geen logische focus volgorde. Zorg ervoor dat bezoekers eerst de knop kunnen bedienen (zie succescriterium 2.1.1). Wanneer de knop is uitgeklapt en het menu zichtbaar is moet focus geplaatst kunnen worden op de links. Dus als de knop is ingeklapt moet het voor toetsenbordgebruikers niet mogelijk zijn om focus te plaatsen op de links.

Wanneer bezoekers op onder andere pagina https://capellebouwtaandestad.nl/ een knop 'Geïnteresseerd [getal]' activeren met de muisaanwijzer en niet zijn ingelogd op de website, verschijnt er een venster op de pagina. Dit venster komt niet voor op een logische plek in de focus volgorde. Toetsenbordgebruikers moeten namelijk eerst over de hele pagina navigeren, pas als zij weer boven aan de pagina zijn kunnen zij focus plaatsen op de elementen in dit venster. Zorg ervoor dat de focus in dit venster komt na het activeren van een 'Geïnteresseerd [getal]' knop.
Dit probleem komt ook voor op pagina https://capellebouwtaandestad.nl/profiel/bewerken, wanneer er een venster verschijnt als bezoekers de knop 'Bijwerken' activeren.

Uitkomst: Onvoldoende

Bevindingen: In de footer van pagina https://capellebouwtaandestad.nl/ staat het logo van de website. Deze afbeelding is opgemaakt als link en heeft geen toegankelijke naam. Hierdoor weten ziende toetsenbordgebruikers niet waar de link naar verwijst. Een mogelijk oplossing voor dit probleem is het geven van een alternatieve tekst aan de afbeelding (zie succescriterium 1.1.1). Het linkdoel mag ook voorkomen in de toegankelijke naam van deze links, maar dat is hier niet verplicht. Zie ook succescriterium 4.1.2.
Hetzelfde probleem komt ook voor bij het logo 'Wijwillendit' wat ook is opgemaakt als link.

Op pagina https://capellebouwtaandestad.nl/overzicht?thema=&wijk=&term=woning staat paginering. De namen van deze links luiden nu '1', '2', '3' en 'volgende'. Hierbij is het niet duidelijk voor bijvoorbeeld screenreadergebruikers dat deze links verwijzen naar andere pagina's met zoekresultaten. Vul daarom minstens de toegankelijke namen van deze links aan met het woord 'pagina'. Dit kan bijvoorbeeld door gebruik te maken van een aria-label op het a-element. De toegankelijke naam van de link '1' wordt dan bijvoorbeeld 'pagina 1' . Let wel op dat het visuele label van de link altijd voor moet komen in het aria-label als deze wordt gebruikt, omdat het aria-label de hele toegankelijke naam bepaalt.
Dit komt ook voor op andere pagina's met paginering, zoals pagina https://capellebouwtaandestad.nl/overzicht.

Op de 404 pagina https://capellebouwtaandestad.nl/test staat de link 'Naar home'. Deze link verwijst naar de homepage van een andere website, namelijk https://info.wijwillendit.nl/. Hierdoor is het linkdoel niet duidelijk. Pas de linktekst aan of zorg ervoor dat de link wel verwijst naar de homepage https://capellebouwtaandestad.nl/.

Advies: Op pagina https://capellebouwtaandestad.nl/project/beheer-en-actieplan-schollebos staat een link met de linktekst 'Hier'. Uit de context van deze link kan gehaald worden waar het naar verwijst. Toch is het beter om linkteksten zoals 'Hier', 'Klik hier' en 'Lees verder' te vermijden en het volledige linkdoel in de linktekst te plaatsen. Hierdoor weten gebruikers van hulpsoftware ook gelijk waar de link naar verwijst als zij een linklijst gebruiken of hier focus op plaatsen.

Uitkomst: Onvoldoende

Bevindingen: Er is maar één manier om alle pagina's binnen deze website te vinden en dat is via de link naar de pagina. Zorg dat er nog een manier is om elke pagina te kunnen bereiken. Dit kan bijvoorbeeld via een zoekfunctie of een sitemap. Er is wel een zoekfunctie aanwezig op de website, maar hiermee kunnen alleen initiatieven gevonden worden, niet alle pagina's op de website.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de homepage https://capellebouwtaandestad.nl/ staan twee keuzemenu's: 'Kies een thema' en 'Kies een wijk'. Wanneer toetsenbordgebruikers focus plaatsen op deze elementen, wordt dat niet aangegeven met een visuele indicator. Hierdoor is het voor ziende toetsenbordgebruikers moeilijk te bepalen welke elementen focus hebben. Zorg ervoor dat focus altijd wordt aangegeven met een visuele indicator, bijvoorbeeld een focusrand.

Dit probleem komt ook voor bij de link 'Heeft u een idee? Start een initiatief!'.

Op andere pagina's staan ook element die geen zichtbare focus krijgen, bijvoorbeeld:

• Op pagina https://capellebouwtaandestad.nl/overzicht?thema=&wijk=&term=woning bij de link 'Heeft u een idee? Start een initiatief!' en de comboboxen.
• Op pagina https://capellebouwtaandestad.nl/profiel/bewerken, bij de checkbox en combobox (zie de ingezoomde weergave van 150% bij een schermbreedte van 1280 bij 1024 pixels).

Op pagina https://capellebouwtaandestad.nl/initiatief/indienen (als bezoekers zijn ingelogd) is het mogelijk om focus te plaatsen op de volledige kaart. Dit komt vanwege een tabindex=0 op een div-element. Wanneer focus staat op deze volledige kaart wordt dat niet aangegeven met een visuele indicatie. Hierdoor is het voor ziende toetsenbordgebruikers moeilijk te bepalen welke element op dat moment focus heeft. Zorg ervoor dat focus altijd wordt aangegeven met een visueel indicator, bijvoorbeeld een focusrand.
Dit komt ook voor bij de andere kaarten, zoals bij die op de homepage en op pagina https://capellebouwtaandestad.nl/project/maaien.

Advies: De focusstijl op meerdere plekken van de website is niet duidelijk zichtbaar, omdat het om een erg dunne lijn stipjes gaat. Overweeg dit duidelijker te maken door bijvoorbeeld een omsluitende zwarte rand toe te voegen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capellebouwtaandestad.nl/ ontbreekt een taalaanduiding van de inhoud van de pagina. Deze moet in de HTML-code worden opgegeven door middel van een lang-attribuut bij het HTML-element. Dit attribuut moet dan de landcode van de taal bevatten.
Op alle andere pagina's ontbreekt ook een taalaanduiding.

Uitkomst: Voldoende

Bevindingen: Advies: In de kaart op pagina https://capellebouwtaandestad.nl/ staan twee knoppen waarmee bezoekers kunnen in- en uitzoomen. Deze knoppen hebben de toegankelijke namen 'Zoom in' en 'Zoom out'. Dit zijn Engelse toegankelijke namen terwijl andere content op de pagina in het Nederlands is. Omdat de pagina nog geen taalaanduiding heeft zijn deze Engelse toegankelijke namen nog niet af te keuren. Toch is het beter om de namen alvast te vertalen naar het Nederlands, ook al zijn de Engelse toegankelijke namen bijna gelijk aan de Nederlandse vertaling.
Hou er rekening mee dat deze knoppen in alle kaarten op de website staan.

Advies: De 404 pagina https://capellebouwtaandestad.nl/test heeft als paginatitel 'Not Found - Capelle bouwt aan de stad'. Dit is een Engelse paginatitel terwijl de content van de pagina Nederlands is. Omdat de pagina nog geen taalaanduiding heeft kan hier nog niet op worden afgekeurd. Wel kan dit worden afgekeurd als de pagina een taalaanduiding krijgt. Vertaal daarom de paginatitel alvast naar het Nederlands.
Dit komt ook voor op de inlogpagina https://capellebouwtaandestad.nl/inloggen, waar de paginatitel 'Login' is.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capellebouwtaandestad.nl/overzicht?thema=&wijk=&term=woning kunnen bezoekers de zoekresultaten filteren aan de hand van de comboboxen. Wanneer bezoekers bij één van de comboboxen een optie selecteren laadt er een nieuwe pagina. Dit is niet toegestaan. Input bij een invoerelement zoals een combobox mag niet leiden tot een contextwijziging. Dit kan namelijk verwarrend zijn voor verschillende bezoekers, bijvoorbeeld als zij hulpsoftware gebruiken. Zorg er daarom voor dat bezoekers de filters kunnen toepassen door de knop 'Filter' te activeren.
Dit komt ook voor op pagina https://capellebouwtaandestad.nl/overzicht.
Ook op pagina https://capellebouwtaandestad.nl/profiel/bewerken komt een soortgelijk probleem voor in ingezoomde weergave (vanaf 150% bij een schermbreedte van 1280 bij 1024 pixels). Dan verschijnt er een combobox. Bij het selecteren van een optie in deze combobox herlaadt de pagina, dit mag niet.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het formulier op pagina https://capellebouwtaandestad.nl/initiatief/indienen maakt alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort staan. Ook kan je de tekstgrootte niet aanpassen zodat sommige mensen de tekst mogelijk niet kunnen lezen. Voeg zelf foutmeldingen toe aan het formulier om dit probleem op te lossen.
Deze foutmeldingen worden ook gebruikt in het formulier op pagina https://capellebouwtaandestad.nl/inloggen en op https://capellebouwtaandestad.nl/registreren.

Wanneer bezoekers op pagina https://capellebouwtaandestad.nl/initiatief/indienen (wanneer bezoekers zijn ingelogd) de knop 'locatie toevoegen' activeren en de marker die op de kaart verschijnt niet verplaatsen maar toch het formulier opsturen, verschijnt de foutmelding 'Deze waarde mag niet leeg zijn'. Deze foutmelding geeft niet goed genoeg aan welke fout de bezoeker heeft gemaakt, omdat het voor bezoekers kan lijken of zij wel een locatie hebben geselecteerd. Zorg ervoor dat de foutmelding altijd duidelijk aangeeft welke fout de bezoeker heeft gemaakt. Als de foutmelding bij het invoerveld of element staat is het niet verplicht om aan te geven waar de fout is gemaakt, maar het wel beter om dat aan te geven.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://capellebouwtaandestad.nl/initiatief/indienen (wanneer bezoekers zijn ingelogd) staat er boven de knop 'locatie toevoegen' de instructie 'Geldt je initiatief voor het gehele gebied? Voeg dan geen markers toe'. Toch lijkt het niet mogelijk te zijn om geen marker toe te voegen op de kaart en het formulier te verzenden. Als bezoekers dat doen verschijnt de foutmelding 'Deze waarde mag niet leeg zijn' boven de knop. Zorg ervoor dat instructie in formulieren kloppen.

Uitkomst: Onvoldoende

Bevindingen: Het formulier op pagina https://capellebouwtaandestad.nl/initiatief/indienen maakt alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort staan. Ook kan je de tekstgrootte niet aanpassen zodat sommige mensen de tekst mogelijk niet kunnen lezen. Voeg zelf foutmeldingen toe aan het formulier om dit probleem op te lossen.
Deze foutmeldingen worden ook gebruikt in het formulier op pagina https://capellebouwtaandestad.nl/inloggen en op https://capellebouwtaandestad.nl/registreren.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De 'Menu' knop op onder andere pagina https://capellebouwtaandestad.nl/ is opgemaakt met een a-element. Omdat geen href-attribuut is gebruikt op het a-element werkt de link niet voor toetsenbordgebruikers (zie ook succescriterium 2.1.1). Maar zelfs als het a-element een href-attribuut heeft is de rol 'link' niet geschikt voor dit element, omdat het niet werkt als een link. Omdat het element werkt als een knop moet het ook de rol 'button' hebben. Maak het element daarom bijvoorbeeld op met een button-element.
Ook moet de staat van het element duidelijk zijn voor alle bezoekers. Bezoekers die gebruikmaken van hulpsoftware moeten ook weten wanneer het element in- en uitgeklapt is. Maak daarom gebruik van het attribuut aria-expanded om deze informatie beschikbaar te maken voor hulpsoftware.
Wanneer bezoekers zijn ingelogd is in de header een knop zichtbaar met de volledige naam van de bezoeker. Deze knop is momenteel alleen opgemaakt met een div-element en heeft ook een goede rol en status nodig.

In de footer van pagina https://capellebouwtaandestad.nl/ staat het logo van de website. Dit logo is opgemaakt als een link zonder toegankelijke naam. Als een link geen toegankelijke naam heeft is deze moeilijk te bedienen met hulpsoftware, bijvoorbeeld voorleessoftware of spraakgestuurde bediening. Zorg er daarom voor dat de link een toegankelijke naam krijgt. Dit kan bijvoorbeeld door de afbeelding een alternatieve tekst te geven. Zie ook succescriterium 1.1.1 en 2.4.4.
Hetzelfde probleem komt ook voor bij het logo 'Wijwillendit' wat ook is opgemaakt als link.

In de kaart op pagina https://capellebouwtaandestad.nl/ staan klikbare elementen die zijn opgemaakt met role=button. Deze elementen werken als links voor bezoekers die gebruikmaken van de muisaanwijzer, niet voor toetsenbordgebruikers (zie succescriterium 2.1.1). Om deze reden is het beter om deze elementen role=link te geven. Verder hebben de elementen niet op een goede manier een toegankelijke naam gekregen. Sommige hulpsoftware geven de elementen wel een toegankelijke naam vanwege de aria-describedby die op het div-element is geplaatst, maar niet alle hulpsoftware. Zorg ervoor dat de elementen op een goede manier een toegankelijke naam krijgen, bijvoorbeeld door gebruik te maken van aria-label.
Dit komt ook voor bij andere kaarten op de website, bijvoorbeeld op pagina https://capellebouwtaandestad.nl/initiatief/indienen (wanneer bezoekers zijn ingelogd) nadat er een marker is toegevoegd aan de kaart, en op pagina https://capellebouwtaandestad.nl/overzicht?thema=&wijk=&term=woning.

Wanneer bezoekers op onder andere pagina https://capellebouwtaandestad.nl/ een knop 'Geïnteresseerd [getal]' activeren met de muisaanwijzer en niet zijn ingelogd op de website, verschijnt er een venster op de pagina. De sluitknop in dit venster heeft geen toegankelijke naam. Hierdoor is de knop moeilijk te bedienen met hulpsoftware. Zorg ervoor dat deze knop een goede, toegankelijke naam krijgt, bijvoorbeeld door gebruik te maken van het aria-label.
Dit probleem komt ook voor in het venster op pagina https://capellebouwtaandestad.nl/profiel/bewerken, dat verschijnt nadat bezoekers de knop 'Bijwerken' hebben geactiveerd.

Wanneer bezoekers inzoomen tot 150% bij een schermbreedte van 1280 bij 1024 pixels, verschijn er rechts onderaan de pagina een knop die visueel gelabeld is met een pin icoon. Deze knop heeft geen toegankelijke naam. Hierdoor is de knop moeilijk te bedienen als bezoekers gebruikmaken van hulpsoftware. Omdat er alleen een sluitknop verschijnt als bezoekers deze knop activeren is het een optie om deze functionaliteit helemaal te verwijderen. Als de knop op de website blijft staan heeft het een toegankelijke naam nodig, bijvoorbeeld door een aria-label op het button-element te plaatsen.
Op andere pagina's, zoals https://capellebouwtaandestad.nl/initiatief/indienen (wanneer bezoekers zijn ingelogd), heeft de knop wel toegevoegde waarde omdat daar een kaart achter zit.

Uitkomst: Onvoldoende

Bevindingen: Als bezoekers op pagina https://capellebouwtaandestad.nl/initiatief/indienen (wanneer bezoekers zijn ingelogd) de knop 'locatie toevoegen' verschijnt er op de kaart een marker. Dit wordt niet opgemerkt door hulpsoftware. Hierdoor weten bijvoorbeeld gebruikers van screenreaders niet dat er iets op de kaart is verschenen. Zorg ervoor dat de content die wordt toegevoegd wordt opgemerkt door hulpsoftware.

Wanneer bezoekers op pagina https://capellebouwtaandestad.nl/inloggen verkeerde gegevens invullen bij het inloggen, verschijnt er de foutmelding 'Ongeldige inloggegevens.'. Omdat de pagina herlaadt na activeren van de knop 'Inloggen' en de focus op deze pagina begint bij het invoerveld 'E-mail', wordt deze foutmelding niet opgemerkt door hulpsoftware. Hierdoor kunnen bijvoorbeeld niet-ziende bezoekers de melding missen. Zorg ervoor dat de melding wel wordt opgemerkt door hulpsoftware, dat kan bijvoorbeeld door de focus bovenaan de pagina te laten beginnen als de pagina herlaadt of door gebruik te maken van aria-live.