Rapport in PDF

Onderzoek toegankelijkheid Daretodreamin036 versie 1.1

Inleiding

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

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

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

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

Over deze evaluatie

Rapport auteur
Janita Top
Evaluatie opdrachtgever
Gemeente Almere
Evaluatiedatum
6 augustus 2024

Managementsamenvatting

Dit onderzoek is een hertoetsing van het eerste onderzoek in 2021. Uit deze hertoetsing blijkt dat wordt voldaan aan 42 van de 50 criteria voor toegankelijkheid.

Veel onderdelen van de site zijn dus al goed toegankelijk. Zo is de website goed te gebruiken op mobiel en zijn alle onderdelen met het toetsenbord te bedienen. Ook zijn er geen bewegende onderdelen aanwezig die de bezoeker kunnen afleiden. Er zijn echter nog wel verbeteringen mogelijk.Zo zijn er nog invoervelden zonder label gevonden. Ook is het kleurcontrast niet overal voldoende, zoals bij de foutmeldingen.

Scope van de evaluatie

Website naam
daretodreamin036.nl
Scope van de website
Alle pagina's op https://www.daretodreamin036.nl/.
WCAG Versie
2.1
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare webbrowsers en hulpapparatuur.
Verdere onderzoeksvereisten
Niet ingevuld

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 50 van 50 WCAG 2.1 AA Success Criteria.

Alle resultaten

1 Waarneembaar

1.1 Tekstalternatieven
Success Criterium Uitkomst Bevindingen
1.1.1: Niet-tekstuele content
Hele sample

Uitkomst: Voldoende
1.2 Op tijd gebaseerde media
Success Criterium Uitkomst Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Hele sample

Uitkomst: Voldoende
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing
1.2.4: Ondertitels voor doven en slechthorenden (live)
Hele sample

Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)
Hele sample

Uitkomst: Niet van toepassing
1.3 Aanpasbaar
Success Criterium Uitkomst Bevindingen
1.3.1: Info en relaties
Hele sample

Uitkomst: Onvoldoende

Home

Uitkomst: Onvoldoende

Deel je droom

Uitkomst: Onvoldoende

Activiteiten

Uitkomst: Onvoldoende

Privacybeleid

Uitkomst: Voldoende

Nieuwe activiteit aanmaken

Uitkomst: Onvoldoende
Home

Onderaan de pagina staat de tekst “Deel hier je droom!”. Deze tekst is opgemaakt als kop 3. Dit is geen kop omdat er geen content onder staat. Voor een blinde gebruiker die een lijst met koppen genereert om de pagina te scannen is het verwarrend als tekst is opgemaakt als kop, terwijl het geen kop is. Verwijder het h3-element en gebruik CSS om deze tekst opvallend te stylen.

Deel je droom

De tekst in de rode alinea onder de grote afbeelding is opgemaakt als koptekst, terwijl het geen koptekst is. Ook de afsluiting van laatste alinea
(“Vul het formulier hieronder in!”) is als koptekst opgemaakt, terwijl het geen kop is.

Hertoetsing: de paragrafen zijn niet meer opgemaakt met koppen, maar wel met het strong-element. Dit element is bedoeld om één of enkele woorden uit te lichten, niet een gehele paragraaf. Gebruik CSS om dit te stylen. Dit komt op meerdere pagina’s voor.

Activiteiten

In het midden van de pagina 5 staat een artikel “Beroep: zanger/zangeres”. Als op dit artikel wordt geklikt, opent een pop-up. In dat scherm zijn twee alinea’s schuin gedrukt met een em-element. Op pagina 14 is de eerste alinea opgemaakt met het em-element. Het em-element heeft een bepaalde semantische betekenis en mag alleen gebruikt worden om op enkele woorden of zinsdelen nadruk te leggen.

Privacybeleid

Opmerking hertoetsing: onder Contact is binnen de lijst witruimte gebruikt om een tabel layout te creëren. Hiervoor kan beter een tabel of definition list gebruikt worden
(dl-element).

Nieuwe activiteit aanmaken

De labels zijn niet programmatisch geassocieerd met de invoervelden. Er zijn ‘for’ attributen aanwezig op de labels, maar de ‘id’ op de invoervelden ontbreken. Hertoetsing: de verwijzingen naar de id’s zijn nog niet correct. Bijvoorbeeld:

  • Bij ‘Toon op sites’ verwijzen 2 labels naar hetzelfde id
    (‘sites1’).
  • De input ‘Choose files’ heeft geen label, evenals het tekstveld voor de alt-tekst.
  • De checkboxes voor toestemming hebben geen label.
  • Onder ‘Kies week in de maand’ heeft de eerste checkbox het label ‘Eerste Tweede Derde Vierde Vijfde Laatste’ en de overige checkboxes hebben geen label. Let er op dat de velden waar de labels naar verwijzen daadwerkelijk deze id’s hebben.

