Toegankelijkheidsonderzoek

Issues:
Deelonderzoek content Rotterdam Centraal

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Rotterdammer Centraal
Scope van de website
  • Alle pagina's op de website rotterdammer.gebruikercentraal.nl
  • Niet de content op gebruikercentraal.nl en overige subdomeinen
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 42

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: De alternatieve tekst van het logo onder 'Partner' in de footer van de pagina (iedere pagina) is 'Interreg (North Sea Region) European Regional Development Fund. Dit is een fonds van de Europese Unie.' De alternatieve tekst van een logo moet altijd het woord 'Logo' en de naam van de organisatie bevatten, plus eventuele andere tekst op het logo. De tekst 'Dit is een fonds van de Europese Unie' staat niet op de afbeelding en is dan overbodig als tekstalternatief. Daarnaast gaat het hier om een link naar de site van Interreg, dus moet de alternatieve tekst ook het linkdoel beschrijven, zie ook 2.4.4.

Bevinding 2: De iconen van het klokje, de locatie, het euroteken en de kalender op onder andere pagina rotterdammer.gebruikercentraal.nl/agenda/save-the-date-… hebben geen alternatieve tekst. Deze iconen zeggen iets over hoe de tekst die er naast staat geïnterpreteerd moet worden en deze informatie is nu niet beschikbaar voor screenreadergebruikers. Let ook op het koppelstreepje tussen begin en eindtijd. Niet elke screenreader leest dit voor zodat de screenreader slechts 2 tijden voorleest terwijl visueel zichtbaar is dat dit een begin- en eindtijd is.
Dit geldt ook voor rotterdammer.gebruikercentraal.nl/evenementen/.

Bevinding 3: De afbeelding die linkt naar de video op youtube op pagina rotterdammer.gebruikercentraal.nl/agenda/save-the-date-… heeft geen alternatieve tekst. Hierdoor mist de afbeelding ook een linkdoel en een toegankelijke naam. Zie ook SC 2.4.4 en SC 4.1.2.

Bevinding 4: Op pagina rotterdammer.gebruikercentraal.nl/de-kracht-van-beeldtaal/ staan twee links, één naar een vorig blog en één naar een volgend blog. De pijliconen geven aan of het om de vorige of de volgende blog gaan. De iconen hebben geen alternatieve tekst, dus deze informatie wordt niet doorgegeven aan screenreadergebruikers. Dit komt op meerdere pagina's voor, waaronder op rotterdammer.gebruikercentraal.nl/bakkie-doen/.

Bevinding 5: Pagina rotterdammer.gebruikercentraal.nl/de-kracht-van-beeldtaal/ bevat afbeeldingen met geschreven tekst. Deze afbeeldingen hebben geen tekstalternatief waardoor voor blinden duidelijk wordt wat er op deze afbeeldingen gecommuniceerd wordt. Voeg een alternatieve tekst, bijvoorbeeld met het alt-attribuut of door de afbeelding onder de afbeelding te beschrijven, om dit probleem op te lossen. Zie ook SC 1.4.5.

Bevinding 6: De afbeeldingen op pagina rotterdammer.gebruikercentraal.nl/hoe-ontwikkel-je-een-… bevatten wel een beschrijving onder de afbeelding, maar daarin wordt niet beschreven wát er precies op de afbeelding staat. Daarnaast bevatten de afbeeldingen ook tekst en voldoet de beschrijving nu ook niet aan succescriterium 1.4.5.

Bevinding 7: De afbeeldingen in de pdf op pagina rotterdammer.gebruikercentraal.nl/wp-content/uploads/sites/… hebben geen alternatieve tekst waar dat nodig zijn en decoratieve afbeeldingen, zoals de afbeelding rechtsboven op pagina 2, zijn niet gemarkeerd als artefact. Loop het document na en voeg alternatieve teksten waar dat nodig is en markeer decoratieve afbeeldingen als artefact.

Bevinding 8: De logo's in de pdf op pagina rotterdammer.gebruikercentraal.nl/wp-content/uploads/sites/… hebben geen alternatieve tekst. De alternatieve tekst van een logo moet altijd het woord 'Logo' en de naam van de organisatie bevatten, plus eventuele andere tekst op het logo.

