Toegankelijkheidsonderzoek

Issues:
Systeemaudit digitale toegankelijkheid TNO subsitesysteem

(Alleen de bevindingen)

Scope van de evaluatie

Naam website TNO subsitesysteem
Datum 14 juli 2023
Scope van de website Binnen de scope van het onderzoek valt:
  • De techniek van het TNO subsitesysteem op de testomgeving tno-subsites.iprox.nl.
Buiten de scope van het onderzoek valt:
  • De content van het onderzochte domein. Op het subsitesysteem zullen meerdere verschillende subwebsites van TNO draaien, die een eigen contentonderzoek vereisen.
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 26

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: Op meerdere pagina's wordt met een icoon aangegeven dat een bestand gedownload kan worden, bijvoorbeeld op pagina https://tno-subsites.iprox.nl/paginatypen/landingspagina-lijsten-inhoudsblokken/. Dit icoon wordt op de pagina geplaatst met CSS. Wanneer bezoekers een eigen CSS bestand inladen, bijvoorbeeld om de tekstafstand te wijzigen of het contrast te vergroten, verdwijnt dit icoon. Gebruik CSS daarom ook alleen voor puur decoratieve content. Plaats het icoon in plaats daarvan bijvoorbeeld op de pagina als afbeelding met een alternatieve tekst. Dit geldt ook voor het externe link icoon.

Bevinding 2: Advies: De alternatieve tekst van het TNO logo bovenaan iedere pagina is 'tno-logo-white'. De alternatieve tekst bevat de naam van de organisatie, maar beschrijft verder het linkdoel niet en de taal komt niet overeen met de hoofdtaal van de pagina. Aangezien deze bevinding mogelijk een content-oplossing vereist, wordt het in dit onderzoek niet afgekeurd.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 3: In het navigatiemenu bovenaan iedere pagina staan menu-items die zijn opgemaakt als kop-element. Dat is niet ontoegankelijk, maar zoals het nu is ingesteld wordt nu de koptekst gepresenteerd aan hulpsoftware als 'Huisstijlhuisstijlopenen' en dat is wel ontoegankelijk. Dit komt omdat er twee link elementen binnen het h2-element zijn genest die beiden worden voorgelezen.

Bevinding 4: De tekst 'Powered bij TNO' in de footer van iedere pagina is opgemaakt met een h2-element. Aangezien dit geen kop is voor onderliggende content, mag deze tekst niet opgemaakt zijn als kop. Verwijder het kop-element om dit probleem op te lossen.

Bevinding 5: Wanneer bezoekers met het toetsenbord en een schermlezer door het navigatiemenu navigeren, krijgen zij bij bijvoorbeeld 'Huisstijl' te horen: 'Menu uitgeklapt navigatie oriëntatiepunt menu uitgeklapt lijst met 5 items huisstijl link kopniveau 2'. De uitgeklapt verwijst hier naar de status van het hamburgermenu wanneer bezoekers inzoomen op de pagina. Deze status wordt ook voorgelezen in full screen weergave, wanneer het hamburgermenu niet zichtbaar is. Zorg er daarom voor dat in- of uitgeklapt alleen wordt gecommuniceerd waar dat visueel ook logisch is.

Bevinding 6: Op pagina https://tno-subsites.iprox.nl/paginatypen/vraag-antwoord-index/ komt een uitklapbare tekst voor. Deze tekst is opgemaakt als link, die naar zichzelf verwijst. Het is voor bezoekers die het scherm niet kunnen zien, daarnaast niet duidelijk of de tekst is uitgeklapt of niet. Een link die naar zichzelf verwijst is niet de meest toegankelijke manier om dit soort functies aan te bieden. Gebruik bijvoorbeeld liever de HTML elementen details en summary.
Dit probleem komt ook voor op pagina https://tno-subsites.iprox.nl/paginatypen/landingspagina-blokken/.

