Rapport:
Audit digitale toegankelijkheid website Schooltv

Uitkomst: Onvoldoende

Bevindingen: Het logo van Schooltv in de header van pagina schooltv.nl/ is een svg-element dat verborgen is voor hulpsoftware door het gebruik van aria-hidden=true. Dit is een informatieve afbeelding die een alternatieve tekst nodig heeft. Verwijder daarom het aria-hidden attribuut en vervang deze voor een role=img. Geef het svg-element daarna een alternatieve tekst via het title-element, dat als eerste child element genest moet zijn in het svg-element. Er mag ook gebruik worden gemaakt van een aria-label. Zorg ervoor dat ministens de visuele tekst (de organisatienaam) is de alternatieve tekst voorkomt.
Andere logo's van Schooltv op deze pagina hebben ook geen alternatieve tekst, bijvoorbeeld in het inlogvenster. Het is belangrijk dat het logo minstens één keer met een alternatieve tekst wordt aangegeven, en dan het liefst het eerste logo dat voorkomt op de pagina.

Bij verschillende afbeeldingen op pagina schooltv.nl/ staat een symbool dat aangeeft dat bezoekers een video gaan bekijken als zij de link volgen. Dit is visuele informatie die niet beschikbaar is voor bezoekers die het scherm niet kunnen zien en gebruikmaken van voorleessoftware. Zorg ervoor dat er een alternatieve tekst aanwezig is voor dit video icoon. In sommige gevallen staat het woord 'Video' onder het icoon. Dat is een goede oplossing.
Dit icoon en soortgelijke iconen komen ook voor op andere pagina's, bijvoorbeeld op schooltv.nl/onderwijsvorm/primair-onderwijs en schooltv.nl/zoeken.

Op pagina schooltv.nl/ staan verschillende decoratieve afbeeldingen die een alternatieve tekst hebben die hetzelfde is als de kop waar de afbeelding bijstaat, dit gebeurt bijvoorbeeld bij 'De kloof tussen stad en platteland'. Zorg ervoor dat wanneer de decoratieve afbeelding een alternatieve tekst krijgt, deze de afbeelding goed omschrijft, zoals bij de afbeelding bij e kop 'Hoe maak je een mozaïek?'. Ook mogen decoratieve afbeeldingen verborgen worden voor hulpsoftware, dit kan door het img-element een leeg alt-attribuut te geven. Probeer wel consistent te zijn hoe wordt omgegaan met decoratieve afbeelding. Het zou namelijk verwarrend kunnen zijn wanneer sommige decoratieve afbeeldingen wel een alternatieve tekst hebben en andere weer verborgen zijn.
Dit komt ook voor bij decoratieve afbeeldingen op andere pagina's, bijvoorbeeld op pagina schooltv.nl/onderwijsvorm/primair-onderwijs.

Bij de resultaten op pagina schooltv.nl/zoeken= staan oog-iconen met daarachter een getal. Samen geeft deze content aan hoeveel keer een video is bekeken. Deze informatie is niet beschikbaar voor bezoekers die niet kunnen zien en gebruikmaken van een screenreader, omdat het oog-icoon geen alternatieve tekst heeft. Zorg ervoor dat dit svg-element een role=img krijgt en een alternatieve tekst via het title-element als eerste child element van het svg-element.
Dit icoon komt ook voor op andere pagina's, bijvoorbeeld op schooltv.nl/mijn-schooltv/laatst-bekeken en schooltv.nl/item/focus-in-de-klas-complotdenken.

Bij de resultaten op pagina schooltv.nl/zoeken staan img-elementen zonder alt-attribuut, bijvoorbeeld de kleine ronde afbeelding voor de tekst 'Dream School'. Zonder leeg alt-attribuut op decoratieve afbeeldingen kan hulpsoftware zelf op zoek gaan naar een alternatieve tekst, en gebruikt dan bijvoorbeeld de bestandsnaam. Zorg ervoor dat decoratieve afbeeldingen goed verborgen zijn voor hulpsoftware door deze een leeg alt-attribuut te geven.
Op andere pagina's staan ook img-elementen zonder alt-attribuut, bijvoorbeeld op schooltv.nl/item/het-leven-van-anne-frank en schooltv.nl/item/het-verhaal-van-oranje-nassau-in-de-klas-stadhouder-frederik-hendrik-en-amalia-van-….

Op pagina schooltv.nl/item/het-leven-van-anne-frank staat een afbeelding met de alternatieve tekst 'Grafische, abstracte vormen in de schooltv stijl', terwijl dit een portretfoto van Anne Frank is. Zorg ervoor dat de alternatieve tekst de afbeelding goed omschrijft.
Een soortgelijk probleem komt ook voor op andere pagina's, bijvoorbeeld op schooltv.nl/item/quiz-bij-het-nieuws-week-7-test-je-kennis en schooltv.nl/item/meer-muziek-in-de-klas-muzikale-verhalen-de-jongen-die-met-dieren-kan-praten bij de afbeelding met de alternatieve tekst 'Programmalogo's'

Op pagina schooltv.nl/programma/ruimteschip-aarde-in-de-klas/afleveringen staat achter de tekst 'Naar de website' een decoratief svg-element. Dit element heeft geen alternatieve tekst, maar is ook niet verborgen voor hulpsoftware. Sommige hulpsoftware en browser combinaties zullen deze afbeelding aangegeven. Verberg daarom dit elementen, bijvoorbeeld met aria-hidden.
Dit probleem komt ook voor bij andere decoratieve svg-elementen, zoals het icoon achter de knop 'Mijn schooltv'.

In de PDF cdn3.schooltv.nl/fileadmin/Lesbrief%20Het%20verhaal%20van%20Oranje%20Nassau%203.pdf staan afbeeldingen die een automatisch gegenereerde alternatieve tekst hebben. Het gaat bijvoorbeeld om het logo van Schooltv dat de alternatieve tekst 'P1#y1' heeft. Zorg ervoor dat informatieve afbeeldingen een goede alternatieve tekst krijgen.

In de PDF cdn3.schooltv.nl/fileadmin/Lesbrief%20Het%20verhaal%20van%20Oranje%20Nassau%203.pdf staan in de codelaag decoratieve elementen die zijn opgemaakt met een Figure-tag. Hierdoor wordt het door hulpsoftware aangegeven als afbeelding (zonder alternatieve tekst). Verberg deze decoratieve elementen door er een artefact van te maken.

Uitkomst: Onvoldoende

Bevindingen: Op pagina schooltv.nl/item/meer-muziek-in-de-klas-muzikale-verhalen-de-jongen-die-met-dieren-kan-praten staat een audio-opname waarvoor een alternatief aanwezig is (cdn3.schooltv.nl/fileadmin/PROGRAMMA/Basisonderwijs/MeerMuziekindeKlas/Muzikale_Verhalen_-…). Dit bestand is nog niet volledig toegankelijk. Het bestand heeft bijvoorbeeld geen documenttitel en de afbeeldingen in het bestand hebben geen alternatieve tekst. Zorg ervoor dat het toegankelijke alternatief voor een audio-opname ook volledig toegankelijk is. Ook zou het beter zijn als duidelijk wordt aangegeven waar het toegankelijk alternatief voor de audio-opname te vinden is door de linktekst 'Download het verhaal (pdf)' aan te passen. Dit is geen verplichting, maar zou toegankelijker zijn.

Uitkomst: Onvoldoende

Bevindingen: Op pagina schooltv.nl/item/focus-in-de-klas-complotdenken staat een video die geen ondertiteling heeft. Hierdoor kunnen mensen met auditieve beperkingen het audiospoor niet volgen. Zorg ervoor dat de video een ondertiteling krijgt.
Ook de video op pagina schooltv.nl/item/eenvandaag-in-de-klas-datalek heeft geen ondertiteling.

Uitkomst: Onvoldoende

Bevindingen: In de video op pagina schooltv.nl/item/focus-in-de-klas-complotdenken komen teksten in beeld te staan, bijvoorbeeld rond 00:14, 03:11 en op het eind van de video. Deze visuele informatie is niet beschikbaar voor bezoekers die het scherm niet (goed) kunnen zien. Zorg ervoor dat deze informatie voorkomt in het audiospoor, of maak gebruik van een media-alternatief (zoals een transcript) waarin deze informatie beschikbaar is.
Dit komt ook voor in andere video's, bijvoorbeeld op pagina schooltv.nl/item/het-verhaal-van-oranje-nassau-in-de-klas-stadhouder-frederik-hendrik-en-amalia-van-… en schooltv.nl/item/eenvandaag-in-de-klas-datalek.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de video op pagina schooltv.nl/item/focus-in-de-klas-complotdenken komen verschillende visuele informatie, zoals teksten en logo's, in beeld. Kijk bijvoorbeeld rond 00:14, 03:11 of aan het eind van de video. Deze informatie komt niet terug in het audiospoor en is daardoor niet beschikbaar voor bezoekers die het scherm niet (goed) kunnen zien. Zorg ervoor dat de informatie in het audiospoor voorkomt. Dat kan door gebruik te maken van een voice-over of audiodescriptie.
Dit komt ook voor in andere video's, bijvoorbeeld op pagina schooltv.nl/item/het-verhaal-van-oranje-nassau-in-de-klas-stadhouder-frederik-hendrik-en-amalia-van-… en schooltv.nl/item/eenvandaag-in-de-klas-datalek

Uitkomst: Onvoldoende

Bevindingen: Op pagina schooltv.nl/veelgestelde-vragen staat onder de knop 'In welke browsers of op tablets kan ik Schooltv.nl gebruiken?' een opsomming. Visueel is deze opsomming te herkennen aan de opsommingstekens, maar in de code is het niet opgemaakt als een lijst. Zorg ervoor dat deze lijst is opgemaakt met een ul-element en alle lijstitems zijn geplaatst in li-elementen.

Op pagina schooltv.nl/veelgestelde-vragen staat informatie verborgen onder knoppen, maar hulpsoftware geeft de informatie onder een knop ook aan wanneer de knop is ingeklapt. Hierdoor hebben de knoppen geen functie voor bijvoorbeeld screenreadergebruikers. Zorg ervoor dat wanneer de knoppen zijn ingeklapt, de informatie onder de knop ook verborgen is voor hulpsoftware.

In de paginering onderaan de resultaten op schooltv.nl/zoeken= wordt aangegeven welke pagina de huidige is doordat de tekst- en achtergrondkleur zijn omgedraaid. Dit is visuele informatie die niet aanwezig is in de code. Zorg ervoor dat visuele informatie altijd in een bepaalde manier aanwezig is in de code zodat hulpsoftware dit kan aangegeven. Het probleem kan hier worden opgelost door gebruik te maken van aria-current op de link van de huidige pagina.
Een soortgelijk probleem komt ook voor op andere pagina's, bijvoorbeeld op schooltv.nl/mijn-schooltv/laatst-bekeken bij de onderstreepte link 'Laatst bekeken'.

Op pagina schooltv.nl/zoeken= staat de h1 kop '116 gevonden voor Biologie'. Deze kop is voor hulpsoftware niet te herkennen als kop vanwege role=status op het h1-element. Zorg ervoor dat deze kop nog steeds als kop te herkennen is, bijvoorbeeld door een span-element binnen het h1-element te plaatsen en hier de role=status op te plaatsen.

Op pagina schooltv.nl/zoeken= staan groepen selectievakjes die visueel een bijschrift hebben. In de code zijn deze groepen selectievakjes niet gekoppeld aan het bijschrift. Hierdoor is het voor sommige bezoekers lastig te bepalen wat zij selecteren als zij naar een selectievakje navigeren, bijvoorbeeld voor screenreadergebruikers. Zorg ervoor dat de groepen selectievakjes gekoppeld zijn aan het bijbehorende bijschrift, bijvoorbeeld door gebruik te maken van een fieldset en legend combinatie.

Op pagina schooltv.nl/item/focus-in-de-klas-complotdenken staat de knop 'embed'. Deze knop opent een venster, maar dat venster wordt niet opgemerkt door hulpsoftware. Zorg ervoor dat hulpsoftware het venster opmerkt, bijvoorbeeld door hier focus op te plaatsen als het venster verschijnt. Dit probleem komt ook voor bij de knop 'toevoegen'.
Dit komt ook voor op andere pagina's, bijvoorbeeld schooltv.nl/item/quiz-bij-het-nieuws-week-7-test-je-kennis.

De codelaag van de PDF cdn3.schooltv.nl/fileadmin/Lesbrief%20Het%20verhaal%20van%20Oranje%20Nassau%203.pdf bevat devolgende toegankelijkheidsproblemen:

• Alle visuele koppen zijn opgemaakt met een P-tag. Hierdoor kan hulpsoftware niet aangeven dat deze tekst een kop is. Zorg ervoor dat alle koppen worden opgemaakt met een kop-tag (H1, H2, ect.)
• Opsommingen, zoals onder 'Kijkvragen', zijn niet opgemaakt met de juiste tags. Hulpsoftware kan niet aangeven dat hier een opsomming staat. Zorg ervoor dat opsommingen worden opgemaakt met L- en LI-tags.
• Meerdere P-tags zijn alleen gevuld met witruimte en worden daardoor voorgelezen door sommige screenreaders als 'leeg'. Het is beter om deze tags te verwijderen. Dit is niet afkeurbaar maar een advies.

Advies: De homepage schooltv.nl/ bevat geen h1 kop. Een h1 kop geeft meestal het onderwerp van de pagina aan. Het kan een informatief middel zijn voor gebruikers van screenreaders en zoekmachines. Daarom is het beter als elke pagina, ook de homepage, een h1 kop heeft. Op de homepage mag de h1 kop visueel verborgen zijn.

Advies: Op pagina schooltv.nl/over-schooltv wordt de h2 kop 'Colofon' opgevolgd door de h4 kop 'Inhoud en eindredactie:'. Het is beter voor de toegankelijkheid om een goede koppenstructuur te gebruiken. Een goede koppenstructuur begint bij een h1 kop voor de titel van de pagina, gevolgd door h2 koppen voor de koppen, h3 koppen voor de tussenkoppen, ect.
Een niet correcte koppenstructuur wordt ook gebruikt op andere pagina's, bijvoorbeeld op schooltv.nl/onderwijsvorm/primair-onderwijs.

Uitkomst: Onvoldoende

Bevindingen: De codelaag van de PDF cdn3.schooltv.nl/fileadmin/Lesbrief%20Het%20verhaal%20van%20Oranje%20Nassau%203.pdf is niet opgemaakt in de juiste volgorde. Hierdoor is de volgorde waarin hulpsoftware het document bijvoorbeeld voorleest niet correct. Zo wordt de rechterkolom met tekst eerst voorgelezen, en daarna pas de linkerkolom. Zorg ervoor dat de codelaag overeenkomt met de leesvolgorde.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina schooltv.nl/mijn-schooltv/maak-een-account staat een formulier waar de bezoeker onder andere het eigen e-mailadres en naam 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: www.w3.org/tr/wcag21/.

Uitkomst: Onvoldoende

