Issues:
Quickscan digitale toegankelijkheid website Muziekweb

(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: In de header van iedere pagina staat een taalwissel functie. De afbeeldingen van vlaggen hebben geen alternatieve tekst. De tekst in het span-element wordt niet voorgelezen door hulpsoftware. Geef de afbeeldingen een alternatieve tekst, bijvoorbeeld binnen het alt-attribuut om dit probleem op te lossen.

Bevinding 2: In de header van iedere pagina staan social media iconen. Met het title-attribuut is een linkdoel toegevoegd aan de link, maar dat wordt niet door alle browser en hulpsoftware combinaties voorgelezen. De afbeeldingen zelf hebben als alternatieve tekst alleen de 'f' voor Facebook en de 't' voor Twitter. Dit is ook het toegankelijke linkdoel, en onvoldoende beschrijvend. Voeg een beschrijvende alternatieve tekst toe (bijvoorbeeld 'Facebook') om dit probleem op te lossen.

Bevinding 3: Alle afbeeldingen op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ hebben de alternatieve tekst 'Album cover'. Wanneer decoratieve afbeeldingen een alternatieve tekst hebben, moet de tekst de inhoud van de afbeelding beschrijven. Decoratieve afbeeldingen mogen ook enkel een leeg alt-attribuut bevatten, zodat de afbeelding genegeerd kan worden door hulpsoftware.

Bevinding 4: Op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ kunnen bezoekers zien of een object uitgeleend is, doordat er een oranje stip in de afbeelding staat. Deze informatie is niet nu beschikbaar voor hulpsoftware.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 5: Op de homepage komt een zoekfunctie voor. Het invoerveld heeft geen toegankelijke naam, er wordt enkel gebruikgemaakt van een placeholder. Dit is niet voldoende. Voeg een label-element toe met een toegankelijke naam en koppel dat met for en id aan het input-element om dit probleem op te lossen.

Bevinding 6: Op de homepage komt een invoerveld voor voor aanmelden voor de nieuwsbrief. Het invoerveld heeft geen toegankelijke naam, er wordt enkel gebruikgemaakt van een placeholder. Dit is niet voldoende. Voeg een label-element toe met een toegankelijke naam en koppel dat met for en id aan het input-element om dit probleem op te lossen.

Bevinding 7: Het invoerveld voor e-mailadres op pagina https://www.muziekweb.nl/Muziekweb/Nieuwsbrief/Aanmelden hebben geen label. Er worden kopelementen gebruikt, maar dit koppelt de tekst niet aan de invoervelden. Verwijder de kop-elementen, voeg een label-element toe met een toegankelijke naam en koppel dat met for en id aan het input-element om dit probleem op te lossen.

Bevinding 8: De keuzerondjes op pagina https://www.muziekweb.nl/Muziekweb/Nieuwsbrief/Aanmelden zijn niet goed gegroepeerd. Gebruik een legend en fieldset combinatie om de tekst aan de groep keuzerondjes te koppelen. Zie ook succescriterium 2.1.1.

Bevinding 9: Op pagina https://www.muziekweb.nl/Verlanglijst/ kan een bezoeker een item van diens verlanglijst selecteren. Visueel is dit een selectievierkant, maar in de code gaat het om een link (a-element). Dit is verwarrend, omdat beiden een andere semantische waarde hebben. Maak hier gebruik van een selectievierkantje om dit probleem op te lossen.

Bevinding 10: Op pagina https://www.muziekweb.nl/Verlanglijst/ staat informatie visueel in een tabel. In de code zijn de kopjes echter niet gekoppeld aan de informatie er onder. Bezoekers die gebruik maken van voorleessoftware krijgen deze informatie daarom niet op een logische manier voorgelezen. Gebruik hier een tabelstructuur met tabelkoppen om dit probleem op te lossen.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 11: Wanneer bezoekers die gebruik maken van een schermlezer op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ de tekst voorgelezen krijgen, wordt er ook tekst voorgelezen die niet in beeld is. Alle informatie die pas zichtbaar is wanneer een bezoeker op een album cover klopt, wordt al wel voorgelezen door hulpsoftware. Dit is verwarrend.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Bevinding 12: Op pagina https://www.muziekweb.nl/Muziekweb/Informatie/Faq#faq8 worden beschrijvingen als 'rechts boven' gebruikt. Vermijd het verwijzen naar kleur, vormen en locaties, en/of maak de instructies begrijpelijk voor bezoekers die het scherm niet kunnen zien.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 13: Advies: Op pagina https://www.muziekweb.nl/Muziekweb/Informatie/Faq#faq5 komen linkteksten voor die alleen door kleur herkenbaar zijn van de omliggende tekst. Zorg ervoor dat linkteksten op nog minimaal één andere manier herkenbaar zijn, bijvoorbeeld door ze te onderstrepen.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 14: In de footer van iedere pagina staat de tekst '© Stichting Centrale Discotheek, 1995 - 2023, auteursrecht uitdrukkelijk voorbehouden.'. De contrastratio tussen de grijze tekst (HEX #AAAAAA) en de donkergrijze achtergrond (HEX #4A4A4A) is 3,8:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 15: Op meerdere plekken komt oranje tekst (HEX #FF7320) op een witte achtergrond voor, of witte tekst op dezelfde kleur oranje achtergrond. De contrastratio is hier 2,7:1 waar dat minimaal 3:1 moet zijn voor grote tekst (zoals de tekst 'Nieuwsbrief populair & klassiek' op de homepage) en minimaal 4,5:1 voor normale tekst.

Bevinding 16: Op de homepage staat de tekst 'Klik hier voor ons privacy statement'. De contrastratio tussen de grijze tekst (HEX #AAAAAA) en de witte achtergrond is 2,3:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 17: Op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ komt oranje tekst (HEX #FF7320) op een grijze achtergrond (HEX #DFDFDF) voor. De contrastratio is hier 2:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 18: Op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ komt witte tekst op een grijze achtergrond (HEX #DFDFDF) voor. De contrastratio is hier 1,3:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 19: Op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ komen grijze tekstuele iconen (HEX #AAAAAA) op een witte achtergrond voor. De contrastratio is hier 2,3:1 waar dat minimaal 3:1 moet zijn.

Bevinding 20: Op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ komt grijze tekst (HEX #AAAAAA) op een grijze achtergrond (HEX #DFDFDF) voor. De contrastratio is hier 1,7:1 waar dat minimaal 3:1 moet zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Bevinding 21: Op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ staat op enkele afbeeldingen het woord 'Tip'. Bezoekers die een eigen opmaak nodig hebben, bijvoorbeeld het vergroten van de tekst of de tekstafstand, of het aanpassen van het contrast, kunnen dat niet met tekst op een afbeelding. Zorg ervoor dat deze informatie daarom ook beschikbaar is als platte tekst.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 22: Op de homepage staat het invoerveld 'Geef je e-mailadres op'. De contrastratio tussen de grijze rand van het invoerveld (HEX #EFEFEF) en de witte achtergrond is 1,1:1 waar dat minimaal 3:1 moet zijn. Dit probleem komt op meerdere pagina's voor, waaronder op pagina https://www.muziekweb.nl/Muziekweb/Nieuwsbrief/Aanmelden.

Bevinding 23: Wanneer bezoekers met de muis over een album cover op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ navigeren, verschijnt er een pijl naar beneden om aan te geven dat er aanvullende content is. Op meerdere plaatsen is het contrast tussen het witte icoon en de achtergrond (afhankelijk van de achterliggende afbeelding) te laag. Zorg ervoor dat het icoon goed zichtbaar is, bijvoorbeeld door een donkere achtergrond toe te voegen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 24: De optie om van taal te wisselen, in de header van iedere pagina, is niet bereikbaar en bedienbaar met het toetsenbord.

Bevinding 25: Wanneer bezoekers inzoomen verandert het navigatiemenu bovenaan iedere pagina in een hamburgermenu. De knop om dit menu te openen en te sluiten is niet bereikbaar en bedienbaar met het toetsenbord.

Bevinding 26: De knoppen om in of uit te zoomen en naar hoog contrast te schakelen zijn bereikbaar en bedienbaar met het toetsenbord. Daarom zijn deze functies tijdens deze quickscan dan ook niet gebruikt.

Bevinding 27: De optie om een week te selecteren op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ is niet bereikbaar en bedienbaar met het toetsenbord. Wij raden aan zoveel mogelijk gebruik te maken van standaard HTML. Gebruik hier daarom bij voorkeur een select-element. Dit probleem komt op meerdere pagina's voor, waaronder op pagina https://www.muziekweb.nl/Verlanglijst/.

Bevinding 28: Wanneer bezoekers met de muis op een album op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ klikken, verschijnt er aanvullende content op dezelfde pagina. Deze krijgt geen toetsenbordfocus en is dus niet op die manier met de tabtoets bereikbaar en bedienbaar.

Bevinding 29: De knoppen om nummers af te spelen op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ (wanneer een bezoeker op een album cover klikt) zijn niet bereikbaar en bedienbaar met het toetsenbord.

Bevinding 30: Alle vragen/uitklapbare items op pagina https://www.muziekweb.nl/Muziekweb/Informatie/Faq zijn niet bereikbaar en bedienbaar met het toetsenbord.

Bevinding 31: Wanneer een bezoeker is ingelogd op de website, is de link/knop om het persoonlijke menu te openen niet bereikbaar en bedienbaar met het toetsenbord.

Bevinding 32: Wanneer een bezoeker op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ een geluidsfragment afspeelt, verschijnen er knoppen om het fragment leuk of niet leuk te vinden. Deze zijn niet bereikbaar en bedienbaar met het toetsenbord.

Bevinding 33: De keuzerondjes op pagina https://www.muziekweb.nl/Muziekweb/Nieuwsbrief/Aanmelden zijn niet bereikbaar en bedienbaar met het toetsenbord omdat ze onzichtbaar zijn gemaakt voor hulpsoftware met display none.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 34: Wanneer bezoekers op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ een album aanklikken verandert de titel van de pagina in de titel van het album. Dit beschrijft niet de hele pagina. Zorg ervoor dat het doel van de pagina nog steeds beschikbaar blijft in de titel van de pagina voor bezoekers die het scherm niet kunnen zien.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 35: Wanneer bezoekers met de muis over de menu items in het navigatiemenu bovenaan iedere pagina hoveren, verschijnen er bij sommige items extra menu items in een uitvouwmenu, bijvoorbeeld bij 'Muziekstijlen'. Met het toetsenbord krijgen deze extra items ook focus, maar vouwt het menu niet uit. Het is dan dus niet zichtbaar welk item focus heeft. Zorg ervoor dat het menu item automatisch uitvouwt, of dat bezoekers zelf het menu item moeten uitklappen voordat de extra items focus kunnen krijgen.

Bevinding 36: Wanneer bezoekers inzoomen verandert het navigatiemenu bovenaan iedere pagina in een hamburgermenu. De knop kan niet geopend worden met het toetsenbord, maar de items in het menu krijgen wel focus terwijl dat niet zichtbaar is. Zorg ervoor dat menu items pas focus krijgen als het menu geopend is.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 37: Pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ bevat paginering. Het toegankelijke linkdoel van de paginanummers bestaat enkel uit een cijfer, dit is niet beschrijvend genoeg. Maak het linkdoel beschrijvender door het woord 'pagina' toe te voegen aan het linkdoel. Dit geldt ook voor de linkteksten voor 'volgende' en 'vorige'. Dit hoeft enkel beschikbaar te zijn voor hulpsoftware, visueel mag het hetzelfde blijven.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 38: Het is voor bezoekers die gebruik maken van het toetsenbord om over de website te navigeren niet duidelijk waar zij zich op de pagina bevinden, omdat een zichtbare focusstijl mist. Voeg een focusrand toe voor interactieve elementen die voldoende contrasteert met de elementen en achtergronden om dit probleem op te lossen.

3. Begrijpelijk

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 39: Wanneer bezoekers op pagina https://www.muziekweb.nl/Muziekweb/Nieuwsbrief/Aanmelden verplichte velden niet of niet goed invullen, verschijnt een melding als 'Geef een e-mailadres op.'. Een goede foutmelding moet vermelden waar de fout is gemaakt en wélke fout is gemaakt, bijvoorbeeld 'Het veld E-mailadres is niet ingevuld'. Dat een veld verplicht is, of dat er iets ingevuld moet worden is een foutsuggestie.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 40: Op de homepage komt een zoekfunctie voor. De knop om invoer te verwijderen heeft geen toegankelijke naam. Bezoekers die gebruik maken van voorleessoftware weten daardoor niet waar de knop voor dient.

Bevinding 41: Er bevindt zich een iframe in de footer van iedere pagina. Dit iframe heeft geen beschrijving binnen het title-attribuut.

Bevinding 42: De knoppen om in of uit te zoomen en te schakelen naar hoog contrast hebben geen toegankelijke rol. Bezoekers die het scherm niet kunnen zien weten daarom niet om wat voor soort interactief element het gaat.

Bevinding 43: Wanneer een bezoeker op pagina https://www.muziekweb.nl/Muziekweb/NieuwBinnen/ een geluidsfragment afspeelt, verschijnen er knoppen om het fragment leuk of niet leuk te vinden. Deze knoppen hebben geen toegankelijke naam of rol.

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

• Home:
  https://www.muziekweb.nl/
• Nieuw binnen:
  https://www.muziekweb.nl/Muziekweb/NieuwBinnen/
• Verlanglijst:
  https://www.muziekweb.nl/Verlanglijst/
• FAQ:
  https://www.muziekweb.nl/Muziekweb/Informatie/Faq
• Aanmelden nieuwsbrief:
  https://www.muziekweb.nl/Muziekweb/Nieuwsbrief/Aanmelden

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.