Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Rotterdam leert je leven

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Rotterdam leert je leven
Datum 12 september 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op rotterdamleertjeleven.nl/
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 37

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: In de footer van de website staat de tekst "Rotterdam. Make it happen". Dit is een echter een SVG, geen tekst. De SVG heeft geen alternatieve tekst. Hierdoor is voor hulpsoftware de inhoud van de SVG niet toegankelijk. Geef de SVG een alternatieve tekst om dit op te lossen.

Bevinding 2: Op https://rotterdamleertjeleven.nl/ zijn er SVG's die geen alternatieve tekst hebben, bijv. <svg class="icon icon-route size-4 flex-none"></svg>. Deze iconen zijn niet decoratief en geven meer context aan de informatie naast het pictogram. Los dit op met role=img en een title-element met een alternatieve tekst als eerste child-element toe te voegen. Dit speelt ook op https://rotterdamleertjeleven.nl/walk-with-me/.

Bevinding 3: Op https://rotterdamleertjeleven.nl/ zijn er SVG's die decoratief zijn maar niet als zodanig zijn aangemerkt (bijv. <svg class="icon icon-comment size-6"></svg> en <svg class="icon icon-arrow-right size-4"></svg>). Sommige browser-screenreader-combinaties zien de svg als afbeelding. Verberg daarom de inline SVG voor hulpsoftware; gebruik hiervoor bijvoorbeeld aria-hidden="true".

Bevinding 4: De foto van Floor op https://rotterdamleertjeleven.nl/ambassadeur/floor/ heeft geen alt-tekst. Deze foto is wel een belangrijk onderdeel van de pagina en voegt verdere context en informatie toe. Geef alt-tekst die de foto duidelijk beschrijft.

Bevinding 5: Op https://rotterdamleertjeleven.nl/event/end-of-summer-party/ heeft de foto geen alt-tekst. Afbeeldingen met tekst moeten de tekst altijd als alt-tekst hebben. Voeg de alt-tekst toe. Dit probleem geldt ook voor het logo op https://rotterdamleertjeleven.nl/event/hop-on-hop-off-tour-2/.

Bevinding 6: De dienstregeling op https://rotterdamleertjeleven.nl/event/hop-on-hop-off-tour-2/ heeft geen toegankelijk alternatief. De dienstregeling wordt enkel in een afbeelding aangeboden. Complexe afbeeldingen zoals infographics, diagrammen en grafieken bevatten veel informatie, vaak meer dan wat meegegeven kan worden in een korte zin. In deze gevallen is een tweedelig tekstalternatief nodig: de korte omschrijving om de afbeelding te identificeren en (indien nodig) de locatie aan te geven van de uitgebreide beschrijving, plus de uitgebreide beschrijving, die alle belangrijke en essentiële informatie uit de afbeelding tekstueel weergeeft. Geef in de alt-tekst mee dat er een uitgebreide beschrijving aanwezig is. Creëer een paragraaf dat alle essentiële en belangrijke informatie uit de afbeelding bevat en link deze paragraaf met het aria-describedby attribuut aan de afbeelding. De paragraaf kan ook een link zijn naar een pagina met uitgebreide uitleg.

Bevinding 7: De routekaart op https://rotterdamleertjeleven.nl/route/abdullah-alharbali/ heeft geen toegankelijk alternatief. Complexe afbeeldingen zoals kaarten bevatten veel informatie, vaak meer dan wat meegegeven kan worden in een korte zin. In deze gevallen is een tweedelig tekstalternatief nodig: de korte omschrijving om de afbeelding te identificeren en (indien nodig) de locatie aan te geven van de uitgebreide beschrijving, plus de uitgebreide beschrijving, die alle belangrijke en essentiële informatie uit de afbeelding tekstueel weergeeft. Geef in de alt-tekst mee dat er een uitgebreide beschrijving aanwezig is. Creëer een paragraaf dat alle essentiële en belangrijke informatie uit de afbeelding bevat en link deze paragraaf met het aria-describedby attribuut aan de afbeelding. De paragraaf kan ook een link zijn naar een pagina met uitgebreide uitleg. Dit speelt ook op https://rotterdamleertjeleven.nl/en/route/michline-plukker/.

