Rapport:
Audit digitale toegankelijkheid van BVL Brabant

Uitkomst: Onvoldoende

Bevindingen: In de footer, bijvoorbeeld op de homepage https://www.bvlbrabant.nl/, staat een logo met zichtbare tekst "Provincie Noord-Brabant". Het tekstalternatief is “brabant”. In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Voeg een alt-tekst toe die de volledige tekst van het logo bevat. Zie ook het logo met zichtbare tekst "Brabant gaat voor nul verkeers slachtoffers". Het tekstalternatief is “brabantgaatvoornulverkeersdoden”.

Op de homepagina https://www.bvlbrabant.nl/ onder de sectie "in het nieuws" staat een kaart. Deze kaart is een SVG-afbeelding die geen title-element heeft om deze afbeelding een tekstalternatief te geven. Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. Hierdoor kan een schermlezer de informatie uit de afbeelding overbrengen aan een blinde bezoeker.

Op de homepagina https://www.bvlbrabant.nl/ staan in de kaart knoppen met een afbeelding van een verkeerskegel. Deze knoppen verschijnen wanneer de bezoeker inzoomt op de kaart. Wanneer een bezoeker deze knoppen activeert, wordt een tooltip met aanvullende informatie weergegeven. In de tooltips staan afbeeldingen van een grijze of bruine ster. Deze informatieve afbeeldingen zijn toegevoegd als achtergrondafbeeldingen en er is geen tekstalternatief voorzien. Een afbeelding die als achtergrond is toegevoegd aan een pagina, is ontoegankelijk voor schermlezers. Blinde bezoekers krijgen de informatie uit de afbeelding dus niet door. Zorg ervoor dat de informatie toch beschikbaar is via een tekstalternatief. Dit kan via een zichtbare tekst op de pagina. Een andere oplossing is om de afbeelding via het img-element plaatsen en de informatie in de alt-tekst zetten.

In het PDF-document op de https://assets.plaece.nl/kuma-bvlbrabant/uploads/media/63ebb2cff11ec/toelichting-en-voorbeeldvragen-wever-toets.pdf?token=/uploads/media/63ebb2cff11ec/toelichting-en-voorbeeldvragen-wever-toets.pdf Er zijn logo’s aanwezig zonder tekstalternatief. Zie pagina 3, 4, 5 en 6. Wanneer afbeeldingen aan een PDF-document worden toegevoegd met "figuur"-tags, moeten ze altijd een beschrijving (alt-tekst) hebben. Deze tag is voorbehouden aan informatieve afbeeldingen. Zonder alternatieve tekst kan de schermlezer de bezoeker niet duidelijk maken wat er in de afbeelding staat. Momenteel wordt alleen "afbeelding" voorgelezen. Blinde bezoekers kunnen de indruk krijgen dat ze inhoud missen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bvlbrabant.nl/over-bvl/bvl-info staat een video. Tekst en logo verschijnen op verschillende momenten in de video, bijvoorbeeld rond 0:01 en 2:40, maar er is geen media-alternatief of audiobeschrijving. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Je kunt het beste een audiobeschrijving toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het toevoegen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet je sowieso een audiobeschrijving toevoegen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bvlbrabant.nl/over-bvl/bvl-info staat een video. Tekst en logo verschijnen op verschillende momenten in de video, bijvoorbeeld rond 0:01 en 2:40, maar er is geen audiobeschrijving. Bij succescriterium 1.2.3 zijn video’s beschreven waar audiodescriptie of een media-alternatief ontbreekt. Dit wordt ook afgekeurd onder dit succescriterium. Voor dit succescriterium is audiodescriptie namelijk verplicht (niveau AA), waar ruimte is in het standaard audiospoor om deze informatie te geven. Er is in deze video voldoende ruimte hiervoor aanwezig, en dus moet de audiodescriptie toegevoegd worden. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

Uitkomst: Onvoldoende

Bevindingen: In de header, bijvoorbeeld op de homepage https://www.bvlbrabant.nl/ , staat een groep links: "home", "adressen" en "contact". Visueel horen deze links bij elkaar. Deze relatie ontbreekt in de HTML. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in een ul- of nav-element. Hetzelfde probleem komt ook voor in de footer. Zie de links "proclaimer", "privacyverklaring", "BVL in NL", etc.

In de header, bijvoorbeeld op de homepage https://www.bvlbrabant.nl/ , staat een navigatiemenu met links als "over BVL", "schoolinfo", "subsidie", enz. Dit menu is gemarkeerd als een lijst met elementen ul en li. De link met de tekst "mijn BVL" is echter in het div-element geplaatst. Lijsten moeten correct worden gemarkeerd, wat betekent dat ze geen andere inhoudselementen dan li elementen mogen bevatten.
Zorg ervoor dat alle geordende en ongeordende lijsten (gedefinieerd door ul- of ol-elementen) alleen li-inhoudselementen bevatten.

