Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Stichting The English Theatre

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Stichting The English Theatre
Scope van de website Binnen de scope van het onderzoek valt:Buiten de scope van het onderzoek valt:
  • Het ticketbestelproces op www.ticketkantoor.nl/events/stet/en. Ticketkantoor is geen onderdeel van The English Theatre en vergt een eigen onderzoek.
  • Inschrijven voor nieuwsbrieven via Mailchimp.
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Externe websites waar door middel van links op www.theenglishtheatre.nl naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 61

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 < en > iconen, onder 'Education offers' op de homepage, waarmee bezoekers naar links of naar rechts kunnen bewegen in de carrousel, hebben geen alternatieve tekst en missen daardoor ook een linkdoel.

Bevinding 2: Het pijlicoon onderaan pagina www.theenglishtheatre.nl/ waarmee bezoekers naar een volgende pagina kunnen gaan, heeft geen alternatieve tekst. Hierdoor mist het icoon ook een linkdoel.

Bevinding 3: De afbeelding van kleine vierkantjes die samen een groter vierkant vormen vlak boven de footer op pagina www.theenglishtheatre.nl/2021/04/30/new-stet-promo-video/, die linkt naar www.theenglishtheatre.nl/productions/, bevat geen alternatieve tekst en mist daardoor ook een linkdoel. Dit probleem komt op meerdere pagina's voor, waaronder op pagina www.theenglishtheatre.nl/project/storytelling-and-identity-….

Bevinding 4: Het vergrootglas icoon dat dient als visueel label voor het invoerveld op pagina www.theenglishtheatre.nl/nonexistent heeft geen alternatieve tekst en mist daardoor ook een linkdoel. Voeg een beschrijvende alternatieve tekst toe, bijvoorbeeld 'Search', om dit probleem op te lossen.

Bevinding 5: De iconen van sterren, onder 'Reviews' op pagina www.theenglishtheatre.nl/2020/04/02/louder-is-not-always-…, hebben geen alternatieve tekst. De iconen worden daarnaast niet voorgelezen door screenreaders. Bezoekers die gebruik maken voor voorleessoftware weten nu niet dat (en hoeveel) sterren worden gegeven.

Bevinding 6: Het logo van STET in de PDF op pagina www.theenglishtheatre.nl/wp-content/uploads/2019/02/your-… is gemarkeerd als decoratief (artefact), maar heeft wel een alternatieve tekst nodig. De alternatieve tekst van een logo moet altijd minimaal de naam van de organisatie en eventueel andere zichtbare tekst op de afbeelding bevatten.
Het logo van STET in de PDF op pagina www.theenglishtheatre.nl/wp-content/uploads/2020/04/… is wel gemarkeerd als figuur, maar mist ook een alternatieve tekst.

Bevinding 7: Het logo van STET op pagina 18 in de PDF op pagina www.theenglishtheatre.nl/wp-content/uploads/2020/04/… bevat wel een alternatieve tekst, maar deze beschrijft de afbeelding niet (goed). De alternatieve tekst is 'stet logo 3 klein 183x92.jpg', de bestandsnaam van de afbeelding. Verander de alternatieve tekst naar bijvoorbeeld 'Logo STET The English Theatre' om dit probleem op te lossen.

Bevinding 8: De decoratieve afbeeldingen in de PDF op pagina www.theenglishtheatre.nl/wp-content/uploads/2020/04/… bevatten automatisch gegeneerde alternatieve teksten die de afbeeldingen niet beschrijven. Voeg een beschrijvende alternatieve tekst toe of markeer de afbeeldingen als decoratief door ze als artefact te coderen.

Bevinding 9: Advies: Op pagina www.theenglishtheatre.nl/project/storytelling-and-identity-… staan foto's van sprekers. Deze afbeeldingen hebben geen alternatieve tekst. Het kan voor bezoekers die gebruik maken van voorleessoftware prettig zijn om te weten dat het om foto's van de betreffende sprekers gaat, zodat iemand in hun omgeving de personen voor ze kan beschrijven.