Bevinding 8: De foto's in de routebeschrijving op https://rotterdamleertjeleven.nl/route/abdullah-alharbali/ hebben allemaal een leeg alt-attribuut. Aangezien de foto's hier wel context en verdere informatie geven, kunnen ze niet worden gezien als decoratief. Verzorg alt-tekst voor deze foto's die de foto's voldoende beschrijft. Dit speelt ook op https://rotterdamleertjeleven.nl/en/route/michline-plukker/ (zowel de foto's in de routebeschrijving als de foto van Michelle zelf).

Bevinding 9: De foto van Abdullah op https://rotterdamleertjeleven.nl/route/abdullah-alharbali/ heeft een incorrecte alt-tekst, namelijk: "© Stacii Samidin". Pas de alt-tekst aan, zodat het duidelijk is dat het om Abdullah gaat.

Bevinding 10: De logo's van de partners op https://rotterdamleertjeleven.nl/over/ hebben geen alt-tekst. Verzorg alt-tekst voor deze logo's om deze toegankelijk te maken voor hulpsoftware. Dit geldt ook voor de foto op https://rotterdamleertjeleven.nl/event/mainport-next-event-2/.

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)

Uitkomst: Onvoldoende

Bevinding 11: Op https://rotterdamleertjeleven.nl/ is er een video zonder audio aanwezig. Deze video heeft geen transcript of audiodescriptie als toegankelijk alternatief. Voeg een transcript of audiodescriptie toe om aan dit criterium te voldoen.

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

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

Uitkomst: Onvoldoende

Bevinding 12: Op pagina https://rotterdamleertjeleven.nl/ambassadeur/julian/ is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld aan het begin en eind van de video. Ook wordt het logo van de website in de video niet benoemt. Er ontbreekt uitgeschreven tekst en er is geen audiodescriptie die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van hulpsoftware zoals een schermvoorleessoftware niet weten wat er wordt getoond in de video. Zet deze en andere informatie in een transcript. Of maak gebruik van een extra audiospoor om ook te voldoen aan SC 1.2.5.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 13: Op pagina https://rotterdamleertjeleven.nl/ambassadeur/julian/ is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld aan het begin en eind van de video. Ook wordt het logo van de website in de video niet benoemt. Er ontbreekt uitgeschreven tekst en er is geen audiodescriptie die vertelt wat er op het scherm staat. Voeg deze informatie toe aan de audiodescriptie, of laat alle informatie uitspreken door de voice-over waardoor de audiodescriptie overbodig wordt.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 14: De quote van Hoessein op https://rotterdamleertjeleven.nl/ is niet opgemaakt als een quote, maar is een gewoon div-element. Gebruik voor quotes ofwel aanhalingstekens en/of het quote (<q>) of blockquote (<blockquote>) element, in plaats van een andere opmaak.

Bevinding 15: De kop "Waarom Rotterdam?" op https://rotterdamleertjeleven.nl/ambassadeur/floor/ is niet opgemaakt als een kop. Gebruik de juiste HTML-code om deze koppen op te maken en let op het juiste kopniveau. Dit geldt ook voor de kop "The Route" op de pagina's https://rotterdamleertjeleven.nl/en/route/michline-plukker/ en https://rotterdamleertjeleven.nl/route/abdullah-alharbali/.

Bevinding 16: De uitklapbare blokjes op https://rotterdamleertjeleven.nl/jouw-leven-in-rotterdam/ zijn opgemaakt met een "description list" element. Semantisch is dit niet de correcte opmaak, aangezien een "description list" element gebruikt dient te worden om begrippen uit te leggen. Maak deze blokjes correct op als een accordeon.

Bevinding 17: Advies: de paginatitel "Jouw leven in Rotterdam." op https://rotterdamleertjeleven.nl/jouw-leven-in-rotterdam/ is een `<h2>`. Het is een best practice voor correcte code en om hiërarchie correct weer te geven dat er geen niveau wordt overgeslagen en er wordt begonnen met een `<h1>`. Ook voor SEO is het gebruik van koppen belangrijk, zeker omdat een `<h1>` in veel gevallen de paginatitel is.

