Issues:
Audit digitale toegankelijkheid website Rekenhulp Duurzaam Capelle

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: Op pagina https://rekenhulp.duurzaamcapelle.nl/ staan bij verschillende stappen blauwe cirkels met daarin een icoontje van de letter i erin, zie bijvoorbeeld bij stap 1 bij "Kaveloppervlakte" en "Gewenste bouwhoogte". Met deze elementen kan een dialoogvenster geopend worden waarin aanvullende informatie getoond wordt. Deze iconen hebben als tekstalternatief alleen "i". Dit is niet genoeg om aan te geven wat de functie van deze elementen is. Een goed tekstalternatief zou bijvoorbeeld zijn "Meer informatie over kaveloppervlakte".

Bevinding 2: Op pagina https://rekenhulp.duurzaamcapelle.nl/ staan bij stap 2, als oppervlakken zijn toegevoegd, bij elk oppervlak een kruisje waarmee deze weer verwijderd kan worden. Het tekstalternatief van dit icoon is nu alleen "x". Dit geeft het doel van dit element niet goed aan. Er is wel een title-attribuut aanwezig met de tekst "Verwijderen", maar het title-attribuut werkt niet altijd goed met alle hulpsoftware. Bovendien is het uit het tekstalternatief nu niet duidelijk wat precies verwijderd gaat worden. Ditzelfde probleem komt ook voor bij het kruisje dat in een dialoogvenster staat dat geopend wordt als een knop met het i-icoon wordt geactiveerd.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 3: Op https://rekenhulp.duurzaamcapelle.nl/ staan bovenaan knoppen die de verschillende stappen in het proces aangeven. Op alle knoppen staat het attribuut aria-current="step". Dit attribuut is bedoeld om aan te geven wat de huidige actieve stap is en kan dus niet op alle stappen gebruikt worden. Hierdoor wordt nu niet overgebracht in welke stap van het proces de gebruiker zich bevindt. Los dit op door aria-current alleen op de actieve stap te plaatsen.

Bevinding 4: Op https://rekenhulp.duurzaamcapelle.nl/ staan bij verschillende stappen invoervelden met daarachter "m2" of "m" om aan te geven dat het gaat om een getal in meters. Bij stap 1 gaat het bijvoorbeeld om de velden "Kaveloppervlakte" en "Gewenste bouwhoogte". Deze informatie is visueel duidelijk, maar in de code niet gekoppeld aan het invoerveld. Hierdoor is deze relatie niet duidelijk voor bijvoorbeeld gebruikers van schermlezers. Los dit bijvoorbeeld op door deze tekst aan het veld te koppelen met het attribuut 'aria-describedby'. De waarde van dit attribuut op het invoerveld verwijst dan naar een id van een element dat de tekst bevat. Andere oplossingen zijn mogelijk.
Dit probleem komt ook voor bij stap 2, ook bij velden met bijvoorbeeld "cm", "mm" of "%".

Bevinding 5: Op https://rekenhulp.duurzaamcapelle.nl/ staan verschillende keuzerondjes en selectievakjes. Hierbij staat steeds een vraag. Bij stap 1 staat bijvoorbeeld "Is dit een nieuwbouwproject, een transformatie, of een grote renovatie?". Visueel is het duidelijk dat de antwoorden "ja" en "nee" bij deze vraag horen. In de code is die relatie nu niet goed aangegeven. Hiervoor kan een fieldset-element met daarin de vraag in een legend-element gebruikt worden.
Dit probleem komt bij dezelfde stap nogmaals voor bij de selectievakjes onder de kop "Biodiversiteit: doelsoorten".

Bevinding 6: Op https://rekenhulp.duurzaamcapelle.nl/ kan bij stap 5 een PDF-document gedownload worden waarin de ingevulde gegevens staan. Dit document is niet getagd. Dit betekent dat informatie over de structuur van het document niet wordt overgebracht aan gebruikers van hulpsoftware. Hierdoor krijgt bijvoorbeeld een blinde gebruiker niet goed mee hoe het document is opgebouwd. Sommige andere succescriteria kunnen hierdoor ook niet goed onderzocht worden voor dit document, bijvoorbeeld succescriteria 1.1.1 en 1.3.2. Het lijkt er overigens op dat de inhoud van het document geheel in de vorm van afbeeldingen geplaatst is, waardoor deze sowieso niet goed toegankelijk is.

Bevinding 7: Op https://rekenhulp.duurzaamcapelle.nl/ komt in stap 1 onder de kop "Doelsoorten' lijstitems voor. De <li>-elementen staan echter niet in een <ul>-element, wat niet volgens de HTML-standaard is. Gebruik voor elke lijst het <ul>-element om ervoor te zorgen dat de structuur correct wordt overgebracht door hulpsoftware.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 8: Op https://rekenhulp.duurzaamcapelle.nl/ kan bij stap 1 onder de kop "Ambitieniveau" per thema een keuze gemaakt worden voor een ambitieniveau. Als het niveau lager ligt dan niveau 2, verschijnt een extra veld met het label "Motivatie". In de volgorde in de code staan al deze velden na alle keuzelijsten waarmee het niveau wordt aangegeven. Hierdoor gaat betekenis verloren en is het niet duidelijk wel motivatieveld bij welk thema hoort.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 9: Op https://rekenhulp.duurzaamcapelle.nl/ staat bovenaan de pagina de tekst "Rekenhulp Duurzaam Bouwen" over een afbeelding heen. Het contrast tussen de witte tekst "Rekenhulp" en het water is niet overal voldoende, vooral bij de letters "k" en de tweede "e". Bij de tweede "e" is bijvoorbeeld een contrast van 2,8:1 gemeten met de blauwe kleur van het water (HEX #839CB4), waar dat minimaal 3,0:1 moet zijn. Los dit op door de tekst een schaduwrand te geven of de foto op de achtergrond wat donkerder te maken.

Bevinding 10: Bij stap 1 tot en met stap 4 op https://rekenhulp.duurzaamcapelle.nl/ staat onderaan een knop waarmee naar de volgende stap genavigeerd kan worden. Als nog niet alle verplichte velden zijn ingevuld, is deze knop lichtblauw van kleur (HEX #D7E2EF). Het contrast tussen de witte tekst en de blauwe achtergrond is dan 1,3:1. Het contrast moet ten minste 4,5:1 zijn. Elementen die inactief zijn hoeven niet aan de contrasteisen te voldoen, maar deze knop is in de code niet inactief gemaakt door er bijvoorbeeld het attribuut 'disabled' op te plaatsen. De knop is daardoor bijvoorbeeld nog wel te bedienen met het toetsenbord en de tekst moet daarom nu ook voldoen aan de minimale contrasteisen.
Bij stap 1 tot en met 3 komt dit probleem nogmaals voor in het venster "Opgaven" of "Voortgang", dat een deel van de pagina bedekt.

Bevinding 11: Ook bij hover of focus moet tekst voldoende contrast hebben. In de footer van https://rekenhulp.duurzaamcapelle.nl/ staat het e-mailadres "duurzaam@capelleaandenijssel.nl". Als deze link wordt aangewezen met de muis of toetsenbordfocus heeft, verandert de linktekst naar een donkerdere blauwe kleur (HEX #3870B0). Deze kleur heeft een contrast van 2,0:1 met de donkerblauwe kleur (HEX #004178) van de achtergrond. Dit moet minstens 4,5:1 zijn.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 12: Als pagina https://rekenhulp.duurzaamcapelle.nl/ bekeken wordt bij een breedte van 1280 pixels en 200% zoom, valt bij stap 1 onder de kop "Ambitieniveau" tekst door elkaar heen. Het gaat om de labels van de select-elementen, bijvoorbeeld "Energietransitie" en "Circulaire economie".

Bevinding 13: Als pagina https://rekenhulp.duurzaamcapelle.nl/ bekeken wordt bij een breedte van 1280 pixels en 200% zoom, staat er bij stap 2 en 3 een venster "Voortgang" in beeld dat over een deel van de pagina heen valt. De bovenkant van de inhoud van dit venster is niet leesbaar en er kan binnen het venster niet gescrold worden. Dit venster valt ook over content op de pagina heen, maar er kan op de rest van de pagina wel horizontaal gescrold worden en dat is voor dit succescriterium voldoende.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 14: Als pagina https://rekenhulp.duurzaamcapelle.nl/ wordt bekeken bij een schermbreedte van 320 pixels (door de breedte op 1280 pixels in te stellen en 400% in te zoomen), valt op de startpagina veel tekst buiten beeld. Het is wel mogelijk om deze tekst te lezen door horizontaal te scrollen, maar dit is voor dit succescriterium niet voldoende. Ook vallen de knoppen waarmee tussen stappen genavigeerd kan worden deels buiten beeld.

Bevinding 15: Als pagina https://rekenhulp.duurzaamcapelle.nl/ wordt bekeken bij een schermbreedte van 320 pixels (door de breedte op 1280 pixels in te stellen en 400% in te zoomen), staat er bij stap 1 tot en met stap 3 een venster in beeld dat over een groot deel van de pagina valt. Hierdoor is de inhoud van de achterliggende pagina nauwelijks meer leesbaar. Ook binnen dit venster valt een deel van de inhoud weg.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 16: Op https://rekenhulp.duurzaamcapelle.nl/ staan bij stap 1 tot en met 5 verschillende invoervelden. Bij stap 1 staat bijvoorbeeld een veld met het label "Kaveloppervlakte". De blauwe rand (HEX #C0D1E6) van het invoerveld heeft een contrast van 1,3:1 met de blauwe achtergrond (HEX #EAEFF6), waar dit minstens 3,0:1 moet zijn.
Dit probleem komt ook voor bij andere invoervelden, selectievakjes en radiobuttons bij dezelfde stap en andere stappen. Bij stap 5 is het contrast met de witte achtergrond 1,6:1, maar ook dat is niet voldoende. Los dit op door de randen van de invoervelden donkerder te maken.

Bevinding 17: Op https://rekenhulp.duurzaamcapelle.nl/ staat bij stap 1 een kaart. In de kaart staan knoppen met een plus, min en twee pijltjes. Als deze knoppen toetsenbordfocus krijgen, krijgen ze een blauwe omlijning (HEX #0096FF). Deze heeft wel genoeg contrast met de witte kleur van de knoppen zelf, maar niet met de achtergrond. Het contrast is bijvoorbeeld 2,0:1 met de lichtblauwe kleur van water op de kaart (HEX #95DBFE) en 2,6:1 met de lichtgrijze kleur van bebouwing (HEX #F3EFEE). Het contrast moet minstens 3,0:1 zijn.

Bevinding 18: Op https://rekenhulp.duurzaamcapelle.nl/ kan bij stap 5 een PDF-document gedownload worden waarin de ingevulde gegevens staan. Hierin komen soortgelijke contrastproblemen voor zoals hierboven beschreven bij de invoervelden. Op pagina 2 hebben de grijze randen van de invoervelden (HEX #EDEDED) bijvoorbeeld een contrast van minder dan 1,1:1 met de lichtblauwe achtergrond (HEX #EAF2F8).

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Bevinding 19: Op https://rekenhulp.duurzaamcapelle.nl/ staat bij stap 1 tot en met 3 een venster in beeld met "Opgaven" of "Voortgang" bovenaan in het venster. Hierin staan iconen met de letter "i". Als deze iconen worden aangewezen met de muis, verschijnt aanvullende content. Deze content voldoet niet aan de eisen voor dit succescriterium. Het is niet mogelijk om de muis naar deze inhoud te verplaatsen zonder dat deze verdwijnt, ze zijn dus niet aanwijsbaar. Ook voldoet de content niet aan de eis 'sluiten', want het is niet mogelijk om de content te sluiten zonder dat de muisaanwijzer verplaatst wordt. Los dit op door het mogelijk te maken dit ook te sluiten door een toets in te drukken, bijvoorbeeld met de Escape-toets en deze verder volledig toetsenbordtoegankelijk te maken.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 20: Op https://rekenhulp.duurzaamcapelle.nl/ staat bij stap 1 een kaart. Hierin moet geklikt worden om aan te geven waar een ontwikkeling plaatsvindt. Het is niet mogelijk om deze handeling uit te voeren als de website alleen met het toetsenbord wordt bediend. Los dit op door bijvoorbeeld ook een alternatief te bieden en het mogelijk te maken om een adres in te vullen. Andere oplossingen zijn mogelijk.

Bevinding 21: Op https://rekenhulp.duurzaamcapelle.nl/ staan bij stap 1 keuzerondjes en selectievakjes. Bij de vraag "Is dit een nieuwbouwproject, een transformatie, of een grote renovatie?" staan twee keuzerondjes en onder de kop "Biodiversiteit: doelsoorten" verschillende selectievakjes. Het is niet mogelijk om deze met het toetsenbord te bereiken of te bedienen. Los dit op door ervoor te zorgen dat de elementen die visueel worden gebruikt ook bedienbaar met het toetsenbord te maken.
Hetzelfde probleem komt voor bij de keuzerondjes en selectievakjes in stap 2. Er zijn in de code wel input-elementen aanwezig, maar deze zijn op zo'n manier verborgen dat ze niet toegankelijk zijn met het toetsenbord.