Sommige vragen in dit formulier hebben meerdere antwoorden
(selectievakjes). Deze elementen vormen samen een groep, maar zijn in de code niet als dusdanig aangegeven. Zie bijvoorbeeld “Toon op sites”, “Kies leeftijd” en meer. Hertoetsing: er zijn nu fieldsets, maar ze hebben niet alle een label. Zie bijvoorbeeld 'Kies dag in de week'. Deze heeft een fieldset zonder legend.
1.3.2: Betekenisvolle volgorde
Hele sample

Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen
Hele sample

Uitkomst: Voldoende
1.3.4: Weergavestand
Hele sample

Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input
Hele sample

Uitkomst: Voldoende
1.4 Onderscheidbaar
Success Criterium Uitkomst Bevindingen
1.4.1: Gebruik van kleur
Hele sample

Uitkomst: Voldoende
1.4.2: Geluidsbediening
Hele sample

Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)
Hele sample

Uitkomst: Onvoldoende

Nieuwe activiteit aanmaken

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Onderstaande elementen op de website zitten qua contrast onder deze waarden.

Nieuwe activiteit aanmaken

Hertoetsing:

  • De foutmeldingen in rood op wit/lichtblauw
    (ongeveer 3:1).
  • De data in de kalender
    (wit/oranje, 2.4:1).
1.4.4: Herschalen van tekst
Hele sample

Uitkomst: Onvoldoende

Home

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

Maak de layout zodanig responsive dat alle content bij inzoomen tot minimaal 200% beschikbaar blijft. Op onderstaande plekken op de site is dit niet het geval.

Home

Hertoetsing: Als je op 150% en meer ingezoomd op de homepage de zoekknop voor ‘Ik zoek…’ activeert, is de lijst met suggesties niet meer aanklikbaar of geheel niet meer zichtbaar.
1.4.5: Afbeeldingen van tekst
Hele sample

Uitkomst: Voldoende
1.4.10: Reflow
Hele sample

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

Maak de layout zodanig responsive dat alle content en functionaliteit bij inzoomen tot 400%
(vergelijkbaar met 320 px breed) goed bruikbaar blijft, en er niet in twee richtingen gescrold hoeft te worden. Op onderstaande plekken op de site is dit niet het geval. (Getest op 1280px breed.)

Hertoetsing: Op 400% ingezoomd valt een deel van het menu beneden buiten beeld. Er kan ook niet heen gescrold worden, omdat het scrollen op de pagina erachter gebeurt.
1.4.11: Contrast van niet-tekstuele content
Hele sample

Uitkomst: Onvoldoende

Nieuwe activiteit aanmaken

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

Grafische elementen moeten een contrast hebben van minimaal 3:1. Dit geldt ook voor de randen of achtergrondkleur van invoervelden. Onderstaande elementen op de website zitten qua contrast onder deze waarden.

Nieuwe activiteit aanmaken

Hertoetsing: Het invoerveld voor de beschrijving
(wit/lichtgrijs/lichtblauw).
1.4.12: Tekstafstand
Hele sample

Uitkomst: Voldoende
1.4.13: Content bij hover of focus
Hele sample

Uitkomst: Voldoende

2 Bedienbaar

2.1 Toetsenbordtoegankelijk
Success Criterium Uitkomst Bevindingen
2.1.1: Toetsenbord
Hele sample

Uitkomst: Voldoende
2.1.2: Geen toetsenbordval
Hele sample

Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen
Hele sample

Uitkomst: Voldoende
2.2 Genoeg tijd
Success Criterium Uitkomst Bevindingen
2.2.1: Timing aanpasbaar
Hele sample

Uitkomst: Niet van toepassing
2.2.2: Pauzeren, stoppen, verbergen
Hele sample

Uitkomst: Niet van toepassing
2.3 Toevallen en fysieke reacties
Success Criterium Uitkomst Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde
Hele sample

Uitkomst: Voldoende
2.4 Navigeerbaar
Success Criterium Uitkomst Bevindingen
2.4.1: Blokken omzeilen
Hele sample

Uitkomst: Voldoende
2.4.2: Paginatitel
Hele sample

Uitkomst: Voldoende
Hele sample

Bevindingen:

Opmerking: De organisatienaam ontbreekt bij alle paginatitels. Deze naam helpt de gebruiker onderscheid te maken tussen pagina’s met dezelfde naam, maar van een andere website, bijvoorbeeld “Contact”.
2.4.3: Focus volgorde
Hele sample

Uitkomst: Voldoende
2.4.4: Linkdoel (in context)
Hele sample

Uitkomst: Voldoende
2.4.5: Meerdere manieren
Hele sample

Uitkomst: Voldoende
2.4.6: Koppen en labels
Hele sample

Uitkomst: Voldoende
2.4.7: Focus zichtbaar
Hele sample

Uitkomst: Onvoldoende

Activiteiten

Uitkomst: Onvoldoende
Activiteiten