Bevindingen: Op pagina schooltv.nl/programma/ruimteschip-aarde-in-de-klas/clips staan twee knoppen: 'Afleveringen' en 'Korte clips'. Welke knop geselecteerd is is alleen op basis van kleur te zien. Naast deze de blauwe kleuren te weinig contrast heeft met het wit (zie ook succescriterium 1.4.11), mag informatie ook niet alleen op basis van kleur worden overgebracht. Sommige mensen kunnen kleuren namelijk niet goed waarnemen. Los dit probleem bijvoorbeeld op door alleen de knop die geselecteerd is te onderstrepen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina schooltv.nl/ komen verschillende blauwe teksten (HEX #009DD1) voor, bijvoorbeeld 'Groep 6-8'. Op de witte achtergrond hebben deze teksten onvoldoende contrast. De contrastverhouding is hier 3,1:1, waar dat minimaal 4,5:1 moet zijn. De pagina bevat ook grote teksten (vanaf 14pt en dikgedrukt óf vanaf 18pt) met deze tekstkleur, zoals 'Nieuw voor primair onderwijs'. Hier is de contrastverhouding wel voldoende.
Deze kleurencombinatie komt ook omgekeerd voor op de pagina, bijvoorbeeld in de melding 'Schooltv is vernieuwd' en het inlogvenster.
Deze kleurencombinatie komt ook voor op andere pagina's, bijvoorbeeld op schooltv.nl/zoeken en schooltv.nl/mijn-schooltv/maak-een-account. Deze kleuren komen ook voor in de PDF cdn3.schooltv.nl/fileadmin/Lesbrief%20Het%20verhaal%20van%20Oranje%20Nassau%203.pdf.

Op pagina schooltv.nl/ komt de knop 'Open' voor. De witte tekst 'Open' heeft op de oranje achtergrond (HEX #FF7635) onvoldoende contrast. De contrastverhouding is hier 2,6:1, waar dat minimaal 4,5:1 moet zijn.
Deze knop komt voor op meerdere pagina's.

Op pagina schooltv.nl/ staat de witte tekst 'Primair Onderwijs' op een groene achtergrond. Wanneer bezoekers hier met de muisaanwijzer overheen gaan verandert de achtergrond naar een lichter groen (HEX #0DCCA5), waardoor de tekst onvoldoende contrast heeft. De contratsverhouding is hier 2:1, waar dat minimaal 3:1 moet zijn. Zorg ervoor dat teksten ook voldoende contrast hebben wanneer bezoekers hier met de muisaanwijzer overheen gaan.
Een soortgelijk probleem komt ook voor bij de radiobutton 'PO' op dezelfde pagina. Ook komt dit contrastprobleem voor op andere pagina's, bijvoorbeeld op schooltv.nl/onderwijsvorm/primair-onderwijs en schooltv.nl/item/politiek-van-nederland.

Op pagina schooltv.nl/ staat het zoekveld met de placeholdertekst 'Ik zoek iets over...'. Deze lichtgrijze placeholdertekst (HEX #BCD2DA) heeft onvoldoende contrast op de witte achtergrond. De contrastverhouding is hier 1,5:1, waar dat minimaal 4,5:1 moet zijn.
Dit zoekveld komt voor op meerdere pagina's.

Op pagina schooltv.nl/over-schooltv staat een witte tekst over een foto. In de normale weergave is deze tekst goed leesbaar en zijn er geen contrastproblemen, maar wanneer bezoekers inzoomen (bijvoorbeeld tot 200% bij een schermbreedte van 1280 en 1024 pixels) staat de tekst deels over een lichte achtergrond. Op sommige punten is de achtergrond licht grijs (HEX #B8BBC4), waardoor de witte tekst een contrastverhouding van 1,9:1 heeft. De witte tekst zou overal minstens een contratsverhouding van 4,5:1 moeten hebben. Het is beter om teksten niet over afbeeldingen te plaatsen, omdat het dan moeilijk is om de tekst overal voldoende contrast te laten hebben.

Op pagina schooltv.nl/onderwijsvorm/primair-onderwijs staan blauwe teksten (HEX #009DD1) op een lichtblauwe achtergrond (HEX #E5F0F2), bijvoorbeeld de tekst 'Uitgelicht'. Deze teksten hebben een contrastverhouding van 2,6:1, waar dat minimaal 4,5:1 moet zijn voor kleine teksten (tot 14pt en dikgedrukt óf tot 18pt) en 3:1 voor grote teksten.
Deze kleurencombinatie komt ook voor op andere pagina's, bijvoorbeeld op schooltv.nl/zoeken en schooltv.nl/item/focus-in-de-klas-complotdenken.

In de PDF cdn3.schooltv.nl/fileadmin/Lesbrief%20Het%20verhaal%20van%20Oranje%20Nassau%203.pdf staat op pagina 2 de roze tekst 'Leerlingenversie' (HEX #FF2D54). Op de witte achtergrond heeft deze tekst onvoldoende contrast. De contrastverhouding is hier 3.6:1, waar dat minimaal 4,5:1 moet zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina schooltv.nl/ kunnen bezoekers via de knop 'Mijn Schooltv' een venster openen. De tekst die naast de invoervelden staat verdwijnt als bezoekers inzoomen vanaf 175% bij een schermbreedte van 1280 bij 1024 pixels. Zorg ervoor dat content niet verdwijnt wanneer bezoekers inzoomen op een pagina.

Als bezoekers op pagina schooltv.nl/ inzoomen tot 400% bij een schermbreedte van 1280 bij 1024 pixels, verschijnt er een horizontale scrollbalk op de pagina om content zichtbaar mee te maken. Dit is niet toegestaan bij dit succescriterium. Bezoekers moeten kunnen inzoomen op elke pagina tot 400% zonder dat zij horizontaal moeten scrollen om content zichtbaar te maken (behalve bij uitgezonderde elementen zoals tabellen, video's en kaarten). Verwijder de horizontale scrollbalk van de pagina bij inzoomen en zorg ervoor dat alle content binnen de schermweergave past.
Een soortgelijk probleem komt ook voor op meerdere pagina's, bijvoorbeeld op schooltv.nl/item/focus-in-de-klas-complotdenken en schooltv.nl/item/het-leven-van-anne-frank.

Wanneer bezoekers op onder andere pagina schooltv.nl/ inzoomen bij een schermbreedte van 1280 bij 1024 pixels, verdwijnt vanaf 150% het logo van NPO (dat werkt als link) van de pagina. Content en functionaliteiten mogen niet verdwijnen wanneer bezoekers inzoomen.
Ook verdwijnt de knop 'Open' van deze en andere pagina's wanneer bezoekers inzoomen (vanaf 175%).

Wanneer bezoekers op pagina schooltv.nl/onderwijsvorm/primair-onderwijs inzoomen bij een schermbreedte van 1280 bij 1024 pixels, verdwijnt vanaf 200% tot 400% steeds een stuk van de tekst onder de kop 'Film in de klas (PO)'. Zorg ervoor dat content zichtbaar blijft als bezoekers inzoomen op een pagina.
Dit komt ook voor op schooltv.nl/onderwijsvorm/primair-onderwijs/geschiedenis bij het contentblok 'De Tweede Wereldoorlog'.

Uitkomst: Onvoldoende

Bevindingen: Op pagina schooltv.nl/ staat een zoekknop die visueel gelabeld is met een wit vergrootglas. Wanneer bezoekers met de muisaanwijzer over de knop gaan, verandert de blauwe achtergrond naar een lichter blauw (HEX #4DC2EE). In deze staat heeft het witte label van de knop onvoldoende contrast op de achtergrond. De contrastverhouding is hier 2:1, waar dat minimaal 3:1 moet zijn.

Via de knop 'Mijn schooltv' op onder andere pagina schooltv.nl/ kunnen bezoekers een inlogvenster openen. In dit venster staan twee invoervelden die worden aangegeven met grijze randen (HEX #B7D0D9). Op de witte achtergrond hebben deze invoervelden onvoldoende contrast. De contratsverhouding is hier 1,6:1, waar dat minimaal 3:1 moet zijn.
Deze invoervelden staan ook op pagina schooltv.nl/mijn-schooltv/maak-een-account en schooltv.nl/mijn-schooltv/beheer-account.

Op pagina schooltv.nl/zoeken= staat de knop 'Gallerij weergave' om de zoekresultaten anders weer te geven. Het lichtblauwe label (HEX #B7D0D9) van deze knop heeft te weinig contrast op de witte achtergrond. De contrastverhouding is hier 1,6:1, waar dat minimaal 3:1 moet zijn.
Deze knop komt ook voor op andere pagina's, bijvoorbeeld op schooltv.nl/mijn-schooltv/laatst-bekeken.

Op pagina schooltv.nl/programma/ruimteschip-aarde-in-de-klas/afleveringen staan twee knoppen: 'Afleveringen' en 'Korte clips'. Welke knop geselecteerd is is te zien op basis van de achtergrondkleur van de knop. Deze blauwe kleur (HEX #D6EEF8) heeft te weinig contrast met het wit. De contrastverhouding is hier 1,2:1, waar dat minimaal 3:1 moet zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De website bevat geen mechanisme waarmee bezoekers herhalende content kunnen overslaan. Voor toetsenbordgebruikers moet er een mechanisme zijn waarmee zij content kunnen overslaan wat op meerdere pagina's staat, zoals het logo, om het navigeren makkelijker te maken. Dit kan bijvoorbeeld door gebruik te maken van een zogenoemde skiplink. Een skiplink is meestal visueel niet-zichtbaar, tenzij hier toetsenbordfocus op staat.

Uitkomst: Onvoldoende

Bevindingen: De paginatitel (zichtbaar in het tabblad van de browser) van schooltv.nl/ is 'Schooltv'. Dit geeft duidelijk aan op welke website de bezoeker zich bevindt, maar omschrijft de pagina niet. Zorg ervoor dat de paginatitel altijd de unieke pagina omschrijft. Los dit probleem op door bijvoorbeeld 'Homepage' of 'Homepagina' toe te voegen aan deze paginatitel.

Advies: De paginatitel van schooltv.nl/veelgestelde-vragen is 'Schooltv Help'. Dat omschrijft de inhoud van de pagina wel, maar de h1 kop van de pagina is 'Veelgestelde vragen', wat ook de tekst is van de link die naar deze pagina leidt. Het zou daarom beter zijn als deze pagina de paginatitel 'Veelgestelde vragen | Schooltv' heeft.

De PDF cdn3.schooltv.nl/fileadmin/Lesbrief%20Het%20verhaal%20van%20Oranje%20Nassau%203.pdf heeft geen documenttitel in de eigenschappen staan. Een documenttitel is een belangrijk navigatiemiddel wanneer meerdere documenten open staan, en geeft aan gebruikers van hulpsoftware het hoofdonderwerp van het document aan. Zorg ervoor dat de PDF een goede documenttitel krijgt. Ook moet de documenttitel worden getoond bij openen en niet de bestandsnaam.

Advies: De paginatitels van meerdere pagina's op de website bevatten niet de naam van de website, bijvoorbeeld pagina schooltv.nl/contact die 'Contact' heet. Het zou beter zijn als alle paginatitels ook de naam van de website bevatten, zodat bezoekers gelijk weten bij welke website de pagina hoort. Een goede paginatitel voor pagina schooltv.nl/contact kan dan bijvoorbeeld 'Contact | Schooltv' zijn.

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers de website voor het eerst bezoekers staat er een cookiemelding op elke pagina. Deze cookiemelding krijgt niet als eerst focus als toetsenbordgebruikers over de pagina navigeren, maar pas als laatst. Hierdoor moeten deze gebruikers over elk element op een pagina navigeren voordat zij de cookies kunnen accepteren, terwijl deze melding voor andere content staat. Zorg ervoor dat de cookiemelding als eerst focus krijgt op elke pagina.

Wanneer bezoekers op onder andere pagina schooltv.nl/ de knop 'Mijn schooltv' activeren, verschijnt er een venster in beeld waarin bezoekers kunnen inloggen. De focus volgorde blijft netjes binnen dit venster wanneer toetsenbordgebruikers van elementen naar element navigeren, maar gaat wel over de adresbalk van de browser. Dit kan verwarrend zijn. Zorg ervoor dat de toetsenbordfocus binnen het venster blijft tot de bezoeker deze afsluit.
Dit komt voor bij meerdere vensters die geopend kunnen worden op de website.

Via de knop 'Mijn schooltv' op onder andere pagina schooltv.nl/ kunnen bezoekers een inlogvenster openen. Wanneer bezoekers dit inlogformulier met een fout erin versturen, verschijnt er een foutmelding tussen de invoervelden en de knop 'Inloggen'. Voor toetsenbordgebruikers blijft de focus staan op de knop 'Inloggen', waardoor zij moeten terugnavigeren op de pagina om de fout op te lossen. Het beste is als deze algemene foutmelding boven het formulier staat en de focus op de melding komt te staan als deze verschijnt, bijvoorbeeld door gebruik te maken van tabindex=-1 (zodat deze niet voorkomt in de focus volgorde). Een andere oplossing is om alleen foutmeldingen te plaatsen bij velden waarin de fout is gemaakt, en de focus dan te verplaatsen naar het eerste veld waar een fout in is gemaakt.
Hetzelfde probleem komt voor in het formulier op pagina schooltv.nl/mijn-schooltv/maak-een-account.

Op pagina schooltv.nl/veelgestelde-vragen staat uitvouwbare knoppen. Achter de knoppen zit content, zoals teksten en links. Voor toetsenbordgebruikers is het mogelijk om focus te plaatsen op links achter de knoppen als de knoppen zijn ingeklapt. Hierdoor weten ziende bezoekers niet welk element focus heeft, omdat op dat moment het element dat focus heeft niet zichtbaar is. Zorg ervoor dat toetsenbordfocus alleen geplaatst wordt op element die zichtbaar zijn.

Op pagina schooltv.nl/zoeken staan bij de filteropties verschillende 'Toon meer' knoppen. Wanneer toetsenbordgebruikers deze knoppen openen, blijft de focus op deze knoppen staan en verplaatst deze niet naar de nieuw verschenen selectievakjes. Hierdoor kunnen bezoekers die het scherm niet kunnen zien mogelijk de nieuwe content missen en toetsenbordgebruikers moeten terugnavigeren. Zorg ervoor dat wanneer de 'Toon meer' knop is geopend, de toetsenbordfocus verplaatst naar de nieuwe selectievakjes.

Wanneer bezoekers op pagina schooltv.nl/zoeken= inzoomen bij een schermbreedte van 1280 bij 1024 pixels, verdwijnen vanaf 125% de filteropties achter de knop 'Toon filters'. Wanneer toetsenbordgebruikers deze knop activeren verschijnt er een venster met de filteropties over de pagina, maar focus wordt niet in dit venster geplaatst. Na het openen van de knop gaat de focus verder op de achterliggende pagina. Hierdoor kunnen toetsenbordgebruikers in een ingezoomde weergave de filters niet makkelijk bereiken. Zorg ervoor dat focus in het venster wordt geplaatst tot de bezoeker het afsluit. Het zou dan beter zijn om een goede sluitknop in het venster te plaatsten in plaats van de 'Toon resultaten' knop.

Wanneer bezoekers op pagina schooltv.nl/item/focus-in-de-klas-complotdenken de knop 'toevoegen' activeren, opent er een venster. In dit venster kan content zichtbaar worden gemaakt met de knop 'Nieuwe verzameling', maar toetsenbordgebruikers kunnen als focus plaatsen op deze content wanneer het niet zichtbaar is. Zorg ervoor dat toetsenbordfocus alleen geplaatst kan worden op zichtbare elementen.
Dit komt ook voor op andere pagina's, bijvoorbeeld schooltv.nl/item/het-leven-van-anne-frank en schooltv.nl/item/quiz-bij-het-nieuws-week-7-test-je-kennis.

Uitkomst: Onvoldoende

Bevindingen: Onderaan de resultaten op pagina schooltv.nl/zoeken= staat de links 'Volgende'. Visueel is duidelijk dat deze link naar devolgende pagina verwijst, maar dit is niet te halen uit de toegankelijke naam. Zorg ervoor dat de toegankelijke naam van deze link bijvoorbeeld 'Volgende pagina' is. Dat kan bijvoorbeeld door gebruik te maken van een aria-label op het a-element.

Op pagina schooltv.nl/item/het-leven-van-anne-frank heeft de link naar de tijdlijn de toegankelijke naam 'Grafische, abstracte vormen in de schooltv stijl'. De link krijgt deze toegankelijke naam door de alternatieve tekst van het img-element binnen het a-element. Deze toegankelijke naam omschrijft het linkdoel onvoldoende. Hierdoor weten bijvoorbeeld screenreadergebruikers niet waar de link naar verwijst. Pas de toegankelijke naam van de link aan zodat het duidelijk dat dit een link is naar de tijdlijn over het leven van Anne Frank. Het aanpassen van de toegankelijke naam kan bijvoorbeeld via een aria-label.
Een soortgelijk probleem komt ook voor op andere pagina's, bijvoorbeeld op schooltv.nl/item/quiz-bij-het-nieuws-week-7-test-je-kennis bij de link 'Narcissen in bloei' die naar een quiz leidt en op pagina schooltv.nl/item/hoe-schadelijk-is-roken bij de link 'Grafische, abstracte vormen in de schooltv stijl'.

Advies: Op pagina staat een afbeelding met daarachter de tekst 'Focus in de klas'. Deze twee elementen zijn samen in een a-element geplaatst, waardoor de link de toegankelijke naam 'W op rode achtergrond Focus in de klas' heeft. Het is beter om de afbeelding uit de link te halen en alleen de tekst op te maken als link.
Dit komt ook voor op andere pagina's, bijvoorbeeld op schooltv.nl/item/meer-muziek-in-de-klas-muzikale-verhalen-de-jongen-die-met-dieren-kan-praten.

Uitkomst: Onvoldoende

Bevindingen: Via de zoekfunctie op de website kunnen verschillende pagina's gevonden worden, maar niet alle pagina's. Bijvoorbeeld de contactpagina (schooltv.nl/contact) kan niet gevonden worden via de zoekfunctie. Zorg ervoor dat de zoekfunctie wordt aangepast zodat alle pagina's hiermee gevonden kunnen worden, of maak gebruik van een sitemap waarmee bezoekers alle pagina kunnen vinden.

Uitkomst: Onvoldoende

Bevindingen: Op pagina schooltv.nl/zoeken= staat een knop met de toegankelijke naam 'Toon filters'. Deze toegankelijke naam omschrijft de functie van de knop onvoldoende. Het is namelijk zo dat door de knop te activeren de filters verdwijnen van de pagina, pas wanneer de filters zijn ingeklapt klopt de naam van de knop. Zorg ervoor dat de toegankelijke naam van de knop altijd de functie omschrijft.

Advies: Op pagina schooltv.nl/ staat onderaan de knop 'Open'. Dit label geeft mogelijk niet aan alle bezoekers duidelijk aan wat de knop opent. Voor bijvoorbeeld screenreadergebruikers die de knop niet zien en na het open van de knop de achterliggende elementen niet direct opmerken, kan het label van de knop onduidelijk zijn. Het zou beter zijn om het label van deze knop aan te passen.

Uitkomst: Onvoldoende

Bevindingen: Onderaan pagina schooltv.nl/ staat de knop 'Open'. Wanneer toetsenbordgebruikers focus plaatsen op deze knop wordt dat niet aangegeven met een visuele indicator. Hierdoor weten ziende toetsenbordgebruikers niet welk elementen op dat moment focus heeft. Los dit probleem bijvoorbeeld op door gebruik te maken van een focusrand op deze knop. Hetzelfde komt vaker voor in de website, bijvoorbeeld in het Cookie venster dat de eerste keer dat de website bezocht wordt verschijnt bij de knop "Sluit melding".

Op pagina schooltv.nl/onderwijsvorm/primair-onderwijs staan verschillende elementen die geen visuele indicator hebben wanneer toetsenbordfocus hierop staat. Het gaat om de contentblokken onder de kop 'Programma's voor primair onderwijs', het blok 'Film in de klas', en de blokken onder 'Interactieve schoolplaten'. Zorg ervoor dat wanneer focus staat op deze elementen het wordt aangegeven met een visuele indicator, bijvoorbeeld een focusrand.

Soortgelijke elementen die geen visuele focus indicator krijgen komen ook voor op andere pagina's, bijvoorbeeld op;

• schooltv.nl/zoeken=, het contentblok onder 'Programma's'.
• Verschillende elementen in de videospeler op onder andere pagina schooltv.nl/item/focus-in-de-klas-complotdenken.
• schooltv.nl/onderwijsvorm/primair-onderwijs/geschiedenis, bij de contentblokken onder de koppen 'Programmatips' en 'Oorlog en bevrijding'.
• schooltv.nl/item/meer-muziek-in-de-klas-muzikale-verhalen-de-jongen-die-met-dieren-kan-praten, bij het contentblok 'De schrijfkamer van Jozua Douglas'.

Op pagina schooltv.nl/programma/ruimteschip-aarde-in-de-klas/afleveringen staan twee knoppen: 'Afleveringen' en 'Korte clips'. Wanneer welke knop focus heeft is moeilijk te zien omdat bij beide knoppen de focus wordt aangegeven met één streep die tussen de knoppen staat. Zorg ervoor dat focus wordt aangeven met een focusrand die om het hele element staat.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de footer van onder andere pagina schooltv.nl/ staat het logo van Schooltv dat is opgemaakt als een link. De toegankelijke naam van deze link is 'Terug naar de homepage', wat het linkdoel goed omschrijft maar het bevat niet het visuele label. Hierdoor is de link mogelijk moeilijk te bedienen voor bezoekers die gebruikmaken van spraakgestuurde bediening. Zorg ervoor dat het visuele label altijd voorkomt in de toegankelijke naam van een link, het liefst vooraan. Los dit probleem op door het aria-label op het a-element aan te vullen met 'Schooltv'.
Dit logo komt in de footer voor op alle pagina's. Ook komt het logo voor in de header op verschillende pagina met hetzelfde toegankelijkheidsprobleem, bijvoorbeeld op pagina schooltv.nl/contact en schooltv.nl/item/politiek-van-nederland.

Op pagina schooltv.nl/ staan radiobutton naast het zoekveld. Deze radiobuttons hebben de visuele labels 'PO' en 'VO', maar de toegankelijke namen zijn 'Primair Onderwijs' en 'Voorgezet Onderwijs'. Omdat het visuele label en de toegankelijke naam niet een-op-een overeenkomen is het mogelijk dat de radiobuttons niet goed te bedienen zijn met spraakgestuurde bediening. Zorg ervoor dat het visuele label altijd voorkomt in de toegankelijke naam. Dit kan bijvoorbeeld door het aria-label op het label-element aan te passen of weg te laten.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Als bezoekers op pagina schooltv.nl/mijn-schooltv/maak-een-account een wachtwoorden aanmaken dat niet voldoet aan de voorwaarden, verschijn een lijst met verschillende foutmeldingen, zoals 'The password should have at least "8" characters and a maximum of "160" characters' en 'length'. Dit zijn Engelse teksten terwijl de pagina een Nederlandse taalaanduiding heeft. Hierdoor zal voorleessoftware de content niet met een correcte uitspraak voorlezen. Zorg ervoor dat een taalwissel wordt aangegeven op de Engelse teksten door middel van het lang-attribuut, of (idealiter) vertaal de foutmeldingen naar het Nederlands.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers op pagina schooltv.nl/zoeken een filteropties selecteren, laadt een nieuwe pagina en wordt de nieuw verschenen content aangegeven door hulpsoftware. Dit kan desoriënterend en verwarrend zijn voor sommige bezoekers. Zorg ervoor dat geen contextwijzigen plaatsvinden wanneer bezoekers iets selecteren of gegevens invoeren. Een mogelijke oplossing voor dit probleem is het toevoegen van een knop waarmee bezoekers de geselecteerde filters kunnen toepassen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Via de knop 'Mijn schooltv' op onder andere pagina schooltv.nl/ kunnen bezoekers een inlogvenster openen. Wanneer bezoekers bijvoorbeeld het veld 'Wachtwoord' leeg laten en het formulier versturen, verschijnt de foutmelding 'Er is 1 foutmelding: length' op het scherm. Deze foutmelding geeft onvoldoende aan welke fout de bezoeker heeft gemaakt. Zorg ervoor dat foutmeldingen altijd aangeven welke fout de bezoeker heeft gemaakt, in het geval van privacygevoelige gegevens zoals wachtwoorden hoeft dat niet precies te zijn. Als de foutmelding niet bij het veld staat moet de melding ook aangeven waar de fout is gemaakt. Los dit probleem op door foutmeldingen toe te voegen die aangeven waar de fout is gemaakt en welke fout.
De bovenstaande foutmelding verschijnt in alle mogelijke invoersituaties, maar als geen correct e-mailadres is ingevuld verschijnt ook een HTML5-foutmelding. Deze foutmelding is ook niet toegankelijke, onder andere omdat deze maar kort in beeld staat. Verwijder deze melding van het veld en voeg een eigen foutmelding toe.

In het formulier op pagina schooltv.nl/mijn-schooltv/maak-een-account wordt gebruik gemaakt van HTML5 foutmeldingen. Deze foutmeldingen zijn niet toegankelijk. De melding zelf is vaak onvolledig en blijft niet altijd in beeld staan. Zorg ervoor dat goede foutmeldingen worden toegevoegd aan het formulier. Een goede foutmelding geeft aan welke fout de bezoeker heeft gemaakt en idealiter waar de fout is gemaakt.

Als bezoekers op pagina schooltv.nl/mijn-schooltv/maak-een-account een wachtwoorden aanmaken dat niet voldoet aan de voorwaarden, verschijn een lijst met verschillende foutmeldingen, zoals 'The password should have at least "8" characters and a maximum of "160" characters' en 'length'. Deze foutmelding geeft niet duidelijk genoeg aan welke fout de bezoeker heeft gemaakt. Zorg ervoor dat foutmeldingen aangeven welke fout de bezoeker heeft gemaakt.

Opmerking: Via de knop 'Mijn schooltv' op onder andere pagina schooltv.nl/ kunnen bezoekers een inlogvenster openen. De foutmelding die bij dit formulier verschijn staat onder het formulier maar boven de knop 'Inloggen'. Het is beter om zo een algemene foutmelding boven het formulier te plaatsen en de toetsenbordfocus hier naar te verplaatsen (zie ook succescriterium 2.4.3)

Uitkomst: Onvoldoende

Bevindingen: Op pagina schooltv.nl/zoeken= staat een combobox waarmee bezoekers de resultaten kunnen sorteren. Deze combobox heeft geen visueel label wat aangeeft wat bezoekers hier kunnen selecteren. Hierdoor kan het voor mensen met bepaalde cognitieve beperkingen lastig zijn om dit element correct te gebruiken. Zorg er daarom voor dat invoerelementen altijd een visueel label hebben dat buiten het element staat en dat niet verdwijnt bij invoer.

Opmerking: Om een account aan te maken op pagina schooltv.nl/mijn-schooltv/maak-een-account, moeten bezoeker een wachtwoord invullen dat aan bepaalde voorwaarden moet voldoen. Deze voorwaarden worden alleen aangegeven in de foutmeldingen. Het zou het makkelijker maken voor bezoekers als de eisen van een wachtwoord al op de pagina staan voordat bezoeker het formulier versturen.

Uitkomst: Onvoldoende

Bevindingen: Via de knop 'Mijn schooltv' op onder andere pagina schooltv.nl/ kunnen bezoekers een inlogvenster openen. Wanneer bezoekers bijvoorbeeld het veld 'Wachtwoord' leeg laten en het formulier versturen, verschijnt de foutmelding 'Er is 1 foutmelding: length' op het scherm. Naast dat deze melding de fout niet correct aangeeft (zie succescriterium 3.3.1), geeft deze foutmelding ook geen mogelijke oplossing voor de bezoeker. Zorg ervoor dat foutmeldingen bij formulieren een zogenoemde foutsuggestie meegeven zodat de bezoeker hulp heeft bij het oplossen van de gemaakte fout, bijvoorbeeld bij het veld 'E-mail' kan een voorbeeld format van een e-mailadres worden getoond.

In het formulier op pagina schooltv.nl/mijn-schooltv/maak-een-account wordt gebruik gemaakt van HTML5 foutmeldingen. Deze foutmeldingen zijn niet toegankelijk. Ze geven niet altijd goed aan welke fout is gemaakt, blijven soms voor een korte tijd in beeld staan en geven geen suggestie hoe de fout kan worden opgelost. Zorg ervoor dat goed foutmeldingen worden toegevoegd aan dit formulier. Om te voldoende aan dit succescriterium moet de foutmelding een suggestie geven hoe bezoekers de fout kunnen oplossen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de filteropties op pagina schooltv.nl/zoeken= staan uitklapbare knoppen. In de code wordt de status van de knop niet aangegeven. Hierdoor is het voor bezoekers die het scherm niet (goed) kunnen zien en een screenreadergebruiken moeilijk te bepalen of de knop is uitgeklapt of ingeklapt. Zorg er daarom voor dat de status van de knop wordt aangegeven in de code, bijvoorbeeld door gebruik te maken van aria-expanded.

Dit probleem komt voor op meerdere plekken, bijvoorbeeld:

• Op dezelfde pagina bij de knop 'Meer informatie over archief'.
• Wanneer op dezelfde pagina wordt ingezoomd verschijnt de knop 'Toon filters'. Hier moet ook aria-expanded op worden aangegeven.

Uitkomst: Onvoldoende

Bevindingen: Via de knop 'Mijn schooltv' op onder andere pagina schooltv.nl/ kunnen bezoekers een inlogvenster openen. Als bezoekers het inlogformulier niet correct invullen en het versturen, verschijnt de foutmelding 'Er is 1 foutmelding: length'. Alleen het bericht 'Er is 1 foutmelding:' wordt opgemerkt door hulpsoftware zoals screenreaders. Zorg ervoor dat de volledige melding wordt opgemerkt door hulpsoftware.

Als screenreadergebruikers op pagina schooltv.nl/zoeken een filter selecteren, worden alle nieuwe zoekresultaten voorgelezen vanwege het attribuut aria-live=polite op alle zoekresultaten. Dit is niet noodzakelijk en kan verwarrend zijn. Zorg ervoor dat alleen de tekst die aangeeft hoeveel zoekresultaten zijn gevonden wordt opgemerkt door hulpsoftware.

Wanneer bezoekers het formulier op pagina schooltv.nl/mijn-schooltv/maak-een-account succesvol versturen, verschijnt de melding 'Gelukt! Activeer je account door op de link in de bevestigingsmail te klikken.' op het scherm. Deze melding wordt niet opgemerkt door hulpsoftware. Hierdoor kunnen niet-ziende bezoekers missen dat het formulier goed is verstuurd. Zorg ervoor dat de melding wordt opgemerkt door hulpsoftware, bijvoorbeeld door gebruik te maken van role=status of aria-live.
Dezelfde melding kan ook verschijnen op pagina schooltv.nl/mijn-schooltv/beheer-account. Dit probleem komt ook voor bij andere meldingen op de website, bijvoorbeeld als een item (zoals op pagina schooltv.nl/item/focus-in-de-klas-complotdenken) is toegevoegd aan een verzameling of als een embedcode succesvol is gekopieerd naar het klembord.