1.2 Op tijd gebaseerde media

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 10: De video op pagina www.theenglishtheatre.nl/2021/04/30/new-stet-promo-video/ bevat geen audiodescriptie, waar dat wel nodig is. Zo komen bijvoorbeeld de namen en functies van de sprekers in beeld en bevat het einde van de video een logo, links naar de website en Instagram en een dankwoord voor de sponsors. Er ontbreekt uitgeschreven tekst en er is ook geen voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van een screenreader niet weten wat er word getoond in de video. Zet deze en andere informatie in een transcript. Of kies voor een extra audiospoor om direct ook te voldoen aan SC 1.2.5.
Dit geldt ook voor de video www.theenglishtheatre.nl/2020/04/02/louder-is-not-always-…. In deze video moet de audiodescriptie ook vertellen wat er zichtbaar is in de video, omdat de informatie anders in zijn geheel niet beschikbaar is voor bezoekers die het scherm niet kunnen zien.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 11: De video op pagina www.theenglishtheatre.nl/2021/04/30/new-stet-promo-video/ bevat geen audiodescriptie, waar dat wel nodig is. Zo komen bijvoorbeeld de namen en functies van de sprekers in beeld en bevat het einde van de video een logo, links naar de website en Instagram en een dankwoord voor de sponsors. Er ontbreekt een voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien niet weten wat er word getoond in de video. Maak voor deze en andere informatie gebruik van een extra audiospoor.
Dit geldt ook voor de video www.theenglishtheatre.nl/2020/04/02/louder-is-not-always-…. In deze video moet de audiodescriptie ook vertellen wat er zichtbaar is in de video, omdat de informatie anders in zijn geheel niet beschikbaar is voor bezoekers die het scherm niet kunnen zien.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 12: De naam van de productie op pagina www.theenglishtheatre.nl/2020/04/02/louder-is-not-always-… is in de lopende tekst opgemaakt met het em-element. Het em-element geeft nadruk aan een enkel woord of korte zinnen en mag daarom niet gebruikt worden voor puur opmaak. Gebruik het cite-element om naar de titels van creatieve werken te verwijzen.

Bevinding 13: De tekst 'STET The English Theatre' in het Facebook iframe op de homepage ziet er visueel uit als een kop maar is dat in de code niet. Bezoekers die gebruik maken van een screenreader kunnen aan de hand van een koppenlijst over de pagina navigeren. Tekst die er visueel uitziet als een kop, maar niet is opgemaakt met een h-element of de rol 'heading' heeft, komt daar niet op voor, wat het navigeren voor hen lastiger maakt.

Bevinding 14: De tabellen (onder de kop 'Workshop Plan (1 hour)' en de kop 'Workshop Plan (1,5 hour)') op pagina www.theenglishtheatre.nl/project/storytelling-and-identity-… zijn niet correct opgemaakt. De kopjes zijn geplaatst in td-elementen, waar dat het th-element moet zijn. De relatie tussen de kopjes en de informatie in de datacellen is hierdoor niet meer duidelijk voor bezoekers die gebruik maken van voorleessoftware. Lees meer over HTML tabelopmaak op: www.w3schools.com/html/html_tables.asp.

Bevinding 15: Op pagina www.theenglishtheatre.nl/2021/09/20/were-back-august-… staan meerdere koppen, die daarnaast ook met het strong-element zijn opgemaakt. Bijvoorbeeld 'Romeo and Juliet | Globe Berlin' en 'Louder is Not Always Clearer | Jonny Cotson 30, 31 OCT +1 NOV | Koninklijke Schouwburg'. Het strong-element geeft nadruk aan een enkel woord of korte zinnen en mag daarom niet gebruikt worden voor puur opmaak. Verwijder het strong-element om dit probleem op te lossen.

Bevinding 16: Op pagina www.theenglishtheatre.nl/2021/09/20/were-back-august-… staan twee koppen van kopniveau 4 onder elkaar. Onder een kop moet content staan, óf een kop van een lager niveau dan de kop er boven. Maak gebruik van een logische koppenstructuur om dit probleem op te lossen.

