Toegankelijkheidsonderzoek

Issues:
Rapportage van De Rederij Alblasserdam

(Alleen de bevindingen)

Scope van de evaluatie

Naam website De Rederij Alblasserdam
Datum 28 december 2023
Scope van de website Alle pagina's op derederij.nl
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 21

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: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% dan wordt het navigatiemenu vervangen door een knop met een afbeelding van drie horizontale streepjes. Dit icoon wordt door middel van het pseudo-element :before/:after en de content property in de CSS op de pagina gezet. Op deze manier kan het zijn dat het icoon wegvalt, bijvoorbeeld voor mensen die een eigen CSS gebruiken, of wanneer de CSS niet geladen wordt. De content property is alleen geschikt voor het toevoegen van puur decoratieve content. Tevens heeft deze knop geen tekstalternatief. Een oplossing kan zijn om het icoon in de html te plaatsen, bijvoorbeeld als img-element of svg met tekstalternatief.

Bevinding 2: Bovenaan de pagina https://www.derederij.nl/activiteiten staat een banner met een decoratieve afbeelding. Deze afbeelding is decoratief en heeft daarom geen alternatieve tekst nodig. Een beschrijving als "Banner de Rederij" is overbodig voor screenreadergebruikers. De afbeelding moet wel een leeg alt-attribuut in het img-element hebben (alt=""). Dit komt ook op pagina https://www.derederij.nl/gemeente-alblasserdam en https://www.derederij.nl/de-bibliotheek-aanzet voor.

Bevinding 3: Midden op de pagina https://www.derederij.nl/gemeente-alblasserdam staat een afbeelding van een gebouw. Het is aan de eigenaar van de website om te bepalen of deze afbeelding decoratief of informatief is. In het eerste geval moet de waarde van het alt-attribuut geen tekst bevatten. Als de afbeelding informatief is, moet de alt-tekst de beschrijving van het gebouw bevatten. Momenteel is de waarde van het alt-attribuut "De Rederij Alblasserdam".

Bevinding 4: Op de pagina https://www.derederij.nl/de-bibliotheek-aanzet staat een afbeelding van een stand met "alt='Visual De Rederij Alblasserdam'". Deze afbeelding is decoratief en heeft daarom geen alternatieve tekst nodig. Laat het alt-attribuut leeg om de afbeelding te verbergen voor hulpsoftware.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 5: In de hoofdnavigatie is zichtbaar bij wat de huidige pagina is, omdat deze lichtgroen gemarkeerd is. Voor blinden en slechtzienden is deze informatie niet beschikbaar via hulpsoftware. Markeer de actieve navigatiekeuze zodat deze ook als zodanig wordt voorgelezen door een screenreader. Gebruik aria-current (met als waarde page) of een vergelijkbare techniek om dit probleem op te lossen.

Bevinding 6: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% dan verdwijnt het menu achter de zogenaamde hamburgerknop (drie horizontale streepjes). Op een tabletbreedte staat naast deze afbeelding het woord "Menu". Deze tekst is toegevoegd via een content property van CSS. Als CSS wordt uitgeschakeld, verdwijnt dit woord. Zorg ervoor dat informatie en relaties die door presentatie worden overgebracht, ook door software te bepalen zijn.

Bevinding 7: Op de homepagina staat de tekst "De Rederij biedt ruimte aan de gemeente, de Bibliotheek AanZet en een werkcafé. Je kunt er werken, studeren en ontmoeten." Deze tekst is opgemaakt als een h2-element. Echter, dit is geen kop. Zet alleen de eerste zin om in een h2-element of gebruik CSS om deze tekst te stylen.

Bevinding 8: Op pagina https://www.derederij.nl/activiteiten zijn koppen opgemaakt met het strong-element, bijvoorbeeld "Dagelijks t/m 22 november" en "Woensdag 22 november". Het strong-element is bedoeld om nadruk te geven aan een of enkele woorden en mogen niet worden gebruikt als visuele kop, omdat ze niet dezelfde betekenis hebben als een kop (bijvoorbeeld h2 of h3). Zet deze teksten om in kop-elementen, bijvoorbeeld kopniveau 3 (h3). Dit komt ook voor op andere plekken op de pagina: "Woensdag 1, 8 en 15 november: Hoe ziet jouw ideale woonplaats eruit?", "November: Heel Alblasserdam leest…" en "Zaterdag 18, 25 november en 2 en 9 december: Collegereeks Van kolonie tot wereldmacht, langs de geschiedenis van Amerika".

Bevinding 9: Op pagina https://www.derederij.nl/gemeente-alblasserdam is een kop opgemaakt met het strong-element: "Bezoekadres". Gebruik hier het kop-element h3.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 10: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% dan verdwijnt het menu achter de zogenaamde hamburgerknop (drie horizontale streepjes). Op een tabletbreedte staat naast deze afbeelding de tekst "Menu". Deze tekst heeft een onvoldoende kleurcontrast van 4,22 (voorgrondkleur: HEX#cccccc, achtergrondkleur: HEX#ffffff), terwijl een contrastverhouding van minimaal 4,5:1 verwacht wordt. Zie https://www.derederij.nl/.