Op de homepagina https://www.bvlbrabant.nl/ staat een carrousel. Elke dia bevat tekst die is opgemaakt als een kop. Bijvoorbeeld, op de dia onder de kop "BVL in het kort" staat een tekst opgemaakt met h4-element: "hét verkeerseducatieprogramma voor basisscholen in Noord-Brabant". Het kop-element (h4) is niet betekenisvol gebruikt. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h4-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft. Verwijder het h4-element en gebruik een ander element, zoals een p-element. Hetzelfde probleem komt ook voor op de pagina https://www.bvlbrabant.nl/over-bvl/bvl-info . Onder de kop "BVL = smakelijk en herkenbaar" staat de volgende tekst die is gemarkeerd met het h4-element: “met het Label aan de muur …”.

Op pagina https://www.bvlbrabant.nl/subsidie/verkeersmethode staat een gegevenstabel. De juiste opmaak ontbreekt. Een gegevenstabel heeft een kolom met koppen die gerelateerd zijn aan gegevens in de tabel. Alleen met de juiste opmaak kunnen schermlezers deze relatie aan de gebruiker overbrengen. Zet hiervoor de koppen in th-elementen en de gegevens in td-elementen.

Op pagina https://www.bvlbrabant.nl/nieuws/bvl-nieuws/aan-in-het-donker-veilig-weer-naar-school-week wordt het strong-element gebruikt voor styling in tekst die begint met: "Fietsers in het verkeer zijn kwetsbaar ...". De hele alinea is gemarkeerd met meerdere strong-elementen.
Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst). Gebruik hiervoor CSS. Hetzelfde probleem komt ook voor in op de pagina https://www.bvlbrabant.nl/nieuws/bvl-nieuws/doe-mee-met-de-wever-toets . Zie de tekst die begint met: “Hoe staat het ervoor met de kennis en vaardigheden van leerlingen uit groep …”.

Op pagina https://www.bvlbrabant.nl/schoolinfo/het-dap/de-bvl-criteria staan kopjes gemarkeerd met een strong-element, bijvoorbeeld "Deel A. Verankering in schoolbeleid/organisatie", "Deel B. Verkeerseducatie in de klas", "Deel C. Praktische verkeerseducatie", enz. Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop worden gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis.

Op pagina https://www.bvlbrabant.nl/schoolinfo/het-dap/de-bvl-criteria staan lijsten. De juiste opmaak ontbreekt. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Voor lijsten en opsommingen worden de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets) gebruikt. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt.

Het PDF-document https://assets.plaece.nl/kuma-bvlbrabant/uploads/media/642d5fed0a74f/dap-tijdlijn.pdf heeft geen codes en daardoor is voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat codes ontbreken, kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag, zoals semantische koppen en alternatieve teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

In het PDF-document op https://assets.plaece.nl/kuma-bvlbrabant/uploads/media/63ebb2cff11ec/toelichting-en-voorbeeldvragen-wever-toets.pdf?token=/uploads/media/63ebb2cff11ec/toelichting-en-voorbeeldvragen-wever-toets.pdf staan verschillende koppen die niet als kop zijn gemarkeerd. Zie bijvoorbeeld op pagina 2 de teksten "Deel 1" en "Deel 2", op pagina 3 de teksten "Algemene vragen 1: demografische kenmerken", "Aantal vragen: 7"en "Opletten", enz.
Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de p-tag door de h-tag om de structuur van het document in de tags te laten overeenkomen met wat te zien is in het document.

In het PDF-document op de https://assets.plaece.nl/kuma-bvlbrabant/uploads/media/63ebb2cff11ec/toelichting-en-voorbeeldvragen-wever-toets.pdf?token=/uploads/media/63ebb2cff11ec/toelichting-en-voorbeeldvragen-wever-toets.pdf staan logo's onderaan de pagina, zie pagina 1. Deze logo's zijn niet getagd. De informatie in deze afbeeldingen is ontoegankelijk voor blinde bezoekers en gebruikers van schermlezers. Informatieve afbeeldingen moeten via een figuur-tag worden geplaatst en worden voorzien van een beschrijving (alt-tekst).

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de footer van de website staat een formulier met invoervelden waarmee persoonlijke gegevens worden verzameld. Het attribuut 'autocomplete' ontbreekt. Het autocomplete-attribuut ontbreekt ook voor de velden in het formulier dat aanwezig is op de pagina https://www.bvlbrabant.nl/contact. Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Onvoldoende

Bevindingen: In de footer van de website staat een knop met de tekst "aanmelden". Deze knop heeft een aangepaste toetsenbordfocus. De toetsenbordfocus is te zien als een verandering van de achtergrondkleur van de knop. Dit gebruik van kleur als de enige manier om informatie over de locatie van de toetsenbordfocus te verschaffen, faalt in dit succescriterium.
Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien waar op de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn. Hiervoor kan het beste een extra visuele aanduiding toegevoegd worden.