De activiteiten op deze pagina worden via links als pop-up geopend. Als een pop-up geopend is, verplaatst de focus zich niet naar de pop-up, maar blijft op de onderliggende pagina lopen. De gebruiker ziet dan niet waar de focus zich bevindt. Hertoetsing: de focus verplaatst nu naar de popup, maar loopt daarna door op de onderliggende pagina. Zorg dat de focus alleen op de onderliggende pagina kan komen als de popup weer gesloten is.
2.5 Input Modaliteiten
Success Criterium Uitkomst Bevindingen
2.5.1: Aanwijzergebaren
Hele sample

Uitkomst: Niet van toepassing
2.5.2: Aanwijzerannulering
Hele sample

Uitkomst: Voldoende
2.5.3: Label in naam
Hele sample

Uitkomst: Onvoldoende
Hele sample

Bevindingen:

De zogenaamde ‘hamburger’ knop is niet met de stem te bedienen. De toegankelijke naam van deze knop is “Toon navigatie”. De zichtbare tekst is “menu”. Let op: ‘aria-label’ overschrijft de content van de knop.
2.5.4: Bewegingsactivering
Hele sample

Uitkomst: Niet van toepassing

3 Begrijpelijk

3.1 Leesbaar
Success Criterium Uitkomst Bevindingen
3.1.1: Taal van de pagina
Hele sample

Uitkomst: Voldoende
3.1.2: Taal van onderdelen
Hele sample

Uitkomst: Niet van toepassing
3.2 Voorspelbaar
Success Criterium Uitkomst Bevindingen
3.2.1: Bij focus
Hele sample

Uitkomst: Voldoende
3.2.2: Bij input
Hele sample

Uitkomst: Voldoende
3.2.3: Consistente navigatie
Hele sample

Uitkomst: Voldoende
3.2.4: Consistente identificatie
Hele sample

Uitkomst: Voldoende
3.3 Assistentie bij invoer
Success Criterium Uitkomst Bevindingen
3.3.1: Foutidentificatie
Hele sample

Uitkomst: Voldoende
3.3.2: Labels of instructies
Hele sample

Uitkomst: Voldoende
3.3.3: Foutsuggestie
Hele sample

Uitkomst: Voldoende
3.3.4: Foutpreventie (wettelijk, financieel, gegevens
Hele sample

Uitkomst: Niet van toepassing

4 Robuust

4.1 Compatibel
Success Criterium Uitkomst Bevindingen
4.1.1: Parsen
Hele sample

Uitkomst: Voldoende
4.1.2: Naam, rol, waarde
Hele sample

Uitkomst: Onvoldoende

Home

Uitkomst: Onvoldoende
Home

Onder de grote afbeelding staat een zoekbalk. Het invoerveld in deze zoekbalk heeft geen toegankelijke naam. Er is een placeholder tekst aanwezig, maar deze kan niet als toegankelijke naam dienen omdat het verdwijnt zodra de bezoeker begint te typen. Dit geldt ook voor de tweede zoekbalk onder de video. Hertoetsing: de input heeft nu een naam, maar geeft nog niet aan hulpsoftware door dat er een lijst met suggesties is geopend. Dit kan worden gedaan door het aria-expanded-attribuut toe te voegen.
4.1.3: Statusberichten
Hele sample

Uitkomst: Voldoende

Sample met getoetste webpagina's

  1. Home - https://www.daretodreamin036.nl/
  2. Deel je droom - https://www.daretodreamin036.nl/deel-je-droom
  3. Ervaringen van jongeren - https://www.daretodreamin036.nl/ervaringen-van-jongeren
  4. Contact - https://www.daretodreamin036.nl/contact
  5. Activiteiten - https://www.daretodreamin036.nl/activiteiten
  6. FAQ - https://www.daretodreamin036.nl/faq
  7. Hoe werkt het - https://www.daretodreamin036.nl/hoe-werkt-het
  8. Inloggen - https://www.daretodreamin036.nl/inloggen
  9. Wachtwoord opvragen - https://www.daretodreamin036.nl/inloggen?tx_felogin_pi1%5Bforgot%5D=1&cHash=f9cef9c98fa885127a77ded683d04e31
  10. Privacybeleid - https://www.daretodreamin036.nl/privacybeleid
  11. Activiteit aanmelden/overzicht mijn activiteiten - https://www.daretodreamin036.nl/activiteit-aanmelden
  12. Nieuwe activiteit aanmaken - https://www.daretodreamin036.nl/activiteit-aanmelden?tx_sfeventmgt_pievent%5Baction%5D=new&tx_sfeventmgt_pievent%5Bcontroller%5D=Edit&cHash=3bc270eb5e030722f8d14c24add5a512
  13. Organisaties - https://www.daretodreamin036.nl/organisaties
  14. Help mee - https://www.daretodreamin036.nl/help-mee

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,SVG

Onderbouwing van de evaluatie

Gebruikte systemen tijdens het onderzoek: