Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Theater vanBeresteyn

(Alleen de bevindingen)

Scope van de evaluatie

Naam website vanBeresteyn
Datum 7 februari 2023
Scope van de website Binnen de scope van het onderzoek vallen:
  • Alle pagina's op vanberesteyn.nl.
Buiten de scope van het onderzoek vallen:
  • Alle pagina's op het domein vanberesteyn.podiumnederland.nl.
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via vanberesteyn.nl met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 19

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: Achter de link 'Veenkoloniaal museum' op pagina https://www.vanberesteyn.nl/ staat een svg-afbeelding dat aangeeft dat de link verwijst naar een externe website. Omdat dit icoon informatie overbrengt heeft het een alternatieve tekst nodig voor bezoekers die het scherm niet kunnen zien. Plaatst bijvoorbeeld een title-element binnen het svg-element om dit een alternatieve tekst te geven. Vergeet niet om het svg-element het attribuut role=img te geven en het aria-hidden attribuut van het element te verwijderen, zo weet hulpsoftware dat hier een icoon staat.

Bevinding 2: In de knop 'Theater' op pagina https://www.vanberesteyn.nl/programma/?filters=eyJjYXRlZ29yeSI6WzldfQ%3D%3D staat een svg-afbeelding van een X-icoon. Die icoon heeft geen alternatieve tekst en is met aria-hidden verborgen voor hulpsoftware. Dit icoon geeft aan dat bezoekers met de knop het filter kunnen verwijderen, maar deze informatie is niet beschikbaar voor bezoekers die het scherm niet kunnen zien. Geef dit icoon een alternatieve tekst, bijvoorbeeld met het title-element en door role=img op het svg-element te plaatsen. Zie ook succescriterium 1.3.1.

Bevinding 3: Bij de zalen op pagina https://www.vanberesteyn.nl/verhuur/ staan twee svg-afbeeldingen die betekenis geven aan de tekst die daarachter staat. De iconen staan namelijk voor de hoeveelheid mensen die in een zaal kunnen en de grootte van de zaal. Deze informatie is niet beschikbaar voor bezoekers die het scherm niet kunnen zien. Zorg ervoor dat de svg-afbeeldingen een alternatieve tekst krijgen.
Een soortgelijk probleem komt ook voor bij de svg-afbeeldingen op pagina https://www.vanberesteyn.nl/over-ons/onsteam/. Hier staan iconen die informatie overbrengen bij elke medewerker, maar de iconen hebben geen alternatieve tekst.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 4: Op pagina https://www.vanberesteyn.nl/ staat naast de kop 'Binnenkort' filteropties. Wanneer 'Alles' is geselecteerd (dit wordt visueel aangegeven met een streepje) heeft dit element het attribuut 'aria-current=false'. 'false is hier de verkeerde staat, dat moet 'true' zijn, aangezien 'Alles' momenteel actief is.

Bevinding 5: In het hoofdnavigatiemenu op pagina https://www.vanberesteyn.nl/contact/ wordt aangegeven op welke pagina de bezoeker zich bevindt doordat de huidige pagina is onderstreept. In de code is deze informatie niet aanwezig. Hierdoor is de informatie niet beschikbaar voor bezoekers die afhankelijk zijn van hulpsoftware. Maak gebruik van aria-current=page op de huidige pagina in het navigatiemenu om dit probleem op te lossen.

Bevinding 6: Op pagina https://www.vanberesteyn.nl/contact/ staan de teksten 'Adres', 'E-mail', 'Telefoon' en 'Theaterkassa'. Visueel zijn dit koppen voor de onderstaande teksten maar in de code zijn ze als gewone teksten opgemaakt. Zorg ervoor dat deze teksten als kop worden opgemaakt door deze is een H-element te plaatsen.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 7: Deze bevinding is aangepast naar aanleiding van het oplossen van een soortgelijke bevinding in een eerder onderzoek:
Op pagina's https://www.vanberesteyn.nl/over-ons/sponsors/ en https://www.vanberesteyn.nl/over-ons/onsteam/ staan blokken content waarbij een afbeelding boven de bijbehorende kop is geplaatst in de code. De afbeeldingen hebben een alternatieve tekst en worden voorgelezen vóór de kop van een artikel. Hierdoor is het voor bezoekers die gebruik maken van hulpsoftware niet duidelijk of een afbeelding bij de kop er bóven of de kop er ónder hoort. Zorg ervoor dat meta data van een artikel, zoals een afbeelding met alternatieve tekst, data en categorieën ónder de kop van een artikel worden geplaatst. Visueel mag het wel zo blijven staan.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 8: Op pagina https://www.vanberesteyn.nl/wordonzevriend/ staat een formulier waar de bezoeker onder andere het eigen e-mailadres en adresgegevens kan invullen. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".
Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: https://www.w3.org/tr/wcag21/#input-purposes.
Dit komt ook voor bij andere formulieren, bijvoorbeeld op pagina https://www.vanberesteyn.nl/contact/ en op pagina https://www.vanberesteyn.nl/stuur-mij-de-nieuwe-brochure/.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 9: De grijze tekst 'XX resultaten' (HEX #78716C) op pagina https://www.vanberesteyn.nl/programma/?filters=eyJjYXRlZ29yeSI6WzldfQ%3D%3D heeft een te laag contrast op de achtergrond (HEX#F5F5F4). De contrastverhouding is hier 4.4:1, waar dat minimaal 4.5:1 moet zijn.