Op de homepagina https://www.bvlbrabant.nl/ staat een kaart onder de rubriek "in het nieuws". Deze kaart bevat knoppen met een afbeelding van een verkeerskegel. Deze knoppen verschijnen wanneer de bezoeker inzoomt op de kaart. Wanneer een bezoeker deze knoppen activeert, wordt een tooltip met aanvullende informatie weergegeven. In deze inhoud staat een afbeelding van een ster die informatie overbrengt. Er zijn tooltips met een grijze ster of bruine ster. In de tooltip met de tekst "De Linde Nispen" is de ster bijvoorbeeld grijs. In een andere tooltip is de ster bruin. Dit gebruik van kleur als enige informatiebron voldoet niet aan dit succescriterium.

In het PDF-document op https://assets.plaece.nl/kuma-bvlbrabant/uploads/media/642d5fed0a74f/dap-tijdlijn.pdf staat een tijdlijndiagram. Kleur wordt gebruikt om informatie te geven. Zie de oranje en groen omcirkelde markers op de tijdlijn. Zorg dat de informatie behalve door kleur ook op andere wijze wordt overgebracht.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website wordt een combinatie van witte en blauwe kleuren (HEX #1098D7) gebruikt. Het kleurcontrast is te laag: 3,2:1. Hieronder staan enkele voorbeelden, maar deze lijst is niet volledig. Op alle pagina's, zoals de homepagina https://www.bvlbrabant.nl/, heeft de skiplink blauwe tekst op een witte achtergrond. Bovenaan de pagina staan de witte hyperlinks in het hoofdmenu op een blauwe achtergrond. Op de homepagina https://www.bvlbrabant.nl/ zijn de hyperlinks in de carrousel wit op een blauwe achtergrond, bijvoorbeeld "Bezoek de NUL-site". In de footer, bijvoorbeeld op de homepagina, staat een tekst die begint met "Samen met VVN en ruim 550 ...". Dit is witte tekst op een blauwe achtergrond. Omdat deze teksten kleiner zijn dan 19px, moet het contrast minimaal 4,5:1 zijn. Bekijk ook andere pagina's om te controleren of dit probleem zich daar eveneens voordoet.

Op alle pagina's van de website wordt de combinatie van witte en groene kleuren (HEX #A5CD3B) gebruikt. Het kleurcontrast is te laag: 1,8:1. Hieronder staan enkele voorbeelden, maar deze lijst is niet volledig. In de header staat een navigatiemenu met submenu's. De links in deze submenu's hebben witte tekst op een groene achtergrond. Op de homepage https://www.bvlbrabant.nl/ hebben de volgende links witte tekst op een groene achtergrond: "al het BVL-nieuws" en "naar de NUL-site". Op de pagina https://www.bvlbrabant.nl/over-bvl/bvl-promotie, onder het kopje "BVL-kleurplaten", staan witte links op een groene achtergrond. Omdat deze teksten kleiner zijn dan 19px, moet het contrast minimaal 4,5:1 zijn. Op de homepage https://www.bvlbrabant.nl/ staat een witte kop "In het spotlicht" op een groene achtergrond. Omdat deze tekst groter is dan 24px, moet het contrast minimaal 3,0:1 zijn.

In de header, bijvoorbeeld op de homepage https://www.bvlbrabant.nl/ , staat een link met witte tekst "mijn BVL" op de oranje (HEX #EC6708) achtergrond. Het kleurcontrast is 3,2:1. Dit moet minstens 4,5:1 zijn.