1.4 Onderscheidbaar

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Voldoende

Bevinding 18: Advies: bij het vergroten van de tekst naar 200%, valt op dat er weinig marge is tussen de content en de rand van de browser. Hoewel dit geen inbreuk is op WCAG, adviseren we wel om ervoor te zorgen dat er witruimte is tussen de content en de rand van de browser.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 19: In de footer van de website staat de tekst "Rotterdam. Make it happen". Dit is een echter een SVG, geen tekst. Aangezien hetzelfde bereikt kan worden met HTML en CSS, is dit een inbreuk op dit criterium. Gebruik HTML en CSS om de tekst op te maken.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 20: Bij het aanpassen van zowel de tekstgrootte als de viewport (Reflow) op alle pagina's waaronder https://rotterdamleertjeleven.nl/ schuiven het logo en het mobiele menu mee bij het scrollen, waardoor content steeds bedekt wordt.

Bevinding 21: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% dan verdwijnt op pagina https://rotterdamleertjeleven.nl/ tekst. Dit komt dat de blokken onder "Wat past bij jou"? naast elkaar blijven staan, zodat niet alle blokken leesbaar zijn. Zorg ervoor dat teksten in beeld blijven staan zonder een scrollbalk in de leesrichting (horizontaal) te krijgen.

Bevinding 22: Op https://rotterdamleertjeleven.nl/jouw-leven-in-rotterdam/ valt een stuk weg van de pagina "Jouw leven in Rotterdam". Zorg dat tekst niet afgekapt wordt als de tekstgrootte en viewport worden aangepast.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 23: In de footer op alle pagina's waaronder https://rotterdamleertjeleven.nl/ staat de tekst "Rotterdam. Make it happen". Bij het aanpassen van de tekstafstand wordt deze tekst niet aangepast. Gebruik HTML en CSS om deze tekst in de footer te zetten om dit op te lossen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 24: Op pagina https://rotterdamleertjeleven.nl/en/route/michline-plukker/ 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 hulpsoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met hulpsoftware hun computer te bedienen.
Op dit moment werkt de oplossing die we normaalgesproken zouden adviseren ('disablekb=1' toevoegen aan de URL) niet goed. De normale bediening gaat bij deze oplossing goed, maar zodra je instellingen wil aanpassen (zoals afspeelsnelheid) werkt dit niet via het toetsenbord. Daarom is een YouTube-videospeler (momenteel) niet goed toetsenbordtoegankelijk. Daarom adviseren we, tot dit probleem is opgelost, om andere videospeler te gebruiken.

2.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Uitkomst: Onvoldoende

Bevinding 25: Op pagina https://rotterdamleertjeleven.nl/ begint direct na het openen een video af te spelen die langer dan 3 seconden duurt. Zorg ervoor dat er een mogelijkheid is om automatisch afspelend beeld te pauzeren of te stoppen. Zorg dat dit een van de eerste interactieve elementen op de pagina is die focus krijgt, bovenaan de pagina.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 26: Op https://rotterdamleertjeleven.nl/ambassadeurs/ bevat ieder blok met ambassadeurs dubbele links (eentje rondom de foto en de "bekijk mijn hotspots" link). Hierdoor ontvangt elke ambassadeur twee keer focus: een keer onzichtbaar en een keer zichtbaar. Dit kan verwarrend zijn voor bezoekers die gebruik maken van hulpsoftware. Zorg ervoor dat elke ambassadeur slechts 1 link heeft die focus ontvangt en bedienbaar is. Met Javascript kan de hele card van een ambassadeur klikbaar worden gemaakt.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 27: Op https://rotterdamleertjeleven.nl/ambassadeurs/ bevat ieder blok met ambassadeurs dubbele links (eentje rondom de foto en de "bekijk mijn hotspots" link). De link rondom de foto heeft geen linktekst, bevat enkel de foto (zonder alt-tekst). Een link zonder linktekst of toegankelijke naam is verwarrend voor bezoekers die gebruik maken van hulpsoftware. Verwijder de link rondom de foto en maak met Javascript de hele card klikbaar met de muis.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 28: De taalkeuze in de header van de site is genest in een aside-landmark. Op de <aside> is een tabindex-attribuut geplaatst met als waarde "0" om het bedienbaar te maken met het toetsenbord. Bij custom widgets zoals de listbox dient er inderdaad het tabindex-attribuut gebruikt te worden, maar met de waarde -1, zodat de focus en bediening met Javascript geregeld kunnen worden.

