Issues:
Quickscan digitale toegankelijkheid website Join the 2B

(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 de pagina https://test.jointhe2b.com/login staat het logo van The 2B Collective. Er is geen tekstalternatief beschikbaar voor dit logo waardoor bezoekers die het scherm niet kunnen zien niet dezelfde informatie meekrijgen als ziende bezoekers. Zorg ervoor dat het logo een alternatieve tekst krijgt waarin de organisatienaam en alle tekst in het logo staat. Dit kan bijvoorbeeld met een title-element, deze in het svg-element te plaatsen als eerste, directe afstammeling en het svg-elementen het attribuut role=img te geven.
Dit probleem komt ook voor bij hetzelfde logo op andere pagina's.

Bevinding 2: Op pagina https://test.jointhe2b.com/ staat informatie over de Challenges. Bij deze informatie staat ook hoeveel punten een challenge oplevert, dit wordt aangegeven met een afbeelding van munten en een getal. De afbeelding geeft informatie aan het getal en heeft daarom een alternatieve tekst nodig zodat niet-ziende bezoekers dezelfde informatie meekrijgen als ziende bezoekers.

Bevinding 3: Op pagina https://test.jointhe2b.com/challenges/153/quiz-questions/184 (Vraag 1 van Challenge 1) staat een afbeelding met daarin het recycleteken. Deze afbeelding is decoratief maar heeft wel een alternatieve tekst gekregen. Het tekstalternatief is 'Het opnieuw gebruiken van materialen', wat niet omschrijft wat op de afbeelding is te zien. Zorg ervoor dat een alternatieve tekst omschrijft wat er op de afbeelding is te zien of, in sommige gevallen, dezelfde informatie overbrengt als de afbeelding.
Dit komt vaker voor bij decoratieve afbeeldingen, vooral bij de decoratieve afbeeldingen in de Acties.

Bevinding 4: Bij het actie-overzichtspagina in Challenge is (https://test.jointhe2b.com/challenges/153/actions) staan blokken content met daarin afbeeldingen. Deze afbeeldingen zijn decoratief en hebben daarom geen alternatieve tekst. Het is wel nodig dat de img-elementen van deze afbeeldingen een leeg alt-attribuut krijgen. Zo weet hulpsoftware dat het hier om decoratieve afbeeldingen gaat en worden ze niet voorgelezen door screenreaders.

1.2 Op tijd gebaseerde media

1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)

Bevinding 5: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Bevinding 6: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Bevinding 7: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.2.4 Ondertitels voor doven en slechthorenden (live) (Niveau AA)

Informatie over succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)

Bevinding 8: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Bevinding 9: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 10: Bij Vraag 3/3 in de actie 'Sustainability quiz' in ‘Challenge 1’ staan bij elke oplossing verschillende knoppen met de label 1 tot en met 4. Voor ziende bezoekers is het duidelijk bij welke knoppen bij welke oplossing horen, maar bezoekers die afhankelijk zijn van een screenreader kunnen het onderscheidt tussen de knop 1 bij Paper recycling en de knop 1 bij Airconditioning systems niet maken. Zorg er daarom voor dat de relatie tussen knoppen en de bovenstaande oplossingen uit de code is te halen. Bijvoorbeeld door gebruik te maken van aria-label de toegankelijke naam van de knoppen aan te vullen met de bovenstaande oplossing.
Die probleem komt vaker voor op de website, bijvoorbeeld in de actie 'Duurzamere manier van reizen' van 'Challenge 1'.

Bevinding 11: In de actie 'Sustainability quiz' in 'Challenge 1' bij Vraag 3/3 worden de juiste en foute antwoorden aangeven met kleur. Naast dat deze informatie niet goed waar te nemen is voor mensen die kleurenblind zijn (zie ook SC 1.4.1) is de informatie ook niet beschikbaar voor hulpsoftware. Zorg ervoor dat in de code wordt aangegeven wat het antwoord is wat de bezoeker heeft geselecteerd en wat het juiste antwoord is. Dit kan bijvoorbeeld door gebruik te maken van verborgen teksten.

Bevinding 12: In de actie 'Kleine actie, grote impact' in 'Challenge 1' staan meerdere vragen met keuzerondjes. De keuzerondjes zijn niet gegroepeerd met de bijbehorende vraag. Hierdoor is het voor bezoekers die afhankelijk zijn van screenreaders lastig om te bepalen welke vraag bij de keuzerondjes hoort. Maak daarom gebruik van een Fieldset/Legend-combinatie in de code om de vragen en keuzerondjes de groeperen.
Dit probleem komt vaker voor op de website. Bijvoorbeeld in de actie 'Scoor je aanwinst' van 'Challenge 1'.

Bevinding 13: Bij Vraag 3/4 in de actie 'Op jacht naar de duurzaamheidsdoelstellingen' in 'Challenge 1' staat een slider met de vraag 'Zijn de doelstellingen ambitieus genoeg?'. De drie opties in de slider zijn gelabeld met emoticons die geïnterpreteerd kunnen worden als negatief, neutraal en positief. Echter, deze opties worden door een screenreader voorgelezen als -1, 0 en 1. Zorg ervoor dat de toegankelijk opties van deze slider hetzelfde zijn als de visuele opties. Of herformuleer de vraag zodat bezoekers bijvoorbeeld een cijfer moeten geven op een schaal. Dit geldt ook voor de andere slider in deze vraag.

Bevinding 14: Op pagina https://test.jointhe2b.com/faq is een opsomming te zien wanneer de knop 'Hoe kan ik de serious game spelen?' is uitgeklapt. Zorg ervoor dat opsommingen in de code altijd zijn opgemaakt als lijst.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 15: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Bevinding 16: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.3.4 Weergavestand (Niveau AA)

Informatie over succescriterium 1.3.4 Weergavestand

Bevinding 17: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 18: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 19: In de actie ‘Sustainability quiz’ in ‘Challenge 1’ kan de bezoeker bij Vraag 1/3 een optie selecteren en door op ‘Volgende’ te drukken ziet de bezoeker wat het goede antwoord is. Het goede antwoord wordt aangegeven met een groene kleur, wat voor bezoekers met slechtzicht of kleurenblindheid mogelijk niet te zien is. Zorg ervoor dat ook op een kleuronafhankelijke manier wordt aangegeven wat het goede antwoord is, bijvoorbeeld door het in tekst aan te geven of met een teken zoals een vinkje (wel met een tekstalternatief).
Dit probleem komt vaker voor op de website.

1.4.2 Geluidsbediening (Niveau A)

Informatie over succescriterium 1.4.2 Geluidsbediening

Bevinding 20: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 21: Op de website zijn meerdere contrastproblemen gevonden. Wanneer teksten een te laag contrast hebben kan het voor bezoekers met slechtzicht of kleurenblindheid lastig zijn deze te lezen. Zorg ervoor dat kleine teksten (tot 18pt of tot 14pt en dikgedrukt) een minimale contrastverhouding van 4,5:1 hebben en grote teksten (vanaf 18pt of vanaf 14pt en dikgedrukt) een minimale contrastverhouding van 3:1 hebben.

Enkele voorbeelden van teksten met een te laag contrast:

• Groene teksten (HEX#00BE78) op het dashboard hebben op de witte achtergrond een contrastverhouding van 2,3:1.
• Op https://test.jointhe2b.com/teams staan grijze teksten (HEX#A9B4B2) op een witte achtergrond, bijvoorbeeld de tekst 'Jouw team'. Deze teksten hebben een contrastverhouding van 2,1:1.
• Wanneer een knop op pagina https://test.jointhe2b.com/faq is uitgeklapt zijn grijze teksten (HEX#868686) op een witte achtergrond te zien. Deze teksten hebben een contrastverhouding van 3,6:1.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Bevinding 22: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Bevinding 23: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 24: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 25: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Bevinding 26: Dit criterium is niet (volledig) onderzocht in deze quickscan.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Bevinding 27: Bij de laatste pagina van de actie 'Kleine actie, grote impact' in 'Challenge 1' worden resultaten getoond in blokken content. In elke contentblok staat een i-icoon dat wanneer bezoekers hier met de muisaanwijzer overheen gaan extra informatie toont. De extra informatie kan niet worden verwijderd zonder de muisaanwijzer te bewegen. Ook is het niet mogelijk om de muisaanwijzer te laten bewegen over de extra informatie zonder dat deze verdwijnt. Zorg ervoor dat het voor bezoekers mogelijk is de aanvullende content de verwijderen zonder de muisaanwijzer te bewegen, bijvoorbeeld met de escape-toets, en dat zij de muisaanwijzer over de content kunnen bewegen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 28: Op onder andere pagina https://test.jointhe2b.com/ staat in het hoofdnavigatiemenu een uitvouwbare knop, gelabeld met de gebruikersnaam van de ingelogde bezoeker. Deze knop is niet te bedienen met het toetsenbord. Bezoekers die afhankelijk zijn van het toetsenbord om de website te bedienen kunnen hierdoor niet bij pagina's zoals 'Mijn account' en 'Veelgestelde vragen' komen. Zorg ervoor dat alle interactieve elementen op de website te bedienen zijn met het toetsenbord.

Bevinding 29: Bij de laatste pagina van de actie 'Kleine actie, grote impact' in 'Challenge 1' worden resultaten getoond in blokken content. In elke contentblok staat een i-icoon dat wanneer bezoekers hier met de muisaanwijzer overheen gaan informatie toont. Het is niet mogelijk om met het toetsenbord de focus op deze iconen te plaatsen en zo de aanvullende content zichtbaar te maken. Zorg ervoor dat bezoekers met het toetsenbord de focus op deze iconen kunnen plaatsen en dat zij de aanvullende content ook zichtbaar kunnen maken.

Bevinding 30: Bij Vraag 3/4 in de actie 'Op jacht naar de duurzaamheidsdoelstellingen' in 'Challenge 1' kunnen bezoekers twee vragen beantwoorden met ja of nee door op een knop te klikken. Deze knoppen zijn niet te bedienen met het toetsenbord.

Bevinding 31: Wanneer bezoekers op pagina https://test.jointhe2b.com/ inzoomen tot 125% verdwijnt het navigatiemenu achter een knop. Toetsenbordgebruikers kunnen de focus niet plaatsen op deze knop en navigatiemenu opnemen. Dit komt waarschijnlijk doordat de knop is opgemaakt met een a-element zonder href-attribuut, en niet met een button-elementen. Zorg ervoor dat deze knop te bedienen is met het toetsenbord.

2.1.2 Geen toetsenbordval (Niveau A)

Informatie over succescriterium 2.1.2 Geen toetsenbordval

Bevinding 32: Dit criterium is niet (volledig) onderzocht in deze quickscan.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Bevinding 33: Bij de laatste stap (4. Share) van 'Challenge 1' wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Bevinding 34: Dit criterium is niet (volledig) onderzocht in deze quickscan.

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Bevinding 35: Dit criterium is niet (volledig) onderzocht in deze quickscan.

2.3 Toevallen en fysieke reacties

2.3.1 Drie flitsen of beneden drempelwaarde (Niveau A)

Informatie over succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde

Bevinding 36: Dit criterium is niet (volledig) onderzocht in deze quickscan.

2.4 Navigeerbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Bevinding 37: Op geen van de geteste pagina's is een mechanisme aanwezig waarmee bezoekers herhalende blokken content kunnen omzeilen. Dit is belangrijk voor bezoekers die afhankelijke zijn van het toetsenbord voor navigatie. Met een mechanisme om content over te slaan hoeven deze bezoekers niet op elke pagina de toetsenbordfocus te plaatsen op dezelfde content. Zorg er daarom voor dat er een mechanisme aanwezig is waarmee bezoekers content wat op elke pagina staat, bijvoorbeeld het hoofdnavigatiemenu, kunnen overslaan. Dit kan bijvoorbeeld met een skiplink.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 38: Alle geteste pagina op de website hebben dezelfde paginatitel, namelijk 'Join the 2B'. Voor bezoekers die afhankelijk zijn hulpsoftware is het lastig om een pagina terug te vinden wanneer deze geen goede paginatitel heeft, vooral wanneer meerdere tabbladen open staan. Zorg er daarom voor dat alle pagina's een unieke paginatitel hebben die het hoofdonderwerp van de pagina omschrijft.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 39: In het eindscherm van de actie 'Kleine actie, grote impact' in 'Challenge 1' (https://test.jointhe2b.com/challenges/153/actions/494/end-screen/1) staat de mogelijkheid om de uitslag van de actie naar jezelf en een collega te mailen. Wanneer bezoekers hier op de knop 'Nog een collega toevoegen' klikken verschijnt een nieuw invoerveld boven de knop. Echter, de toetsenbordfocus blijft op de knop staan. Bezoekers die het scherm niet kunnen zien missen hierdoor het nieuwe invoerveld wat verschijnt. Zorg ervoor dat wanneer het nieuwe invoerveld op de pagina verschijnt de toetsenbordfocus hierop wordt geplaatst.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 40: Op de actie-overzichtspagina van Challenge 1 (https://test.jointhe2b.com/challenges/153/actions) komt meerdere keren dezelfde link voor. Het gaat hier om de link 'Start deze actie'. Visueel is duidelijk welke actie de bezoeker start door de link te activeren, maar dat is het niet voor bezoekers die het scherm niet kunnen zien. Zorg ervoor dat toegankelijke naam van deze links wordt aangevuld met de naam van de actie die de bezoeker start. Gebruik hiervoor aria-label of een soortgelijke techniek.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Bevinding 41: Dit criterium is niet (volledig) onderzocht in deze quickscan.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 42: Dit criterium is niet (volledig) onderzocht in deze quickscan.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 43: In het contentblok 'Community' op pagina https://test.jointhe2b.com/ staat de link 'Like'. Wanneer een bezoeker met het toetsenbord de focus plaatst op deze link voor dit niet aangegeven met een visuele indicatie. Bezoekers die afhankelijk zijn van het toetsenbord om de website te bedienen (en het scherm kunnen zien) weten zonder visuele indicatie niet op welk element de focus staat. Zorg er daarom voor dat wanneer de toetsenbordfocus op een element staat dit altijd wordt aangegeven met bijvoorbeeld een focusrand.
Dit probleem komt ook voor bij andere elementen. Bijvoorbeeld op pagina https://test.jointhe2b.com/colleagues bij het zoekveld en het keuzemenu en bij de actie 'Duurzamere manier van reizen' in 'Challenge 1'.

2.5 Input modaliteiten

2.5.1 Aanwijzergebaren (Niveau A)

Informatie over succescriterium 2.5.1 Aanwijzergebaren

Bevinding 44: Dit criterium is niet (volledig) onderzocht in deze quickscan.

2.5.2 Aanwijzerannulering (Niveau A)

Informatie over succescriterium 2.5.2 Aanwijzerannulering

Bevinding 45: Dit criterium is niet (volledig) onderzocht in deze quickscan.

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 46: Dit criterium is niet (volledig) onderzocht in deze quickscan.

2.5.4 Bewegingsactivering (Niveau A)

Informatie over succescriterium 2.5.4 Bewegingsactivering

Bevinding 47: Dit criterium is niet (volledig) onderzocht in deze quickscan.

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 48: Dit criterium is niet (volledig) onderzocht in deze quickscan.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 49: Dit criterium is niet (volledig) onderzocht in deze quickscan.

3.2 Voorspelbaar

3.2.1 Bij focus (Niveau A)

Informatie over succescriterium 3.2.1 Bij focus

Bevinding 50: Dit criterium is niet (volledig) onderzocht in deze quickscan.

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Bevinding 51: Dit criterium is niet (volledig) onderzocht in deze quickscan.

3.2.3 Consistente navigatie (Niveau AA)

Informatie over succescriterium 3.2.3 Consistente navigatie

Bevinding 52: Dit criterium is niet (volledig) onderzocht in deze quickscan.

3.2.4 Consistente identificatie (Niveau AA)

Informatie over succescriterium 3.2.4 Consistente identificatie

Bevinding 53: Dit criterium is niet (volledig) onderzocht in deze quickscan.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 54: Bij vraag 3/3 in de actie 'Sustainability quiz' in Challenge 1 (https://test.jointhe2b.com/challenges/153/actions/493/this-or-that/steps) is het mogelijk om bij de vraag fout te beantwoorden, bijvoorbeeld door bij elke oplossing de 1 knop te selecteren. De fout wordt herkend de bezoeker kan niet naar de volgende pagina, maar er verschijnt geen foutmelding. Zorg ervoor dat wanneer een fout in een formulier de bezoeker niet verder laat gaan met invullen/versturen, er een foutmelding op de pagina verschijnt.

Bevinding 55: Bij de actie 'Duurzamere manier van reizen' in 'Challenge 1' (https://test.jointhe2b.com/challenges/153/actions/496/calculator-two/product) verschijnt de foutmelding 'Geef hier aan voor welk product je de actie gaat invullen.' wanneer bezoekers het veld leeg proberen te versturen. Deze foutmelding geeft niet aan in welk veld de fout is gemaakt. Zorg ervoor dat de naam van het veld altijd in de foutmelding wordt genoemd. Dat maakt het voor bezoekers die het veld niet kunnen zien makkelijker om te achterhalen over welk veld de melding gaat.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 56: Dit criterium is niet (volledig) onderzocht in deze quickscan.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Bevinding 57: Dit criterium is niet (volledig) onderzocht in deze quickscan.

3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (Niveau AA)

Informatie over succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)

Bevinding 58: Dit criterium is niet (volledig) onderzocht in deze quickscan.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Bevinding 59: Dit criterium is niet (volledig) onderzocht in deze quickscan.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 60: In de actie 'Toonbeelden & bloopers' in 'Challenge 1' (https://test.jointhe2b.com/challenges/153/actions/492/safari) staat een statusbalk die aan bezoeker doorgeeft hoeveel zij van de actie hebben afgerond. Deze informatie is alleen beschikbaar voor ziende bezoekers. Zorg ervoor dat in de code wordt aangegeven hoeveel procent van de balk is gevuld zodat screenreaders die kan voorlezen, of plaats dit in tekst naast de balk.

Bevinding 61: In het eindscherm van de actie 'Kleine actie, grote impact' in 'Challenge 1' (https://test.jointhe2b.com/challenges/153/actions/494/end-screen/1) is het mogelijk voor bezoekers om extra invoervelden op de pagina te plaatsen. Elk invoerveld dat op de pagina wordt gezet heeft geen toegankelijke naam. Dit maakt het lastig voor bezoekers die afhankelijk zijn van screenreaders en spraakbediening om de velden in te vullen. De extra invoervelden hebben geen toegankelijke naam doordat de id's van alle invoervelden hetzelfde zijn, waardoor de labels gekoppeld worden aan één veld. Zorg ervoor dat elk invoerveld een uniek id heeft waarmee het gekoppeld is aan een label.

Bevinding 62: In de actie 'Waar zit jouw verborgen impact?' van 'Challenge 1' is gebruik gemaakt van een iframe-element. Zorg ervoor dat het iframe een title-attribuut krijgt wat het iframe goed omschrijft.

Bevinding 63: Bij vraag 2/4 in de actie 'Op jacht naar de duurzaamheidsdoelstellingen' in 'Challenge 1' kunnen bezoekers knoppen selecteren om zo een antwoord op de vraag te geven. Wanneer een knop is geselecteerd wordt dit niet in de code aangegeven. Hierdoor weten screenreadergebruikers niet welke knop is geselecteerd. Zorg ervoor dat de status van deze knoppen wordt aangeven in de code. Dit kan bijvoorbeeld door deze knoppen niet op te maken met het button-element maar als selectievakjes met het input-element en type=checkbox, wat ook een geschiktere rol is voor deze elementen.
Elementen met hetzelfde probleem komen meerdere keren voor op de website. Bijvoorbeeld in andere acties van 'Challenge 1'.

Bevinding 64: Wanneer bezoekers bij Vraag 2/4 in de actie 'Op jacht naar de duurzaamheidsdoelstellingen' in 'Challenge 1' bijvoorbeeld de knop Energie selecteren verschijnt een nieuw invoerveld op het scherm. Bij dit veld staat een knop waar toetsenbordgebruikers de focus op kunnen plaatsen. Deze knop heeft geen toegankelijke naam. Zorg ervoor dat deze knop een goede toegankelijke naam krijgt, bijvoorbeeld door gebruik te maken van aria-label.

Bevinding 65: Wanneer bezoekers op pagina https://test.jointhe2b.com/ inzoomen tot 125% verdwijnt het navigatiemenu achter een knop. Naast dat deze knop niet te bedienen is met het toetsenbord (zie SC 2.1.1), heeft de knop geen toegankelijke naam. Zorg ervoor dat deze knop een goede toegankelijke naam krijgt. Bijvoorbeeld door gebruik te maken van aria-label.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Bevinding 66: Bij Vraag 2/5 van de actie 'Bellen maar!' in 'Challenge 1' verschijnt een dialoogvenster over de pagina nadat bezoekers op de knop 'Ja' hebben gedrukt. Deze content in dit venster wordt niet voorgelezen door een screenreader. Hierdoor weet een screenreadergebruiker niet wat zich op het scherm afspeelt. Zorg ervoor dat wanneer nieuwe content op het scherm verschijnt dit wordt opgemerkt door hulpsoftware zoals screenreaders, bijvoorbeeld door gebruik te maken van aria-alert.

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

• Dashboard:
  https://test.jointhe2b.com/
• Login:
  https://test.jointhe2b.com/login
• Teams:
  https://test.jointhe2b.com/teams
• FAQ:
  https://test.jointhe2b.com/faq
• Collega's:
  https://test.jointhe2b.com/colleagues

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• DOM
• ECMAScript 5
• 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.