1.2 Op tijd gebaseerde media

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)

Uitkomst: Niet aanwezig

Bevinding 9: Niet aanwezig

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

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

Uitkomst: Niet aanwezig

Bevinding 10: Niet aanwezig

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

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

Uitkomst: Niet aanwezig

Bevinding 11: Niet aanwezig

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Niet aanwezig

Bevinding 12: Niet aanwezig

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 13: Op pagina rotterdammer.gebruikercentraal.nl/de-kracht-van-beeldtaal/ staan groene quotes. Deze teksten zijn met het em-element opgemaakt binnen het blockquote-element. Het em-element geeft extra nadruk aan enkele woorden of korte zinnen. Gebruik het daarom nooit voor alleen opmaak. Gebruik enkel het blockquote element in combinatie met een speciale CSS-klasse voor opmaak om dit probleem op te lossen.

Bevinding 14: De dikgedrukte vragen op pagina rotterdammer.gebruikercentraal.nl/de-kracht-van-beeldtaal/ zijn opgemaakt met het strong-element. Het strong-element geeft extra nadruk aan enkele woorden of korte zinnen. Gebruik het daarom nooit voor alleen opmaak. Gebruik het b-element of CSS om dit probleem op te lossen.

Bevinding 15: De tussenkoppen op pagina rotterdammer.gebruikercentraal.nl/hoe-ontwikkel-je-een-… zijn opgemaakt met het strong-element. Koppen moeten worden opgemaakt met het h-element, bijvoorbeeld kopniveau 2. Screenreadergebruikers kunnen door middel van een koppenlijst over een pagina navigeren. Koppen die niet zijn opgemaakt met het h-element komen niet voor op die lijst. Gebruik daarom altijd een logische koppenstructuur op de pagina.

Bevinding 16: De beschrijvingen van de afbeeldingen op pagina rotterdammer.gebruikercentraal.nl/hoe-ontwikkel-je-een-… zijn opgemaakt met het em-element. Het em-element geeft extra nadruk aan enkele woorden of korte zinnen. Gebruik het daarom nooit voor alleen opmaak.

Bevinding 17: De pdf op pagina rotterdammer.gebruikercentraal.nl/wp-content/uploads/sites/… is niet helemaal goed gecodeerd. Koppen in het document zijn niet gecodeerd als kop maar als normale paragraaftekst, lijsten zijn niet gecodeerd als lijsten en afbeeldingen zijn niet goed gemarkeerd (zie 1.1.1). Daarnaast zijn sommige items momenteel helemaal niet gecodeerd. Zo krijgen screenreadergebruikers niet de juiste informatie over de tekst die in beeld te zien is.

Bevinding 18: Advies: Meerdere pagina's, waaronder de homepage, bevatten geen logische koppenstructuur. De koppen in de footer hebben bijvoorbeeld een h2-niveau kop. Dat maakt de informatie in de footer even belangrijk als de informatie onder een h2-kop in een artikel. Een logische koppenstructuur helpt bezoekers die gebruikmaken van hulpsoftware en is daarnaast ook bevorderlijk voor de zoekmachineoptimalisatie van de pagina.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 19: De pdf op pagina rotterdammer.gebruikercentraal.nl/wp-content/uploads/sites/… bevat geen logische code volgorde. Bezoekers krijgen bijvoorbeeld eerst te horen dat er een figuur is (zonder alternatieve tekst), waarmee de achtergrond achter de tekst rechtsboven op pagina 1 wordt bedoeld, vervolgens wordt de titel voorgelezen, en vervolgens de tekst op de achtergrondafbeelding. Daarna springt de volgorde naar stap 2, en vervolgens naar 'Behulpzame vragen bij stap 3'. Loop het document na om ervoor te zorgen dat screenreadergebruikers ook een logische leesvolgorde hebben.

1.4 Onderscheidbaar

1.4.2 Geluidsbediening (Niveau A)

Informatie over succescriterium 1.4.2 Geluidsbediening

Uitkomst: Niet aanwezig