Bevinding 22: Op https://rekenhulp.duurzaamcapelle.nl/ staan bij verschillende invoervelden iconen met daarin een "i". Als hierop geklikt wordt, opent een dialoogvenster met aanvullende informatie. Het is niet mogelijk om deze dialoogvensters met het toetsenbord te openen. Dit komt omdat er geen gebruik is gemaakt van interactieve elementen zoals <button>. Gebruik het <button> element om dit op te lossen, en zorg ervoor dat de knop een label/toegankelijke naam heeft. Bij stap 1 gaat het bijvoorbeeld om de iconen die staan bij de invoervelden "Kaveloppervlakte" en "Gewenste bouwhoogte", maar deze iconen komen veelvuldig voor, ook bij andere stappen.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 23: Op https://rekenhulp.duurzaamcapelle.nl/ kan bij stap 5 een PDF-document gedownload worden waarin de ingevulde gegevens staan. Dit document heeft geen titel. Een PDF-document moet een goed omschrijvende titel hebben die aangeeft waar het document over gaat. Pas dit aan in de documenteigenschappen.

Bevinding 24: Advies: de website heeft als paginatitel "Rekenhulp Duurzaam Bouwen". Deze paginatitel maakt niet duidelijk dat het een onderdeel is van Duurzaam Capelle of dat het een website is van de gemeente Capelle aan de IJssel. De titel zou duidelijker gemaakt kunnen worden door dit toe te voegen, bijvoorbeeld "Rekenhulp Duurzaam Bouwen | Duurzaam Capelle".

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 25: Op https://rekenhulp.duurzaamcapelle.nl/ staat bovenaan een reeks met knoppen waarmee tussen de verschillende stappen geschakeld kan worden. Als een knop geactiveerd wordt, verschijnt de content die bij die stap hoort. Bij het verplaatsen van de toetsenbordfocus moet de focus naar die nieuw verschenen content gaan. De focus gaat nu eerst nog langs de rest van de knoppen. Hierdoor is het voor een gebruiker die de pagina niet ziet onduidelijk dat er nieuwe content is verschenen. Los dit op door de focus naar de nieuw verschenen content te verplaatsen.

Bevinding 26: Op https://rekenhulp.duurzaamcapelle.nl/ staan bij verschillende invoervelden iconen met daarin een "i". Als hierop geklikt wordt, opent een dialoogvenster met aanvullende informatie. De toetsenbordfocus kan dan op de achterliggende pagina komen. Bij een dergelijk dialoogvenster is dit niet de bedoeling: de toetsenbordfocus moet zolang het venster open staat in het venster blijven. Bij het sluiten van een dialoogvenster moet de toetsenbordfocus terugkomen op het element waarmee het venster werd geopend.

Bevinding 27: Op https://rekenhulp.duurzaamcapelle.nl/ staan bij stap 2 een aantal knoppen met "Toevoegen". Hiermee kan bijvoorbeeld een nieuw type dak of nieuw type maaiveld worden toegevoegd. Als deze knop wordt geactiveerd, blijft de focus op de knop "toevoegen" staan en vervolgens wordt deze verplaatst naar de content eronder. De nieuw verschenen content wordt dan overgeslagen. Hierdoor wordt deze makkelijk gemist door bijvoorbeeld een gebruiker die de pagina niet kan zien. Zorg ervoor dat de focus naar de nieuw verschenen content wordt verplaatst.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 28: Op https://rekenhulp.duurzaamcapelle.nl/ staan bij stap 2 een aantal koppen waarbij een element met een icoon van een "i" staat, bijvoorbeeld "Ambitieniveau". De aanvullende informatie die getoond kan worden door het element met de "i" te activeren, is als onderdeel van de kop geplaatst. Hierdoor is de kop in de code nu "Ambitieniveau i Kies het ambitieniveau dat u voor elk thema probeert te behalen voor het project. Bekijk de Duurzaamheidsleidraad voor bouwen voor meer informatie over de verschillende ambitieniveaus. De keuze heeft in het algemeen gevolgen voor de grootte van de opgaven die aan het betreffende thema gerelateerd zijn. Het doel is altijd ambitieniveau 2. Mocht dit niveau voor een bepaald thema niet mogelijk zijn voor uw project (bijvoorbeeld door specifieke kenmerken van het gebied), kies hier dan het niveau dat wel mogelijk en haalbaar is. Als u voor een basisniveau of voor ambitieniveau 1 kiest, leg dan in het tekstvak dat verschijnt uit waarom ambitieniveau 2 niet haalbaar is en gekozen is voor een ander niveau. Dit doet u per thema.". Deze kop is nu zodanig lang, dat dit inhoudelijk geen goede kop meer is. Los dit op door te zorgen dat de aanvullende informatie geen onderdeel is van de kop, maar door deze alleen te tonen op het moment dat iemand het element voor aanvullende informatie activeert. Hiervoor moet dit element nog wel toegankelijk gemaakt worden.
Dit probleem komt vaker voor, bijvoorbeeld bij de kop "Biodiversiteit" bij stap 1 en koppen als "Traditioneel dak" en "Groendak" bij stap 2 als er typen oppervlakken zijn toegevoegd.