In de footer staan links onder het kopje "links". Als deze links toetsenbordfocus krijgen, verandert de tekst van de link van wit naar blauw (HEX #1098D7). Het kleurcontrast van de blauwe tekst van de links tegen de blauwe achtergrond (HEX #1098D7) is te laag: 1,0:1. Dit is niet voldoende. Zorg dat de kleur van de link bij toetsenbordfocus minimaal een contrast van 4,5:1 met de achtergrond heeft.

In het PDF-document https://assets.plaece.nl/kuma-bvlbrabant/uploads/media/642d5fed0a74f/dap-tijdlijn.pdf staat een oranje (HEX #F36F23) tekst op een witte achtergrond: "vanuit het BVL(syteem)". De kleurcontrastverhouding is te laag: 3,0:1.
De groene (HEX #99CC51) tekst "op school" op de lichtgroene (HEX #EEF7E5) achtergrond heeft het contrast 1,7:1. De witte tekst van de maanden op de blauwe (HEX #159BD8) achtergrond heeft het contrast van 3,1:1. Het contrast moet minstens 4,5:1 zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Als de pagina https://www.bvlbrabant.nl/over-bvl/bvl-info wordt bekeken met een schermresolutie van 320px, wordt de volgende tekst afgekapt: “met het Label aan de muur laat de school zien dat ze werken aan verkeersveiligheid, …”. Zorg dat alle tekst leesbaar is op kleine schermen.

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's van de website wordt zelfgemaakte focus toegepast. In bepaalde gevallen contrasteert deze groene kleur (HEX #668514) echter onvoldoende met de achtergrond. De onderstaande voorbeelden illustreren dit probleem, maar zijn niet volledig. Wanneer de website wordt bekeken op kleine schermen, verschijnt in de header een knop met drie horizontale lijnen die een navigatiemenu activeert. Als deze knop de toetsenbordfocus krijgt, is deze zichtbaar met een groene stippellijn. De contrastverhouding tussen de rand voor de toetsenbordfocus en de blauwe achtergrond (HEX #1098D7) is 1,3:1, terwijl dit minstens 3,0:1 zou moeten zijn. Dit maakt het moeilijk of onmogelijk voor slechtzienden en kleurenblinden om het onderscheid waar te nemen. Gebruik een kleurencombinatie met voldoende contrast. Hetzelfde probleem doet zich ook voor bij de knop met het "X"-pictogram wanneer het navigatiemenu wordt geopend. In de footer, bijvoorbeeld op de homepagina https://www.bvlbrabant.nl/, staan links onder het kopje "Links". Deze links hebben een groene stippellijn op een blauwe achtergrond. Op de homepagina, onder de rubriek "In het nieuws", staat een kaart. Op de kaart staan knoppen met nummers. Wanneer deze knoppen de toetsenbordfocus krijgen, wordt de groene stippellijn weergegeven. Het kleurcontrast tegen de groene transparante achtergrond is te laag. Zie bijvoorbeeld de knop met het label "13". Het kleurcontrast is 2,9:1, terwijl dit minimaal 3,0:1 moet zijn.
Op de homepagina, onder de sectie "In het nieuws", verschijnen op de kaart knoppen met een afbeelding van een verkeerskegel wanneer een bezoeker inzoomt op de kaart. Deze knoppen hebben een witte kleur (HEX #FFFFFF) op een lichtgroene achtergrond (HEX #DEEDBA). De contrastverhouding is 1,2:1, wat veel te laag is voor een goede leesbaarheid en toegankelijkheid.
In de header staat een link met de tekst "mijn BVL". Wanneer deze link de toetsenbordfocus krijgt, wordt dit aangegeven door een groene stippellijn en een verandering van de achtergrondkleur naar donkerblauw (HEX #007BAD). De gestippelde rand heeft onvoldoende contrast tegen de blauwe achtergrond, zoals hierboven beschreven. Het contrast van de donkerblauwe kleur tegen de blauwe achtergrond is 1,5:1, terwijl dit minimaal 3,0:1 moet zijn.

Op de homepagina https://www.bvlbrabant.nl/ bevat de carrousel knoppen met pijlpictogrammen waarmee gebruikers tussen de dia's kunnen schakelen. De pijlen hebben een witte kleur (HEX #FFFFFF) en de achtergrond kan variëren, omdat deze knoppen als een overlay boven de afbeeldingen van de dia's worden geplaatst. Bijvoorbeeld, op de dia met de kop "BVL-nieuwsbrief" staat de pijl naar rechts op een lichtgrijze achtergrond (HEX #DDDDDD), waarbij het kleurcontrast 1,4:1 is. De pijl naar links staat op een donkergrijze achtergrond (HEX #B2B2B2) met een contrast van 2,1:1. Dit contrast moet minimaal 3,0:1 zijn. Dit probleem kan ook op andere dia's voorkomen. Hetzelfde probleem doet zich voor op de pagina https://www.bvlbrabant.nl/over-bvl/bvl-promotie wanneer deze wordt bekeken op kleine schermen bij een schermresolutie van 320px. Onder het kopje "Logo's met SEEF" staat een carrousel met afbeeldingen. Deze carrousel bevat knoppen met pijlpictogrammen die een witte kleur hebben.

Op pagina https://www.bvlbrabant.nl/over-bvl/bvl-promotie verschijnt bij kleine schermen onder het kopje "Logo's met SEEF" een carrousel met afbeeldingen. Deze carrousel bevat navigatiepunten bij de knoppen van de afbeeldingen. Deze stippen hebben een witte kleur en het kleurcontrast tegen de achtergrond is te laag. Bijvoorbeeld, op de derde afbeelding met een lichtbruine achtergrond (HEX #D2AF70) is het contrast 2,1:1. Dit moet minimaal 3,0:1 zijn.

In het PDF-document https://assets.plaece.nl/kuma-bvlbrabant/uploads/media/642d5fed0a74f/dap-tijdlijn.pdf staat een groene stippellijn (HEX #99CC50) op een witte achtergrond. Het kleurcontrast is 1,9:1. Dit moet minstens 3,0:1 zijn. Er zijn ook tijdlijnmarkeringen in de vorm van een cirkel en een zeshoek. Deze markeringen bevatten groene cirkels en vierkanten. De groene (HEX #99CC50) kleur op de witte achtergrond heeft een contrast van 1,9:1. Dit moet minstens 3,0:1 zijn.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de homepage https://www.bvlbrabant.nl/ onder de rubriek "in het nieuws" staat een kaart. Op de kaart staan knoppen met nummers. Momenteel kunnen deze knoppen niet worden bediend met de spatiebalk of de Enter-toets op het toetsenbord.
Zorg dat de knoppen zowel met de spatiebalk als de Enter-toets bediend kan worden.

Op dezelfde kaart staan ook knoppen met een afbeelding van een verkeerskegel. Deze knoppen verschijnen wanneer de bezoeker inzoomt op de kaart. Wanneer een bezoeker deze knoppen activeert, wordt een tooltip met aanvullende informatie weergegeven, bijvoorbeeld met de tekst "Daltonschool de Vindplaats Schijf" en een afbeelding van een grijze ster. Deze inhoud is echter niet toegankelijk voor gebruikers met alleen een toetsenbord.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bvlbrabant.nl/over-bvl/bvl-info staat een video. Binnen deze videospeler is het mogelijk om sneltoetsen met één teken te gebruiken.
De Youtube-video’s gebruiken sneltoetsen, zoals de ‘k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig. Dit kan opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De skiplink op de website werkt niet goed. De focus wordt niet verplaatst naar de unieke inhoud en blijft bovenaan de pagina staan. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij toetsenbordfocus krijgt. Zorg dat de skiplink werkt zoals hierboven is beschreven, en dat de focus naar de juiste content wordt verplaatst. Zie https://www.bvlbrabant.nl/.

Uitkomst: Onvoldoende

Bevindingen: Het PDF-document op de https://assets.plaece.nl/kuma-bvlbrabant/uploads/media/63ebb2cff11ec/toelichting-en-voorbeeldvragen-wever-toets.pdf?token=/uploads/media/63ebb2cff11ec/toelichting-en-voorbeeldvragen-wever-toets.pdf heeft geen documenttitel ingesteld in de bestandseigenschappen. Een PDF-document moet een titel bevatten die duidelijk het onderwerp of het doel van het document beschrijft. Daarnaast dient deze titel in de titelbalk te worden getoond in plaats van de bestandsnaam. Dit is belangrijk voor bezoekers met verschillende beperkingen omdat het hen in staat stelt snel en gemakkelijk vast te stellen of de informatie in het document relevant is voor hen. Dit kan worden opgelost door dit aan te passen in de bestandseigenschappen van het bronbestand of van het PDF-document.

Uitkomst: Onvoldoende

Bevindingen: Wanneer de website https://www.bvlbrabant.nl/ op een klein scherm wordt bekeken, verschijnt in de header een knop met drie horizontale lijnen waarmee een navigatiemenu wordt geopend. Op dit moment krijgt dit menu echter niet direct de toetsenbordfocus na het openen; in plaats daarvan verschuift de focus naar de knop met het vergrootglaspictogram. Bij dit soort menu’s moet de toetsenbordfocus correct worden ingesteld. De focus moet direct in het menu terechtkomen en binnen het menu blijven zolang het actief is. Momenteel kunnen bezoekers met het toetsenbord uit het menu navigeren, waarna de focus verspringt naar andere elementen in de header. Dit is niet de gewenste werking. Om dit op te lossen, moet de focus binnen het menu blijven totdat de bezoeker op de sluitknop klikt of de ESC-toets indrukt. Een alternatief is om het menu automatisch te sluiten zodra de toetsenbordfocus het menu verlaat.

Op de homepagina van https://www.bvlbrabant.nl/ komt de toetsenbordfocus na de pijltjesknoppen in de carrousel terecht op een onzichtbaar interactief element. De toetsenbordfocus mag niet op onzichtbare interactieve elementen terechtkomen, zoals verborgen links, knoppen of formuliervelden. Als dat wel gebeurt, kan een bezoeker deze onbedoeld activeren. Alleen elementen die zichtbaar zijn, mogen toetsenbordfocus krijgen.
Daarnaast is er een vergelijkbaar probleem onder de sectie "In het nieuws", waar een onzichtbare link toetsenbordfocus krijgt na de link "Folder" onderaan de kaart.

Op pagina https://www.bvlbrabant.nl/over-bvl/bvl-promotie bevat de afbeeldingencarrousel onder het kopje "Logo’s met SEEF" onzichtbare knoppen die toetsenbordfocus krijgen wanneer de pagina op kleine schermen wordt bekeken.

Uitkomst: Onvoldoende

Bevindingen: In de header van https://www.bvlbrabant.nl/ staan links: "adressen" en "contact". De toegankelijke namen van deze links bevatten het symbool: "|".
De tekst van links mag geen symbolen bevatten zoals streepjes, underscores en andere. Deze karakters maken het doel van de link onduidelijk. Verwijder de bijzondere karakters en herschrijf de tekst.
Hetzelfde probleem komt ook voor in de links in de footer, bijvoorbeeld, de toegankelijke naam van de link "privacyverklaring" is "| privacyverklaring".

Op de homepage https://www.bvlbrabant.nl/ staan onder de kopjes "in het spotlicht" en "in het nieuws" links met de tekst "lees meer". Dergelijke teksten geven niet duidelijk aan waar de links naartoe leiden. Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees meer’), helpen niet bij het begrijpen welke bestemming deze links hebben. Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘lees meer’ aan te vullen met de paginatitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden.
Hetzelfde probleem komt ook voor op pagina https://www.bvlbrabant.nl/nieuws/bvl-nieuws.

Op de homepage https://www.bvlbrabant.nl/ staan onder het kopje "in het spotlicht" links met de tekst "naar de special" "@bvlbrabant". Deze linkteksten beschrijven niet duidelijk waar de links naartoe leiden.

Op de homepage https://www.bvlbrabant.nl/ staat onder de rubriek "in het nieuws" een kaart met onderaan de link "Folder". Na deze link staat de onzichtbare link in de HTML-code. Deze link heeft geen toegankelijke naam. De bestemming van deze link is dus niet duidelijk.

Op pagina https://www.bvlbrabant.nl/over-bvl/bvl-promotie onder het kopje "BVL-materialen" staat een link met de tekst "download". De toegankelijke naam van de link is "download". Deze tekst beschrijft niet goed wat hiermee kan worden gedownload.

Op pagina https://www.bvlbrabant.nl/schoolinfo/het-dap staat een afbeelding die als link fungeert. Deze afbeelding is de enige inhoud van de link en heeft een leeg alt-attribuut (alt=""), waardoor deze verborgen is voor schermlezers. Hierdoor heeft deze link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit probleem is gerelateerd aan succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam. Dit kan worden opgelost door een alt-tekst aan de afbeelding toe te voegen. Andere oplossingen zijn mogelijk.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van https://www.bvlbrabant.nl/ staat een zoekveld. Het zoekveld bevat een knop met een vergrootglaspictogram. De toegankelijke naam van deze knop bevat tekens die niet leesbaar zijn. De naam van een knop mag geen symbolen bevatten zoals streepjes, underscores of andere. Deze tekens maken de functie van de knop onduidelijk.
Verwijder de speciale tekens en herschrijf de tekst.

Op de homepage https://www.bvlbrabant.nl/ onder de rubriek "in het nieuws" staat een kaart. Op de kaart staan knoppen met nummers. De toegankelijke namen van deze knoppen bevatten alleen getallen. Zulke toegankelijke namen zijn niet betekenisvol en beschrijven niet duidelijk wat de knoppen doen. Zie ook de knoppen met een afbeelding van een verkeerskegel. Deze knoppen verschijnen wanneer de bezoeker inzoomt op de kaart. De toegankelijke naam van alle knoppen is "Marker". Deze toegankelijke naam beschrijft niet de functie van de knop. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Voeg tekst toe die deze knoppen goed beschrijven.

Uitkomst: Onvoldoende

Bevindingen: In de header van https://www.bvlbrabant.nl/ is de toetsenbordfocus niet zichtbaar op de knop met het vergrootglaspictogram. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien waar op de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen. Hetzelfde probleem komt ook voor op pagina https://www.bvlbrabant.nl/schoolinfo/het-dap. De toetsenbordfocus is niet zichtbaar op de link met de afbeelding.

Uitkomst: Onvoldoende

Bevindingen: Op de homepage https://www.bvlbrabant.nl/ verschijnen bij het bekijken van de website op kleine schermen (bij een schermresolutie van 320px) carrousels. Een bezoeker kan de slides aanklikken en horizontaal verslepen met een muis. Deze carrousels bevinden zich onder de koppen "Leren op school, veilig doen op straat", "In het spotlicht" en "In het nieuws". Dit succescriterium vereist dat als bezoekers speciale handelingen moeten uitvoeren, zoals vegen of slepen met een muis om door een carrousel te navigeren en extra content te bekijken, er ook een eenvoudigere optie beschikbaar moet zijn. Bijvoorbeeld een knop of pijltjestoetsen, zodat iedereen de carrousel kan gebruiken. Sommige bezoekers kunnen geen precieze gebaren uitvoeren of maken gebruik van gespecialiseerde of aangepaste invoerapparaten, zoals een hoofdwijzer, een oogbesturingssysteem of een spraakgestuurde muisemulator. Sommige aanwijsapparaten missen de mogelijkheid of nauwkeurigheid om multi-touch- of padgebaseerde gebaren uit te voeren. Als er aanwijzingsacties worden ondersteund, moeten bezoekers deze ook met een enkele tik of klik kunnen uitvoeren. Hetzelfde probleem is te zien op de pagina https://www.bvlbrabant.nl/schoolinfo/het-dap.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van https://www.bvlbrabant.nl/ staat een logo dat als link fungeert. De zichtbare tekst op de link is "Brabants Verkeersveiligheids Label BVL: verkeer op basisscholen Provincie Noord-Brabant". De toegankelijke naam is "Ga naar de homepage van BVL Brabant".
De zichtbare tekst van een interactief element mag niet te veel afwijken van de toegankelijke naam van het element. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. Zorg dus dat de zichtbare tekst deel uitmaakt van de toegankelijke naam, bij voorkeur vooraan geplaatst.

In de footer van https://www.bvlbrabant.nl/ staat een logo met de tekst "Provincie Noord-Brabant". Dit logo is tegelijk ook een link. De zichtbare tekst is “Provincie Noord-Brabant”, en de toegankelijke naam is “brabant”. De toegankelijke naam van de link is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is in het logo. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Zie ook het logo met zichtbare tekst “Brabant gaat voor nul verkeers slachtoffers”. Het tekstalternatief is “brabantgaatvoornulverkeersdoden”.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de meta data van het PDF-document https://assets.plaece.nl/kuma-bvlbrabant/uploads/media/642d5fed0a74f/dap-tijdlijn.pdf is de taal niet ingesteld. De taal hoort ingesteld te worden, zodat de informatie uit het bestand met de juiste uitspraakregels kan worden voorgelezen door hulpsoftware. Dit kan worden ingesteld via de bestandseigenschappen.

In het PDF-document https://assets.plaece.nl/kuma-bvlbrabant/uploads/media/63ebb2cff11ec/toelichting-en-voorbeeldvragen-wever-toets.pdf?token=/uploads/media/63ebb2cff11ec/toelichting-en-voorbeeldvragen-wever-toets.pdf is de taal ingesteld op “EN”. Dit document bevat Nederlandstalige content.

Uitkomst: Onvoldoende

Bevindingen: Op de homepagina https://www.bvlbrabant.nl/ onder de sectie "in het nieuws" staat een kaart. Onderaan de kaart staat een link met de tekst "Leaflet" (folder). Deze link heeft een beschrijving "A JavaScript library for interactive maps" (Een JavaScript-bibliotheek voor interactieve kaarten) die aan de link is toegevoegd via het title-attribuut. Deze beschrijving is in het Engels. Er is geen taalcode toegepast op deze inhoud. Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. Staan er op de pagina teksten in een andere taal? Dan moet de schermlezer op die taal overschakelen. Geef hiervoor deze anderstalige inhoud een lokaal lang-attribuut met de juiste waarde. Voeg lang="en" toe aan de container (een overkoepelend HTML-element) waarin de content in een andere taal staat.

De titel van de pagina https://www.bvlbrabant.nl/404 is in het Engels: "Not Found - BVL Brabant". De taal van de pagina is Nederlands (lang="nl"). Vertaal de titel, zodat deze overeen komt met de taal van de pagina.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de footer, bijvoorbeeld op de homepage https://www.bvlbrabant.nl/ , onder het kopje "schrijf je in voor de nieuwsbrief", staat een formulier. De invoervelden met placeholder-teksten hebben geen permanente labels. Invoervelden moeten een label hebben dat altijd zichtbaar is. Dat kan een tekst zijn of een afbeelding (icoon). Een placeholder-tekst kan niet als label dienen, omdat deze tekst verdwijnt als de bezoeker begint te typen. Een invoerveld zonder zichtbaar label kan mensen in de war brengen, omdat ze niet weten wat ze moeten invullen. Voeg een label toe in de vorm van een tekst of een icoon.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bvlbrabant.nl/contact staat een formulier. De foutmelding in het invoerveld met het label "e-mailadres" geeft geen suggesties over hoe de fouten kunnen worden hersteld wanneer een bezoeker een e-mailadres verkeerd heeft ingevuld. De foutmelding is bijvoorbeeld "niet alle velden zijn (correct) ingevuld.".
Vertel de bezoeker wat ze moeten doen om de fout op te lossen.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De eerste keer dat een bezoeker de website https://www.bvlbrabant.nl/ opent verschijnt er een cookiebanner. Deze cookiebanner is een dialoogvenster. Dit dialoogvenster heeft geen toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven welke inhoud het dialoogvenster heeft. Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud.

In de header van https://www.bvlbrabant.nl/ staat een hoofdmenu. Wanneer een bezoeker met schermlezer (Voice Over) door het menu navigeert en de focus op de hyperlinks in het menu landt, klappen de submenu's zoals verwacht uit. Hoewel de status van de submenu's correct wordt geïdentificeerd met behulp van het attribuut aria-expanded, kondigt de schermlezer de submenu's ten onrechte aan als "ingeklapt", zelfs als ze zijn uitgeklapt. Dit probleem komt ook voor bij de volgende hyperlinks: "schoolinfo", "subsidie" en "nieuws".

In de header van https://www.bvlbrabant.nl/ staat een zoekveld. Het zoekveld bevat een knop met een vergrootglaspictogram. De toegankelijke naam van deze knop bevat tekens die niet leesbaar zijn. Daarom heeft deze knop geen toegankelijke naam. De tekst van knoppen mag geen symbolen bevatten zoals streepjes, underscores of andere. Verwijder de speciale tekens en herschrijf de tekst.

Als de website https://www.bvlbrabant.nl/ wordt bekeken op kleine schermen, verschijnt een knop met drie horizontale lijnen waarmee het mobiele menu wordt geactiveerd. Deze knop heeft echter aria-haspopup="dialog", waardoor hulpsoftware ten onrechte de melding krijgt dat er een dialoogvenster wordt geopend. Het bijbehorende menu is gemarkeerd met een nav-element, waardoor een mismatch ontstaat die gebruikers van schermlezers in verwarring kan brengen. De aria-haspopup-eigenschap geeft aan dat een element een pop-up kan activeren en welk type pop-up wordt weergegeven. Het bijbehorende element dat verschijnt, moet op zijn beurt een passende rol hebben. Een mogelijke oplossing is om aria-haspopup="dialog" te vervangen door aria-haspopup="menu" om de functie van de knop correct aan te geven. Andere oplossingen zijn ook mogelijk. Raadpleeg de pagina voor meer informatie: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup.

Op de homepagina https://www.bvlbrabant.nl/ staat een carrousel. Deze carrousel is gemarkeerd met role="region" en aria-roledescription="carrousel". Er is echter geen toegankelijke naam gegeven voor deze regio. Elk element met deze rol moet een naam hebben die het doel van de inhoud in het element beschrijft. Raadpleeg de pagina voor meer informatie: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/.
Hetzelfde probleem komt ook voor op pagina https://www.bvlbrabant.nl/over-bvl/bvl-promotie wanneer de website wordt bekeken op kleine schermen. Zie een carrousel onder het kopje "logo's met SEEF".

Op de homepagina https://www.bvlbrabant.nl/ staat een kaart onder de kop "in het nieuws". Deze kaart bevat knoppen met een afbeelding van een verkeerskegel. Deze knoppen verschijnen wanneer de bezoeker inzoomt op de kaart. Wanneer een bezoeker deze knoppen activeert, wordt een tooltip met aanvullende informatie weergegeven, bijvoorbeeld met een tekst "Daltonschool de Vindplaats Schijf" en een afbeelding van een grijze ster. Deze tooltip heeft echter geen juiste rol. Bovendien wordt de status van de geopende inhoud niet doorgegeven aan gebruikers van schermlezers.
Deze status (open of gesloten) kan worden aangegeven met het aria-expanded attribuut dat is toegevoegd aan het triggering element en dat moet worden ingesteld op true of false.

Op de homepagina https://www.bvlbrabant.nl/ onder de sectie "in het nieuws" staat een kaart met onderaan de link "Folder". Na deze link staat de onzichtbare link in de HTML-code. Deze link heeft geen toegankelijke naam.

Op pagina https://www.bvlbrabant.nl/over-bvl/bvl-info staat een iframe met een youtube-video. Het title-attribuut ontbreekt.
Iframes moeten een goede beschrijving hebben. Die komt meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Op pagina https://www.bvlbrabant.nl/schoolinfo/het-dap staat een afbeelding van een schema die als link fungeert. Deze link heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link. Geef deze link een toegankelijke naam die het doel van de link beschrijft.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://www.bvlbrabant.nl/contact staat een formulier. Wanneer het formulier wordt verzonden met onjuiste gegevens of lege velden, verschijnt de volgende foutmelding: "Let op: niet alle velden zijn correct ingevuld. Controleer alle velden en probeer het opnieuw." Om deze foutmelding door schermlezers te laten aankondigen, is geprobeerd role="alert" toe te voegen. De implementatie hiervan werkt echter niet zoals verwacht. Wanneer een bezoeker de knop "Verstuur" activeert, wordt de pagina herladen en wordt de foutmelding niet aangekondigd. De bezoeker is zich er daardoor niet van bewust dat de pagina opnieuw is geladen en dat het formulier niet is verzonden. Het belangrijkste om te weten over de alert-rol is dat deze bedoeld is voor dynamisch weergegeven inhoud, niet voor content die bij het laden van de pagina verschijnt. De rol mag niet worden gebruikt voor statische HTML waar de gebruiker nog niet mee heeft geïnteracteerd. Als een pagina bijvoorbeeld meerdere zichtbare waarschuwingen bevat die bij het laden al aanwezig zijn, dan moet role="alert" niet worden toegepast, omdat deze berichten niet dynamisch worden getriggerd. Om deze live-regio correct te laten werken, moet het element met role="alert" eerst aanwezig zijn in de HTML-markup van de pagina. Dit zorgt ervoor dat de browser en schermlezer het element in de gaten houden voor eventuele wijzigingen. Pas als de inhoud van het element verandert, wordt deze aangekondigd. Een veelgemaakte fout is om een element met role="alert" dynamisch aan de pagina toe te voegen terwijl het al gevuld is met de waarschuwingsboodschap. Dit leidt meestal niet tot een aankondiging, omdat er geen inhoudswijziging plaatsvindt. Meer informatie is te vinden op:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
Een soortgelijk probleem doet zich voor op de pagina https://www.bvlbrabant.nl/zoeken?query=werk. Wanneer een bezoeker een zoekopdracht uitvoert, wordt in de koptekst weergegeven: "Er zijn 100 resultaten gevonden voor 'werk'." Aan dit heading-element zijn role="alert" en aria-live="polite" toegevoegd. Echter, als de pagina herlaadt, wordt deze melding niet aangekondigd, omdat de manier waarop de live-regio is geïmplementeerd niet correct is.