Bevinding 20: Niet aanwezig.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 21: Wanneer de links van de leden van het actieteam, onder 'Actieteam' op de homepage, focus hebben worden de linkteksten groen. Het contrast van deze teksten is dan te laag, de contrastratio is hier 3,5:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 22: Wanneer bezoekers met de muis over de link 'alle actieteamleden' en 'blog' op de homepage hoveren, is de contrastratio van de donkerroze linktekst te laag. De contrastratio is dan 3,9:1, waar dat minimaal 4,5:1 moet zijn. Dit komt ook voor op onder andere pagina rotterdammer.gebruikercentraal.nl/de-kracht-van-beeldtaal/.

Bevinding 23: Het contrast van de tekst 'Wat heb je nodig?' in de pdf op pagina rotterdammer.gebruikercentraal.nl/wp-content/uploads/sites/… is te laag. De contrastratio is hier 3,6:1, waar dat minimaal 4,5:1 moet zijn.

Bevinding 24: Het contrast van de tekst 'Een praktijkvoorbeeld' in de pdf op pagina rotterdammer.gebruikercentraal.nl/wp-content/uploads/sites/… is te laag. De contrastratio is hier 3,4:1, waar dat minimaal 4,5:1 moet zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 25: Onder 'Lees & ontdek' op de homepage staat een bericht van 13 april, 'Mensen maken de wijk'. Naast bericht staat een afbeelding met de tekst 'Werken aan zorgzame buurten 1 april '21' Deze tekst komt niet voor in de introductietekst van het artikel op de homepage, maar ook niet in het artikel zelf. Deze afbeelding geeft informatie (o.a. de naam van de bijeenkomst) die nu niet beschikbaar is voor blinden en slechtzienden. Plaats deze tekst dan ook als html-tekst, tenminste in het artikel zelf, om dit probleem aan te passen. Dit komt ook voor op pagina rotterdammer.gebruikercentraal.nl/category/lees-ontdek/.

Bevinding 26: Op pagina rotterdammer.gebruikercentraal.nl/hoe-ontwikkel-je-een-… staan afbeeldingen met tekst. De beschrijvingen onder de afbeeldingen beschrijven niet precies wat er op de afbeelding staat, bijvoorbeeld 'Mijn digitale dagboek'. En de tekst op de afbeelding komt niet terug op de pagina.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 27: Het contrast van de lichte rand op witte achtergrond om de invoervelden van het formulier 'Reageer' op onder andere pagina rotterdammer.gebruikercentraal.nl/agenda/save-the-date-… is te laag. De contrastratio is hier 1,4:1, waar dat minimaal 3:1 moet zijn. Dit komt op meerdere pagina's voor, waaronder op rotterdammer.gebruikercentraal.nl/contact/. De velden op de donkergroene achtergrond zijn wel voldoende.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 28: De PDF op pagina rotterdammer.gebruikercentraal.nl/wp-content/uploads/sites/… heeft geen titel. Voeg een beschrijvende titel toe en kies bij weergave bij openen voor documenttitel om dit probleem op te lossen.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 29: De linkteksten van de links onder 'Bijeenkomsten' en 'Lees en ontdek' op de homepage bestaan uit de datum, de kop én de hele introductietekst. Dit is verwarrend voor bezoekers die gebruik maken van hulpsoftware zoals een screenreader, zij krijgen álle tekst opgelezen. Daarnaast maakt het het navigeren voor bezoekers die gebruik maken van een linklijst ook ingewikkelder. Dit is een advies en komt op meerdere pagina's voor, waaronder op rotterdammer.gebruikercentraal.nl/evenementen/ en op rotterdammer.gebruikercentraal.nl/category/lees-ontdek/.

Bevinding 30: De afbeelding die linkt naar de video op youtube op pagina rotterdammer.gebruikercentraal.nl/agenda/save-the-date-… bevat geen alternatieve tekst die het linkdoel beschrijft. Onder andere screenreadergebruikers weten nu niet waar deze link hen naartoe verwijst. Voeg een alternatieve tekst die het linkdoel beschrijft toe om dit probleem op te lossen.
Advies: Het is voor ziende gebruikers óók niet helemaal duidelijk dat deze video de bezoeker naar een externe website brengt. Voeg een beschrijving boven de video toe, om dit probleem op te lossen.