Bevinding 29: Op https://rekenhulp.duurzaamcapelle.nl/ is het element met een "i" onderdeel van het label, waardoor de toegankelijkheidsnaam van het invoerveld heel lang wordt en het niet overzichtelijk meer is wat er precies ingevuld moet worden. Zorg ervoor dat de extra informatie alleen beschikbaar wordt als iemand dit echt nodig heeft. Bij "Gewenste bouwhoogte" is de toegankelijkheidsnaam nu bijvoorbeeld "Gewenste bouwhoogte i De bouwhoogte is de maximale hoogte van de bebouwing op de kavel vanaf het maaiveld gemeten. De bouwhoogte en de kaveloppervlakte samen bepalen de projectschaal: Kleinschalige nieuwbouwprojecten tot 500 m² perceelgrootte of tot 15m hoog; Grootschalige nieuwbouwprojecten groter dan 2000 m² of hoger dan 30 m. Waarom is dit van belang? Dit is van belang voor het thema biodiversiteit. De projectschaal bepaalt het minimum aantal doelsoorten waarvoor een habitat moet worden gecreëerd op de kavel. Een habitat is een complete leefomgeving die een doelsoort nodig heeft. Deze bestaat uit 5 ecologische V's: Verblijf Voortplanting Voedsel Veiligheid Verbinding Maatregelen moeten daarom altijd zorgen voor bovenstaande 5 V's voor de gekozen doelsoort. Dit kan gaan om maatregelen op, om en aan het gebouw en de directe omgeving. Een doelsoort is een plant of dier die belangrijk is voor de natuur. Ook is een doelsoort typisch voor de natuur in een bepaald gebied. De maatregelen zijn niet alleen goed voor de gekozen doelsoort, maar ook voor andere soorten planten en dieren..".

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Bevinding 30: Op https://rekenhulp.duurzaamcapelle.nl/ kan bij stap 5 een PDF-document gedownload worden waarin de ingevulde gegevens staan. Bij dit PDF-document is geen taal ingesteld. Dit kan aangepast worden in de documenteigenschappen.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 31: Op https://rekenhulp.duurzaamcapelle.nl/ staat in stap 1 een kaart. De taal die in de kaart gebruikt wordt is Engels. Er is voor de Engelstalige tekst geen taalwisseling aangegeven en dit moet wel. Dit kan gedaan worden met het attribuut lang="en" op de elementen die de Engelse tekst bevatten. De tekst kan ook naar het Nederlands vertaald worden.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 32: Op https://rekenhulp.duurzaamcapelle.nl/ staat in stap 1 onder de kop "Biodiversiteit: doelsoorten" een overzicht van te selecteren doelsoorten. Als er nog niet genoeg zijn geselecteerd, staat hierbij een foutmelding, bijvoorbeeld "Selecteer minimaal 3 doelsoorten". Dit is geen goede foutmelding. Een foutmelding moet aangeven dat er een fout gemaakt is en wat de fout is, bijvoorbeeld "Er zijn niet genoeg doelsoorten geselecteerd".

Bevinding 33: Op https://rekenhulp.duurzaamcapelle.nl/ staan bij stappen 1 tot en met 3 invoervelden waar cijfers ingevuld moeten worden. Als hier een letter wordt ingevuld, verschijnt een melding "Vul alsjeblieft een getal in". Dit is geen goede foutmelding. Een foutmelding moet aangeven dat er een fout gemaakt is en wat de fout is, bijvoorbeeld "Er is geen getal ingevuld, vul alsjeblieft een getal in".