Bevinding 29: Op https://rotterdamleertjeleven.nl/route/abdullah-alharbali/ krijgen de markers, de knoppen en de link "Leaflet" in de kaart geen zichtbare focusindicator. Alle interactieve elementen dienen een zichtbare focusindicator te ontvangen. Los dit op door de CSS aan te passen en een focus stijl toe te voegen. Dit speelt ook op https://rotterdamleertjeleven.nl/en/route/michline-plukker/.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 30: Diverse Engelstalige stukjes tekst zijn niet als zodanig gemarkeerd, waardoor een screenreader deze stukjes niet correct zal voorlezen. Het gaat bijvoorbeeld om de tekst "Walk with me" in de navigatie, de tekst "Make it happen" in de footer en Engelstalige titels van agenda items op https://rotterdamleertjeleven.nl/agenda/. Hiervoor moet in de code een taalwisseling aangegeven worden. Dit kan door de omliggende html-code een lang="en" attribuut toe te voegen.

Bevinding 31: Het <aside> element in het menu op onder andere pagina https://rotterdamleertjeleven.nl die de taalkeuze widget bevat heeft een Engelstalig label. Vertaal deze naar het Nederlands.

Bevinding 32: De pagina https://rotterdamleertjeleven.nl/agenda/ heeft een Engelstalige paginatitel. Vertaal deze naar het Nederlands.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 33: Bij de taalkeuze in de header van de site, wordt ARIA verkeerd toegepast. De talen staan in een <li> element met het attribuut role="option". Het <ul> element waarin ze genest zijn heeft echter geen passende aria-rol van listbox. Voeg de rol toe.

Bevinding 34: De taalkeuze in de header heeft interactieve elementen die in elkaar genest zijn. Het is geprogrammeerd als een listbox, dus elk keuze item is al interactief. In de code bevat elk keuze item nog een link, waardoor er interactieve elementen genest worden. Dit kan problemen veroorzaken met screenreaders. Pas de listbox aan zodat er geen links meer gebruikt hoeven te worden, of gebruik in plaats van een listbox de links.

Bevinding 35: De taalkeuze in de header van de site is genest in een aside-landmark. Op de <aside> wordt het attribuut aria-expanded gebruikt. Op dit element of rol (aside heeft de impliciete rol van complentary) mag dit attribuut niet gebruikt worden volgens de ARIA-standaard. Het attribuut dient geplaatst te worden op de <ul> met de rol van listbox.

Bevinding 36: De markers in de kaart op https://rotterdamleertjeleven.nl/route/abdullah-alharbali/ hebben geen toegankelijke naam en geen rol waardoor ze niet herkend worden als interactief element. Gebruik een interactief element voor de markers en zorg dat uit de toegankelijke naam duidelijk is dat het een marker voor voor begin- of eindpunt van de route is en dat de naam van de straat er ook in voorkomt. Dit speelt ook op https://rotterdamleertjeleven.nl/en/route/michline-plukker/.

Bevinding 37: Voor de uitklapbare blokjes op https://rotterdamleertjeleven.nl/jouw-leven-in-rotterdam/ wordt het attribuut aria-expanded gebruikt. Deze wordt echter niet op "true" gezet als een blokje wordt uitgeklapt. Zorg dat met Javascript het attribuut naar de juiste waarde wordt getoggled.

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

Ondersteunende technieken

Bronnen

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

Geprint: 2024-12-22 12:56:23 v2.4-011