Bevinding 17: Het is voor ziende bezoekers zichtbaar in welk hoofddeel van de website zij zich bevinden omdat er een rode streep verschijnt onder het betreffende onderdeel in het navigatiemenu in de header van de pagina (iedere pagina). Deze informatie is niet tekstueel (bijvoorbeeld via een kruimelpad) of in de code beschikbaar voor bezoekers die gebruik maken van voorleessoftware. Gebruik aria-current of een vergelijkbare techniek om dit probleem op te lossen.

Bevinding 18: De PDF op pagina www.theenglishtheatre.nl/wp-content/uploads/2019/02/your-… is niet (goed) gecodeerd. De PDF bevat wel tags, maar deze komen niet overal overeen met wat er zichtbaar is. De koppen in de PDF zijn opgemaakt met een paragraaf tag in plaats van een headingtag. Aangezien deze PDF onderdeel is van een lopend administratief proces, geldt de aanbeveling deze informatie beschikbaar te maken op een HTML-pagina, zodat bezoekers niet afhankelijk zijn van het downloaden van een PDF.

Bevinding 19: De PDF op pagina www.theenglishtheatre.nl/wp-content/uploads/2020/04/… is niet (goed) gecodeerd. De PDF bevat wel tags, maar deze komen niet overal overeen met wat er zichtbaar is.

Zie ook succescriteria 1.1.1 en 1.3.2.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 20: De leesvolgorde van de PDF op pagina www.theenglishtheatre.nl/wp-content/uploads/2020/04/… is niet overal logisch. Op meerdere plekken komen afbeeldingen (figuren) op een onlogische plek in de leesvolgorde voor, waaronder op pagina 8. Zie ook succescriteria 1.3.1 en 1.1.1.