Bevinding 7: Advies: Op pagina https://tno-subsites.iprox.nl/paginatypen/artikel-opmaak-0/ komt de tekst 'Links (kop 4)' voor. Deze tekst is opgemaakt als paragraaftekst in plaats van als koptekst. Zorg ervoor dat opmaak die in de editor wordt aangegeven als kop, in de HTML code ook daadwerkelijk een kop is. Op meerdere pagina's komen koppen voor waarvan de naam niet overeenkomt met wat er in de code voorkomt, waaronder op pagina https://tno-subsites.iprox.nl/paginatypen/landingspagina-blokrollen/.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Niet aanwezig

Bevinding 8: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 9: Wanneer een item in een uitgeklapt navigatiemenu item muisfocus heeft, kleurt de tekst blauw (HEX #3369FF). De contrastratio op de donkerblauwe achtergrond (HEX #002484) is hier 2,9: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: Niet aanwezig

Bevinding 10: Dit onderzoek richt zich op de techniek van de website, zodoende is dit succescriterium niet onderzocht.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 11: Wanneer bezoekers met schermgrootte 1280 bij 1024 pixels inzoomen naar 400% valt op de homepage de linktekst 'youtube' over de tekst 'Inhoud wordt niet getoond' heen, waardoor beide teksten niet meer goed leesbaar zijn. Zorg ervoor dat inzoomen niet zorgt voor verlies van informatie of functionaliteit. Vermijd daarbij het gebruik van een horizontale scrollbar.

Bevinding 12: Wanneer bezoekers met schermgrootte 1280 bij 1024 pixels inzoomen naar 400% op pagina https://tno-subsites.iprox.nl/paginatypen/facetzoeker/, is de tekst 'Facetzoeker' niet meer geheel leesbaar. Zorg ervoor dat inzoomen niet zorgt voor verlies van informatie of functionaliteit. Vermijd daarbij het gebruik van een horizontale scrollbar. Dit probleem komt op meerdere pagina's voor, waaronder op pagina https://tno-subsites.iprox.nl/paginatypen/evenementenagenda/voorbeeld-evenement-amsterdam/ en op pagina https://tno-subsites.iprox.nl/paginatypen/landingspagina-blokrollen/.
Op pagina https://tno-subsites.iprox.nl/paginatypen/landingspagina-blokken/ zijn meerdere bloktitels niet geheel leesbaar bij inzoomen.

Bevinding 13: Wanneer bezoekers met schermgrootte 1280 bij 1024 pixels inzoomen tussen de 125% en 175%, schuift de tijdlijn op pagina https://tno-subsites.iprox.nl/paginatypen/tijdlijn/ over zichzelf heen waardoor niet meer alle lijnen en teksten goed leesbaar zijn. Zorg ervoor dat inzoomen niet zorgt voor verlies van informatie of functionaliteit. Vermijd daarbij het gebruik van een horizontale scrollbar.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 14: Wanneer bezoekers op pagina https://tno-subsites.iprox.nl/paginatypen/download/ met schermgrootte 1280 bij 1024 pixels inzoomen naar 400% en de tekstafstand wijzigen naar de waarden zoals beschreven in dit succescriterium, is de tekst 'Download' niet meer geheel leesbaar. Zorg ervoor dat het wijzigen van de tekstafstand niet zorgt voor een verlies van functionaliteit of informatie. Dit probleem doet zich op meerdere pagina's voor, zie ook succescriterium 1.4.10.

Bevinding 15: Wanneer bezoekers op pagina https://tno-subsites.iprox.nl/paginatypen/landingspagina-lijsten-inhoudsblokken/ met schermgrootte 1280 bij 1024 pixels inzoomen naar 400% en de tekstafstand wijzigen naar de waarden zoals beschreven in dit succescriterium, is de lange linktekst 'Mag ik in een maatwerkbesluit of in de omgevingsvergunning een nadere of scherpere eis aan oplosmiddeleninstallaties stellen (pdf, 297 kB)' niet meer leesbaar omdat het deels van de pagina afvalt. Zorg ervoor dat het wijzigen van de tekstafstand niet zorgt voor een verlies van functionaliteit of informatie.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Onvoldoende

Bevinding 16: Wanneer bezoekers met het toetsenbord langs de social media iconen in de footer van iedere pagina navigeren, verschijnt er aanvullende tekst op de pagina. Bij ingezoomde weergave valt deze tekst over andere tekst heen. Bezoekers moeten deze content daarom kunnen verwijderen zonder de muis of de toetsenbordfocus te verplaatsen, bijvoorbeeld met de escape-toets.

2. Bedienbaar

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 17: In de footer van iedere pagina krijgt de link 'Vertel een vriend' toetsenbordfocus, terwijl deze link niet zichtbaar is op de pagina. Dit is verwarrend. Verwijder de link, of zorg ervoor dat de link zichtbaar is op de pagina om dit probleem op te lossen.

Bevinding 18: Wanneer bezoekers op pagina https://tno-subsites.iprox.nl/paginatypen/evenementenagenda een maand selecteren refresht de pagina en komt de focus weer bovenaan de pagina te staan. Dit is verwarrend. Zorg ervoor dat de focus zich verplaatst naar waar de bezoeker was gebleven. Zie ook succescriterium 3.2.2.

Bevinding 19: Wanneer bezoekers op https://tno-subsites.iprox.nl/paginatypen/formulier/ pagina een fout maken in het formulier verschijnen foutmeldingen op de pagina. De visuele focus van het scherm verplaatst naar de foutmeldingen bovenaan het formulier, maar de toetsenbordfocus blijft op de knop 'Ga verder' staan. Dit is vervelend voor toetsenbordgebruikers. Zorg ervoor dat de toetsenbordfocus ook verplaatst met de visuele weergave van het scherm.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 20: Op iedere pagina komt een h1 kop voor, die bestaat uit het logo van TNO en de tekst 'Demo subsite'. De kop die gepresenteerd wordt aan hulpsoftware is 'tno-logo-white Demo subsite'. Dit is geen beschrijvende kop. Verwijder het h1-element van het logo om dit probleem op te lossen.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 21: Wanneer bezoekers inzoomen op de pagina verschijnt er een hamburgermenu. In het geopende hamburgermenu krijgen de pijltjes om de menu-items uit te klappen geen zichtbare focus. Zorg ervoor dat bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren maar het scherm wél kunnen zien, weten waar zij zich op de pagina bevinden door een zichtbare focusrand toe te voegen.

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 22: Advies: Op pagina https://tno-subsites.iprox.nl/siteraamwerk/test-contentblokken/ komen Engelstalige links en teksten voor, terwijl de hoofdtaal van de pagina is ingesteld als Nederlands. Let op dat wanneer teksten in een andere taal dan de hoofdtaal worden aangeboden, er voor die teksten een taalwissel wordt aangegeven.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Onvoldoende

Bevinding 23: Wanneer bezoekers op pagina https://tno-subsites.iprox.nl/paginatypen/evenementenagenda/ een maand selecteren, refresht de pagina direct. Dit is verwarrend, omdat dit niet aangekondigd wordt. Zorg ervoor dat bezoekers er zelf voor kunnen kiezen om de zoekopdracht te versturen, of laad de informatie in de pagina zonder de pagina te refreshen (en zorg ervoor dat hulpsoftware hier een melding van krijgt).

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 24: De placeholders op pagina https://tno-subsites.iprox.nl/paginatypen/formulier/ geven informatie over hoe het invoerveld ingevuld moet worden, bijvoorbeeld: dd-mm-jjjj bij de vraag 'Wanneer is/was het?'. De placeholder verdwijnt wanneer een bezoeker begint met typen. Zorg ervoor dat labels en instructies zichtbaar blijven tijdens het invullen van invoervelden.

Bevinding 25: Opmerking: Op pagina https://tno-subsites.iprox.nl/paginatypen/formulier/ wordt een cognitieve functietest gebruikt als beveiligingscheck (het oplossen van een som). Dit is een barrière voor verschillende doelgroepen. Gebruik bij voorkeur een toegankelijkere manier.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 26: Op iedere pagina staat het logo van TNO met daarnaast de tekst 'Demo subsite'. Deze tekst is binnen een div-element geplaatst, als onderdeel van het a-element. Het div-element is een block level element en mag daarom niet binnen een inline element als het a-element geplaatst worden. Gebruik een span-element om dit probleem op te lossen.

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-01-15 09:36:33 v2.4-011