Bevinding 10: Op pagina https://www.vanberesteyn.nl/programma/gerlof-meijer-3/ staat de witte tekst 'Tickets' op een blauwe achtergrond (HEX #00AFAC) (in de blokken onderaan de pagina). Deze kleurencombinatie heeft een te laag contrast. De contrastverhouding is hier 2.7:1, waar dat minimaal 4.5:1 moet zijn.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 11: Wanneer bij een schermbreedte van 1280px wordt ingezoomd tot 133% op pagina https://www.vanberesteyn.nl/programma/?filters=eyJjYXRlZ29yeSI6WzldfQ%3D%3D verdwijnen het broodkruimelpad en de 'Deel via' links. Het is nog wel mogelijk om met het toetsenbord de focus op deze elementen te plaatsen (zie ook succescriterium 2.4.7). Zorg ervoor dat geen functionaliteiten verloren gaan wanneer bezoekers inzoomen op een 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 12: Wanneer bezoekers de website voor het eerst bezoeken staat er een cookiemelding in beeld. In de cookiemelding is de checkbox 'Functionele cookies' al aangevinkt. Het contrast van deze aangevinkte checkbox (HEX #C7C7CE) op de witte achtergrond is te laag. De contrastverhouding is hier 1.6:1, waar dat minimaal 3:1 moet zijn.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 13: Als bezoekers de stijleigenschappen die bij dit succescriterium staan omschreven toepassen op pagina https://www.vanberesteyn.nl/ wanneer de pagina wordt weergeven bij een schermbreedte van 1280px en is ingezoomd tot 400%, staan verschillende teksten buiten beeld of over elkaar heen, bijvoorbeeld onder 'Ga direct naar'.

2. Bedienbaar

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 14: Deze bevinding is ontstaan na het oplossen van een bevinding uit een eerder onderzoek:
Wanneer bij een schermbreedte van 1280px wordt ingezoomd tot 133% op pagina https://www.vanberesteyn.nl/programma/?filters=eyJjYXRlZ29yeSI6WzldfQ%3D%3D verdwijnen de filters achter een knop. Wanneer bezoekers met het toetsenbord door het menu navigeren is het niet altijd duidelijk waar de focus zich bevindt, omdat de knop 'Toepassen' onderliggende content bedekt. Zorg ervoor dat bezoekers die inzoomen ook toegang hebben tot alle content, en de focuszichtbaarheid kunnen zien.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 15: Deze bevinding is ontstaan door het oplossen van een bevinding uit een eerder onderzoek:
De toegankelijke naam van de zoekvelden, zoals op de homepage en in de navigatie van iedere pagina, is 'zoekterm'. Visueel is echter 'zoeken' zichtbaar. Zorg ervoor dat de visuele naam voorkomt in de toegankelijke naam, het liefst vooraan. Dit geldt ook voor de combobox 'Alle onderwerpen' met de toegankelijke naam 'Kies een onderwerp'.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Voldoende

Bevinding 16: Dit probleem komt ook voor op pagina https://www.vanberesteyn.nl/?s=theater.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 17: Het formulier op pagina https://www.vanberesteyn.nl/contact/ maakt alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort in beeld staan. Ook kan de tekst grootte van de melding niet worden aangepast zodat sommige mensen de tekst mogelijk niet kunnen lezen. Voeg zelf foutmeldingen toe aan het formulier om dit probleem op te lossen. Zorg ervoor dat de foutmeldingen aangeven welke fout is gemaakt en in welk veld deze fout is gemaakt.
Dit probleem komt ook voor bij andere formulieren, bijvoorbeeld die op pagina https://www.vanberesteyn.nl/stuur-mij-de-nieuwe-brochure/ en https://www.vanberesteyn.nl/wordonzevriend/.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 18: Deze bevinding is aangepast naar aanleiding van het deels oplossen van een eerdere bevinding:
Op onder andere pagina https://www.vanberesteyn.nl/verhuur/ komt een invoerveld voor zonder visueel label. Het invoerveld heeft de placeholder 'Telefoonnummer', maar dat verdwijnt zodra een bezoeker begint met typen. Doordat het label verdwijnt bij invoer kan het voor bezoeker met bepaalde cognitieve beperkingen lastig zijn deze velden in te vullen. Zorg ervoor dat deze velden een label krijgen dat blijft staan wanneer bezoekers iets invoeren bij het veld.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 19: Het formulier op pagina https://www.vanberesteyn.nl/contact/ maakt alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen zijn kortaf, vaak onvolledig en geven niet altijd aan welke fout is gemaakt. Ook geven deze foutmeldingen geen suggestie aan de bezoeker hoe zij de gemaakt fout in het formulier kunnen oplossen. Los dit op door zelf foutmeldingen toe te voegen aan het formulier. Zorg ervoor dat hierbij ook een suggestie wordt gegeven hoe de bezoeker de fout kan oplossen.
Dit probleem komt voor in meerdere formulieren, bijvoorbeeld op pagina https://www.vanberesteyn.nl/stuur-mij-de-nieuwe-brochure/ en https://www.vanberesteyn.nl/wordonzevriend/.

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-11-22 21:01:55 v2.4-011