Bevinding 31: Op pagina rotterdammer.gebruikercentraal.nl/de-kracht-van-beeldtaal/ staat een link naar meer informatie over Suzanne Oudshoorn-Blokland. In het title-attribuut is de tekst 'Alle berichten' opgenomen. Het title-attribuut wordt niet door alle browsers en hulpsoftware ondersteund en voorgelezen. Als het de bedoeling is om 'Alle berichten' aan iedereen te communiceren gebruik dan een andere manier om dit te bewerkstelligen. Dit komt op meerdere pagina's voor, waaronder op pagina rotterdammer.gebruikercentraal.nl/bakkie-doen/.

Bevinding 32: In de social media links van de auteur op pagina rotterdammer.gebruikercentraal.nl/bakkie-doen/ is ook het title-attribuut gebruikt. Het title-attribuut wordt niet door alle screenreaders en browsers ondersteund, maar kan er nu wel toe leiden dat de tekst dubbel wordt voorgelezen. Het advies is om het title-attribuut te verwijderen. Dit probleem komt op meerdere pagina's voor.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 33: Er is geen taal ingesteld voor de PDF op pagina rotterdammer.gebruikercentraal.nl/wp-content/uploads/sites/…, waardoor screenreaders niet weten in welke taal zij de PDF moeten voorlezen. Als de hoofdtaal van de screenreader anders is dan de taal in de PDF, kan dat er voor zorgen dat de tekst onverstaanbaar uitgesproken wordt.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 34: Op pagina rotterdammer.gebruikercentraal.nl/actieteam/ staat de tekst 'All things UX/CX, service design and inclusive / accessibility'. Hier moet een taalwissel worden aangegeven, zodat screenreaders deze tekst in de juiste taal voorlezen.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 35: Het formulier op pagina rotterdammer.gebruikercentraal.nl/actieteam/aanmelden-… bevat geen (goede) foutidentificatie. Een goede foutmelding vertelt de bezoeker waar de fout is gemaakt en welke fout is gemaakt. De melding dat een veld verplicht is voldoet niet. Zorg dat de foutmelding voor alle bezoekers duidelijk is. Dit probleem komt op meerdere pagina's voor.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 36: Het invoerveld 'E-mail' heeft voor screenreadergebruikers een dubbel label rotterdammer.gebruikercentraal.nl/contact/. Er wordt aan hen nu 'E-mail E-mail' voorgelezen.

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

Uitkomst: Niet aanwezig

Bevinding 37: Niet aanwezig

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 38: Op de pagina rotterdammer.gebruikercentraal.nl/actieteam/aanmelden-… zijn 2 formulieren geplaatst. Hierdoor komt er een dubbele id voor op de pagina in de HTML: id="honeypot". Zorg ervoor dat een id slechts één keer voorkomt per pagina.
Dit komt ook voor op rotterdammer.gebruikercentraal.nl/contact/ . Op deze laatste pagina komt id="your-email" ook dubbel voor.

Bevinding 39: Op de pagina rotterdammer.gebruikercentraal.nl/agenda/stadswandeling-in-… is één aanwezige. Er gaat iets mis met de lijst (<ul>) die niet in een <span> gebruikt mag worden. Dit is mogelijk geen toegankelijkheidsissue. Het is beter om dit op te lossen.

Bevinding 40: Op de pagina rotterdammer.gebruikercentraal.nl/evenementen/ is een </p> aanwezig die niet geopend is.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 41: Er is geen label gekoppeld aan de checkbox 'Ja, ik wil op de mailinglijst voor Rotterdammer Centraal' in de footer van de pagina (iedere pagina). De checkbox heeft daardoor nu geen toegankelijke naam. Koppel een label aan de checkbox met het label-element met for- en id-attributen om dit probleem op te lossen.

Bevinding 42: De link naar de video op youtube op pagina rotterdammer.gebruikercentraal.nl/agenda/save-the-date-… heeft geen toegankelijke naam, omdat de afbeelding geen alternatieve tekst (inclusief linkdoel) heeft. Zie ook SC 1.1.1 en SC 2.4.4.

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-05-07 04:14:37 v2.3-011