Bevinding 21: Let op: Op pagina www.theenglishtheatre.nl/ staan contentblokken, waarvan sommigen een afbeelding bevatten. In de code staat de afbeelding bóven de kop van het artikel. Dit is niet erg zolang de afbeelding als decoratief wordt aangemerkt, zoals nu het geval is door een leeg alt-attribuut. Maar mocht ervoor gekozen worden om een alternatieve tekst toe te voegen, dan moeten alle meta-data die bij een kop horen, zoals afbeeldingen met een alternatieve tekst, datums en auteurs in de code ónder de betreffende kop staan. Visueel mag het er wel boven 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 22: De formulieren op pagina www.theenglishtheatre.nl/contact/ bevatten geen autocomplete attributen. HMTL5 invoervelden die informatie over de gebruiker vragen, zoals naam/achternaam, adres en geboortedatum, moeten een juist autocomplete attritbuut hebben. Lees meer over autocomplete attributen op www.w3.org/TR/WCAG21/.
Dit geldt ook voor de formulieren op pagina www.theenglishtheatre.nl/education/what-teachers-say-about-….

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 23: Nieuwe bevinding nav aanpassen kleur placeholdertekst:
Het contrast van de tekst van de placeholder in het invoerveld op pagina www.theenglishtheatre.nl/nonexistent is te laag. De contrastratio van de grijze tekst (HEX #7e7e7e) op de lichtgrijze achtergrond (HEX #FDFDFD) is 4:1, waar dat minimaal 4,5:1 moet zijn. Verhoog de contrastratio naar minimaal 4,5:1 om dit probleem op te lossen.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 24: Nieuwe bevinding nav oplossen vorige bevinding bij 1.4.4 Herschalen van tekst:
Wanneer bezoekers inzoomen naar 200% op pagina www.theenglishtheatre.nl/contact/, valt het formulier 'Join our mailing list' van het scherm. Ook komt de content in de footer over dit formulier te staan waardoor deze tekst slecht leesbaar is. Zorg ervoor content op het scherm blijft staan en content niet over elkaar gaat staan als bezoekers inzoomen op het scherm.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 25: Op de homepage staat een afbeelding, die verwijst naar het symposium 'Timtim' op 4 en 5 maart. Deze afbeelding bevat tekst. Voor bezoekers met een visuele beperking is het belangrijk dat tekst als HTML wordt geplaatst en niet in een afbeelding. Zij kunnen tekst in HTML namelijk met een eigen stylesheet naar hun wensen opmaken, terwijl tekst in een afbeelding niet aanpasbaar is. Plaats deze tekst daarom (ook) als HTML-tekst op de pagina.

Bevinding 26: De afbeeldingen in de slider op pagina www.theenglishtheatre.nl/contact/ bevatten tekst (titel, datum). Voor bezoekers met een visuele beperking is het belangrijk dat tekst als HTML wordt geplaatst en niet in een afbeelding. Zij kunnen tekst in HTML namelijk met een eigen stylesheet naar hun wensen opmaken, terwijl tekst in een afbeelding niet aanpasbaar is. Plaats deze tekst daarom (ook) als HTML-tekst op de pagina. Dit komt op meerdere plekken voor, waaronder op pagina www.theenglishtheatre.nl/about-us/yearly-reports/ en op pagina www.theenglishtheatre.nl/about-us/.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 27: Wanneer bezoekers met viewport 1280 bij 1024 inzoomen naar 400% op pagina www.theenglishtheatre.nl/contact/ valt de tekst '
Copyright 2021 © Stichting The English Theatre | Privacy Statement | Powered by Creative Touch' over de link 'Book your tickets' waardoor beide teksten niet meer (goed) leesbaar zijn.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 28: Het contrast van de 'Go to top' knop (iedere pagina) is te laag wanneer de knop geen focus heeft. De contrastratio tussen het witte icoon en de grijze achtergrond (HEX #CCCCCC) is 1,6:1, waar dat minimaal 3:1 moet zijn. Verhoog de contrastratio naar minimaal 3:1 om dit probleem op te lossen.

Bevinding 29: Het contrast van het vergrootglas-icoon bij het invoerveld op pagina www.theenglishtheatre.nl/nonexistent is te laag wanneer een bezoeker met de muis over het icoon hovert. De contrastratio tussen het grijze icoon (HEX #a5a5a5 en de lichtgrijze achtergrond (HEX #FDFDFD) is 2,4:1, waar dat minimaal 3:1 moet zijn. Verhoog de contrastratio naar minimaal 3:1 om dit probleem op te lossen.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Onvoldoende

Bevinding 30: Als je op de homepage over de menu-items zoals 'About us' hovert met de muis, verschijnt er aanvullende content. Deze content kan niet door de bezoeker worden weggehaald zonder de muis te bewegen of de focus met het toetsenbord te verplaatsen. Een bezoeker moet dit bijvoorbeeld met de escape toets kunnen doen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 31: Wanneer bezoekers inzoomen naar 200%, verandert het navigatiemenu in de header van de pagina (iedere pagina) in een hamburgermenu. De knop om het menu vervolgens weer te sluiten is niet toetsenbordtoegankelijk. Zie ook 4.1.2.

Bevinding 32: Wanneer bezoekers inzoomen naar 200%, verandert het navigatiemenu in de header van de pagina (iedere pagina) in een hamburgermenu. De knoppen om de submenu's te openen en te sluiten ( + en X) zijn niet toetsenbordtoegankelijk. Zie ook 4.1.2.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 33: De videospeler op pagina www.theenglishtheatre.nl/2021/04/30/new-stet-promo-video/ bevat sneltoetsen. Video's moeten een extra stuk code hebben die de standaard sneltoetsen van de videospeler uitschakelen. In Youtube kan je de sneltoetsen uitschakelen door in de URL van de ingebedde video de parameter 'disablekb=1' toe te voegen. Dit geldt ook voor de video op pagina www.theenglishtheatre.nl/2020/04/02/louder-is-not-always-….

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 34: De website beschikt wel over een skiplink om herhalende content over te slaan, maar het eerstvolgende element dat focus krijgt is de 'Accessibility tools' knop die op iedere pagina voorkomt. Daarna doorloopt de bezoeker alsnog het navigatiemenu in de header van de pagina. De skiplink lijkt alleen visueel de bezoeker naar de hoofdinhoud van de pagina te brengen, de focus verandert niet.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 35: De PDF op pagina www.theenglishtheatre.nl/wp-content/uploads/2019/02/your-… bevat geen titel, enkel een bestandsnaam. Een goede titel is belangrijk voor bezoekers met verschillende beperkingen, het is namelijk een belangrijk hulpmiddel bij het navigeren. Voeg een beschrijvende titel toe en kies bij 'Weergave bij openen' voor 'Documenttitel' om dit probleem op te lossen. Dit geldt ook voor de PDF op pagina www.theenglishtheatre.nl/wp-content/uploads/2020/04/….

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 36: Wanneer bezoekers met de tab-toets het navigatiemenu van de pagina (iedere pagina) doorlopen, blijft het sub-menu van 'Education' openstaan, ook als de bezoeker er al voorbij is. Zorg ervoor dat het menu vanzelf weer sluit, zodat de content geen andere content verbergt (bijvoorbeeld bij inzoomen).

Bevinding 37: Op de homepage staat een carrousel onder de tekst 'Education Offers'. Wanneer bezoekers met de tabtoets navigeren, krijgen eerst de op dat moment niet zichtbare items in de carrousel toetsenbordfocus. Dit is verwarrend voor bezoekers die met het toetsenbord navigeren maar wel het scherm kunnen zien, zij weten niet waar de focus zich op dat moment bevindt.

Bevinding 38: Wanneer bezoekers inzoomen naar 200%, verandert het navigatiemenu in de header van de pagina (iedere pagina) in een hamburgermenu. Wanneer bezoekers het menu openen met de tab-toets, gaat de focus vervolgens eerst naar het logo van STET op de achterliggende pagina, voor de focus weer terugkomt in het zojuist geopende menu. Maak de focusvolgorde logisch, ook wanneer bezoekers zijn ingezoomd op de pagina, om dit probleem op te lossen.

Bevinding 39: Wanneer bezoekers inzoomen naar 200%, verandert het navigatiemenu in de header van de pagina (iedere pagina) in een hamburgermenu. Wanneer bezoekers het menu hebben doorlopen met de tab-toets, gaat de focusvolgorde verder op de achterliggende pagina in plaats van terug naar de sluitknop bovenaan het menu. Het menu blijft hierdoor openstaan. Zorg ervoor dat bezoekers het menu eerst moeten sluiten door de focus terug te brengen naar de sluitknop, of laat het menu automatisch sluiten wanneer de bezoeker door het menu heen is.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 40: Nieuwe bevinding nav toevoegen alternatieve tekst op afbeeldingen:
Op pagina www.theenglishtheatre.nl/ staat afbeeldingen die ook een link zijn. Deze afbeeldingen hebben een alternatieve tekst die browsers gebruiken voor de toegankelijke naam van de link. Hierdoor heeft de afbeelding/link bij de kop 'Een meeuw (A Seagull)' de toegankelijke naam 'Promotional image of one of the performers on a dark blue background.'. Deze toegankelijke naam omschrijft het linkdoel niet. De best practice is hier om alleen de titel ('Een meeuw (A Seagull)') als link te laten fungeren, en de link en het title-attribuut van de afbeelding te halen. De afbeelding wordt dan als decoratief beschouwd. Vervolgens kan met Javascript het klikbare gebied worden vergroot.
Dit komt op meerdere pagina's voor, zoals de homepage en pagina's www.theenglishtheatre.nl/productions/, www.theenglishtheatre.nl/education/education-offers/, www.theenglishtheatre.nl/news/ en www.theenglishtheatre.nl/2021/09/20/were-back-august-….

Bevinding 41: Op pagina www.theenglishtheatre.nl/ staan links naar andere pagina's met zoekresultaten, zoals '1' en een icoon van een naar rechts wijzende pijl. Links die naar pagina's verwijzen mogen niet alleen het getal van de pagina als linkdoel bevatten. Voeg een duidelijker linkdoel toe, bijvoorbeeld 'pagina' met onzichtbare tekst, om dit probleem op te lossen.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 42: Op de homepage staat een carrousel onder de tekst 'Education Offers'. Wanneer bezoekers met de tabtoets navigeren, krijgen eerst de op dat moment niet zichtbare items in de carrousel toetsenbordfocus. Dit is verwarrend voor bezoekers die met het toetsenbord navigeren maar wel het scherm kunnen zien, zij weten niet waar de focus zich op dat moment bevindt.

Bevinding 43: Nieuwe bevinding nav toevoegen zichtbare focus:
Wanneer bezoekers met het toetsenbord de focus plaatsen op de elementen in de carrousel op pagina www.theenglishtheatre.nl/contact/, wordt dit niet aangegeven met een zichtbare focusrand. Zorg ervoor dat het altijd zichtbaar is wanneer de focus op een element staat.
De probleem komt op meerdere pagina's voor, bijvoorbeeld op pagina www.theenglishtheatre.nl/about-us/.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 44: Nieuwe bevinding n.a.v plaatsten aria-label op a-element:
Op de homepage staan meerdere links met de visuele linktekst 'More info'. Bij geen van deze links staat het volledige visuele label in de toegankelijke naam. De link 'More info' onder de kop 'Timtim (4+)' heeft de toegankelijke naam 'Read more about Timtim (4+)'. Mensen die gebruik maken van spraakbediening kunnen deze link niet activeren door het visuele label uit te spreken. Zorg er daarom voor dat het volledige visuele label in de toegankelijke naam van een bedienbaar element staat, het liefst vooraan. Bij de eerdere genoemde link zou de toegankelijke naam bijvoorbeeld 'More info about Timtim (4+)' kunnen zijn om te voldoen aan dit succescriterium.

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 45: De taal van de PDF op pagina www.theenglishtheatre.nl/wp-content/uploads/2019/02/your-… is ingesteld op Nederlands, maar het is een Engelstalig document. Dit heeft mogelijk tot gevolg dat de tekst in de verkeerde taal wordt voorgelezen, waardoor de tekst onverstaanbaar wordt voor blinden en slechtzienden. Pas de taalinstellingen aan om dit probleem op te lossen.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Onvoldoende

Bevinding 46: Wanneer bezoekers op pagina www.theenglishtheatre.nl/education/what-teachers-say-about-… zich willen inschrijven voor één van de twee nieuwsbrieven en vervolgens op de 'Subscribe' knop klikken, worden zij naar een nieuwe pagina verwezen waar zij vervolgens méér informatie moeten invoeren (achternaam) en vervolgens weer op 'Subscribe' te klikken. Dit is onlogisch en onverwacht. Dit komt op meerdere pagina's voor, waaronder op pagina www.theenglishtheatre.nl/education/education-offers/.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 47: Wanneer bezoekers op pagina www.theenglishtheatre.nl/contact/ een formulierveld niet of niet goed invullen, verschijnt de foutmelding 'One or more fields have an error. Please check and try again.' De betreffende velden krijgen alleen een rode omranding, er staat bij de velden geen verdere foutidentificatie. De gebruiker moet een foutmelding krijgen wanneer een invoerveld niet goed is ingevuld of het formulier niet goed verzonden kan worden. De foutmelding moet beschrijven welke fout is gemaakt en wáár die is gemaakt.

Bevinding 48: Wanneer bezoekers in het formulier 'Join our mailinglist' een verkeerd e-mailadres invullen, verschijnt de melding 'Please enter a valid email address'. Dit is een instructie. Een foutmelding moet beschrijven welke fout is gemaakt en wáár die is gemaakt.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 49: Op pagina www.theenglishtheatre.nl/education/what-teachers-say-about-… staan twee formulieren met identieke invoervelden. Aangezien de id's die aan de labels gekoppeld zijn hetzelfde zijn voor de gelijke invoervelden, bevat elk invoerveld twee labels. Dit is verwarrend voor bezoekers die gebruik maken van voorleessoftware. Zie ook succescriterium 4.1.1. Dit komt op meerdere pagina's voor, waaronder op pagina www.theenglishtheatre.nl/education/education-offers/.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 50: Op de homepage komen meerdere dubbele id's voor, namelijk: 'default-btn-ecf764fa53feaad1cab8fa5b47717fc7' en 'education'. Id's moeten altijd uniek zijn.

Bevinding 51: Op pagina www.theenglishtheatre.nl/contact/ komt een paragraaf eindtag voor, zonder openings tag. Dit probleem komt op meerdere pagina's voor, waaronder op www.theenglishtheatre.nl/about-us/yearly-reports/.

Bevinding 52: Op pagina www.theenglishtheatre.nl/education/education-offers/ komen meerdere dubbele id's voor, namelijk: mc-embedded-subscribe-form, mc_embed_signup_scroll, mce-EMAIL, mce-MMERGE5, mce-MMERGE6, mce-responses, mce-error-response, mce-success-response en mc-embedded-subscribe. Id's moeten altijd uniek zijn. Dit komt op meerdere pagina's voor, waaronder op pagina. Dit komt op meerdere pagina's voor, waaronder op pagina www.theenglishtheatre.nl/education/what-teachers-say-about-….

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 53: De < en > iconen (die ook links zijn), onder 'Education offers' op de homepage, waarmee bezoekers naar links of naar rechts kunnen bewegen in de carrousel, hebben geen toegankelijke naam. Zie ook 2.4.4.

Bevinding 54: De knop 'Search' rechts bovenin op elke pagina mist een status die aangeeft of het zoekveld uitgeklapt of ingeklapt is. Dit kan onder andere opgelost worden met het aria-expanded attribuut.

Bevinding 55: Het Facebook iframe op de homepage heeft geen beschrijvende naam binnen het title-attribuut, waar dat wel verplicht is.

Bevinding 56: Wanneer bezoekers inzoomen naar 200%, verandert het navigatiemenu in de header van de pagina (iedere pagina) in een hamburgermenu. De knop om het menu vervolgens weer te sluiten, heeft geen toegankelijke naam of rol. Bezoekers die gebruik maken screenreaders kunnen de knop momenteel niet gebruiken.

Bevinding 57: Wanneer bezoekers inzoomen naar 200%, verandert het navigatiemenu in de header van de pagina (iedere pagina) in een hamburgermenu. De knoppen om de submenu's te openen en te sluiten ( + en X) hebben geen toegankelijke naam of rol. Bezoekers die gebruik maken screenreaders kunnen het menu momenteel niet gebruiken.

Bevinding 58: Het is voor ziende bezoekers zichtbaar welke pagina van de zoekresultaten op pagina www.theenglishtheatre.nl/ zichtbaar is, omdat het paginanummer onderstreept wordt. Deze informatie wordt niet doorgegeven aan screenreadergebruikers. Gebruik aria-current of een vergelijkbare techniek om dit probleem op te lossen. Dit geldt ook voor de tabbladen op pagina www.theenglishtheatre.nl/education/education-offers/.

Bevinding 59: Het pijlicoon onderaan pagina www.theenglishtheatre.nl/ waarmee bezoekers naar een volgende pagina kunnen gaan heeft geen toegankelijke naam. Het is voor bezoekers die gebruik maken van voorleessoftware daarom niet duidelijk waar de link naartoe verwijst.

Bevinding 60: De link in de afbeelding van kleine vierkantjes die samen een groter vierkant vormen op pagina www.theenglishtheatre.nl/2021/04/30/new-stet-promo-video/ heeft geen toegankelijke naam. Het is voor bezoekers die gebruik maken van voorleessoftware daarom niet duidelijk waar de link naartoe verwijst. Dit probleem komt op meerdere pagina's voor, waaronder op www.theenglishtheatre.nl/project/storytelling-and-identity-….

Bevinding 61: De link in het vergrootglas icoon dat dient als visueel label voor het invoerveld op pagina www.theenglishtheatre.nl/nonexistent heeft geen toegankelijke naam. Het is voor bezoekers die gebruik maken van voorleessoftware daarom niet duidelijk waar de link naartoe verwijst.

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: 2022-09-26 15:31:59 v2.3-011