Bevinding 11: Op de homepagina, onder het kopje "De Rederij biedt ruimte...", staat een link "Bekijk onze activiteiten" die een onvoldoende kleurcontrast heeft van 4,22 (voorgrondkleur: HEX#5d7775, achtergrondkleur: HEX#edf1ee), terwijl een contrastverhouding van minimaal 4,5:1 verwacht wordt. Dit probleem geldt ook voor de alineatekst aan de rechterkant. Zie https://www.derederij.nl/.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 12: In de navigatie wordt de huidige, actieve pagina aangeduid door een lichtgroene achtergrondkleur. Het kleurverschil tussen de actieve pagina (lichtgroen) en de inactieve pagina's (wit) heeft een te lage contrastwaarde. De contrastverhouding is 1,1:1 waar dit 3:1 moet zijn. Maak het lichtgroene donkerder zodat het verschil voldoende is.

Bevinding 13: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% dan verdwijnt het menu achter de zogenaamde hamburgerknop (drie horizontale streepjes). De menuknop heeft een kleurcontrast van slechts 1,6:1 (voorgrondkleur: HEX#cccccc, achtergrondkleur: HEX#ffffff), terwijl een contrastverhouding van minimaal 3,0:1 verwacht wordt. Zie https://www.derederij.nl/.

Bevinding 14: Bovenaan de homepagina bevindt zich een carrousel met een reeks ronde knoppen om de carrousel te bedienen. Deze knoppen (HEX#cccccc) hebben onvoldoende kleurcontrast met de achtergrond van de wisselende afbeeldingen. Het laagste gemeten contrast is 1,6:1, terwijl een contrastverhouding van minimaal 3,0:1 vereist is.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 15: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% dan verdwijnt het menu achter de zogenaamde hamburgerknop (drie horizontale streepjes). Echter, deze knop is niet te bedienen met het toetsenbord, wat een probleem vormt voor gebruikers die zonder muis navigeren. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord. Zie https://www.derederij.nl/.

Bevinding 16: Bovenaan de homepagina bevindt zich een carrousel met een reeks ronde knoppen om de carrousel te bedienen. Deze knoppen zijn niet te bedienen met het toetsenbord. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord. Zie https://www.derederij.nl/.

2.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Uitkomst: Onvoldoende

Bevinding 17: Op de homepagina staat een carrousel die na elke paar seconden een nieuw beeld laat zien. Deze carrousel kan niet gestopt, gepauzeerd of verborgen worden. Bij sommige mensen kan de beweging misselijkheid veroorzaken. Voor mensen met bijvoorbeeld een cognitieve beperking kan het lastig zijn omdat zij zich tijdens het lezen niet kunnen concentreren op de tekst. Zorg dat bezoekers de carrousel kunnen stoppen of pauzeren, of verwijder de carrousel in z’n geheel.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 18: Op alle pagina’s van de website ontbreekt een mechanisme om herhalende blokken met content over te slaan. Dit kan bijvoorbeeld worden opgelost door middel van een skiplink. Dit is de eerste link op een pagina die verwijst naar de unieke inhoud van die pagina. De skiplink mag verborgen zijn, maar moet zichtbaar worden als de toetsenbordfocus erop staat. Dit is van belang voor mensen die het toetsenbord gebruiken om te navigeren. Zij hoeven dan niet steeds op iedere pagina door herhalende content (menu's en dergelijk) te navigeren met het toetsenbord.

Bevinding 19: Op elke pagina ontbreekt een mechanisme om de herhalende content over te slaan. Bezoekers die de website met toetsenbord bedienen en/of hulpsoftware moeten op elke pagina langs dezelfde onderdelen gaan voordat ze bij de content zijn. Dit kan opgelost worden door een link op de pagina te plaatsen (skiplink) die de focus verplaatst naar de eerste unieke inhoud van de pagina. Deze link moet de eerste link van de pagina zijn. Deze link mag standaard verborgen zijn voor bezoekers, maar moet zichtbaar worden als de focus er op komt wanneer met het toetsenbord wordt genavigeerd.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 20: Op de pagina https://www.derederij.nl/de-bibliotheek-aanzet staat een link met de tekst “de website van de bibliotheek”. Deze link is echter incorrect opgemaakt en bestaat uit twee afzonderlijke HTML 'a'-elementen, waarbij het tweede element slechts de letter "k" bevat als linktekst. Dit lijkt op een typefout en moet worden gecorrigeerd. De twee links dienen samengevoegd te worden tot één enkele link, zodat de volledige tekst "de website van de bibliotheek" correct functioneert als één link.

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 21: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 200% dan verandert het hoofdmenu in een zogenaamde hamburgerknop, herkenbaar aan de drie horizontale streepjes. Echter mist deze knop momenteel een toegankelijke naam en rol. Blinden en slechtzienden kunnen zo de knop niet herkennen. Met spraaksoftware is de knop niet te bedienen. Hierdoor zijn de onderliggende pagina's niet toegankelijk voor gebruikers die afhankelijk zijn van hulpsoftware. Ook wordt niet doorgegeven wanneer het menu uitgevouwen of ingevouwen is. Zorg dat de knop een goede rol krijg (bijvoorbeeld door het button-element te gebruiken) een goede naam krijgt zodat duidelijk is dat dit het navigatiemenu betreft en dat de status (in- of uitgevouwen) wordt doorgegeven via hulpsoftware. Dit laatste kan bijvoorbeeld gerealiseerd worden met het attribuut 'aria-expanded'.

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: 2025-03-14 06:48:08 v2.4-011