Bevinding 34: Advies: als op https://rekenhulp.duurzaamcapelle.nl/ bij stap 2 nog niet het hele oppervlakte van de kavel is beschreven, is het niet mogelijk om naar de volgende stap te gaan. Hoewel er wel in de instructies staat dat elke vierkante meter beschreven moet worden, zou een goede foutmelding hier kunnen helpen om aan te geven dat dat de reden is dat er nog niet naar de volgende stap doorgegaan kan worden.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 35: Op https://rekenhulp.duurzaamcapelle.nl/ staan bij stap 1 en 2 selectievakjes en keuzerondjes. Bij stap 1 bijvoorbeeld bij de vraag "Is dit een nieuwbouwproject, een transformatie, of een grote renovatie?". Van de keuzerondjes (radiobuttons) kan de rol niet bepaald worden door hulpsoftware. Er is wel een input-element met role="radio" aanwezig in de code, maar deze is verborgen voor hulpsoftware. Hierdoor is de rol nu niet duidelijk. Los dit op door dit element op een andere manier te verbergen of door het element dat nu zichtbaar is de goede rol te geven.
Dit probleem komt ook voor bij selectievakjes, bijvoorbeeld bij de vraag "Ondersteunde doelsoorten" bij stap 1. Doordat het input-element voor hulpsoftware verborgen is, kan ook de status (welke optie is aangevinkt) niet bepaald worden.

Bevinding 36: Op https://rekenhulp.duurzaamcapelle.nl/ staan bij stappen 1 tot en met 3 elementen met daarin een icoon met een "i" erin. De rol van deze elementen kan door hulpsoftware niet goed bepaald worden, omdat deze niet is aangegeven. Het is nu in de code alleen een div-element. Geef dit element een passende rol, bijvoorbeeld "button". Zorg ervoor dat de manier waarop het element werkt overeenkomt met de rol die het krijgt.

Bevinding 37: Op https://rekenhulp.duurzaamcapelle.nl/ staan bij stappen 1 tot en met 3 elementen met daarin een icoon met een "i" erin. Als een dergelijk element geactiveerd wordt, verschijnt een dialoogvenster. De rol van dit dialoogvenster kan niet bepaald worden door hulpsoftware, omdat deze niet is aangegeven. Gebruik hiervoor role="dialog". Zie ook pagina https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 38: Op https://rekenhulp.duurzaamcapelle.nl/ staan bij stappen 1 tot en met 3 invoervelden waar cijfers ingevuld moeten worden. Als hier een letter wordt ingevuld, verschijnt een melding "Vul alsjeblieft een getal in". Een dergelijke melding is een statusbericht: deze verschijnt naar aanleiding van een actie van de gebruiker en ontvangt geen focus. Om te zorgen dat iemand die de melding niet ziet, deze wel meekrijgt, moeten deze meldingen een attribuut meekrijgen waardoor hun inhoud aan hulpsoftware wordt overgebracht. Dit kan voor foutmeldingen door middel van het attribuut role="alert". Het element met dit attribuut moet al in de DOM staan als de pagina is geladen.

Bevinding 39: Op https://rekenhulp.duurzaamcapelle.nl/ staat bij stap 1 onder de kop "Biodiversiteit: doelsoorten" de vraag "Ondersteunde doelsoorten". Als hier nog niet genoeg soorten zijn geselecteerd, staat er de melding "Selecteer minimaal 3 doelsoorten". Deze verdwijnt als er genoeg geselecteerd zijn, maar kan dan weer opnieuw verschijnen. Ook deze melding is een statusbericht en moet als zodanig opgemaakt worden. Gebruik voor deze foutmelding bijvoorbeeld het attribuut role="alert". Het element met dit attribuut moet al in de DOM staan als de pagina is geladen.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

• Rekenhulp:
  https://rekenhulp.duurzaamcapelle.nl/
• PDF:
  Het PDF-document dat te downloaden is in stap 5

Ondersteunende technieken

• CSS
• HTML5
• WAI-ARIA
• DOM
• ECMAScript 5
• PDF
• SVG

Bronnen

• Evaluatiedocument WCAG 2.0
  www.drempelvrij.nl/over-het-waarmerk
• Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
  www.w3.org/Translations/WCAG20-nl
• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.