Issues:
Audit digitale toegankelijkheid website Brabant vervoert ons

(Alleen de bevindingen)

Scope van de evaluatie

Uitgebreide toetsresultaten

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Bevinding 1: Op de homepagina staat naast de invoervelden van het 'Plan je reis' formulier kruisjes in een div met de role="img" en alt="veld leegmaken". Het alt attribuut mag alleen gebruikt worden binnen de tag <img>. Gebruik hier aria-label of aria-labelledby om een alternatieve tekst toe te voegen.
Hetzelfde geldt voor het icoon 'velden wisselen' in hetzelfde formulier.

Bevinding 2: Op de homepagina staan meerdere afbeeldingen met alternatieve teksten als 'Extra bussen Koningsdag' en 'Tarievencheck'. Deze teksten beschrijven de afbeelding niet. Pas de alternatieve teksten aan of maak de afbeelding decoratief door een leeg alt-attribuut toe te voegen binnen het img-element.
Hetzelfde komt op meer plaatsen in de website voor, bijvoorbeeld bij de foto op pagina https://bravo.info/nieuws/cao-onderhandelingsresultaat-openbaar-vervoer.

Bevinding 3: Op pagina https://bravo.info/klantenservice/contact-met-vervoerders staat onder 'Vragen over jouw reis met de regio- en deeltaxi' een afbeelding met de alt-tekst 'Kaart gebieden vijf regiotaxi's'. Dit beschrijft de afbeelding niet voldoende. De tekst erboven biedt wel dezelfde informatie als op de kaart, maar blinde of slechtziende bezoekers weten nu niet wat op de afbeelding te zien is en of zij informatie missen. Zorg voor een beschrijvendere alt-tekst.

Bevinding 4: Op pagina https://www.bravo.info/klantenservice/direct-regelen/bravo-tarievencheck is bij de keuze 'Jonger dan 12 jaar' door middel van een sterretje aangegeven dat er onder dat er meer informatie volgt. Hulpsoftware leest dit niet altijd voor. Zorg daarom voor een tekstalternatief.
Dit komt ook voor op pagina https://bravo.info/klantenservice/tips/de-bus-goedkoper-dan-je-denkt binnen de tabellen.

Bevinding 5: Op pagina https://bravo.info/nieuws/cao-onderhandelingsresultaat-openbaar-vervoer staat een afbeelding met de alt-tekst "Laatste nieuws stakingen en uitval openbaar vervoer". Dit beschrijft de afbeelding niet. Omdat de afbeelding puur decoratief lijkt, kan deze het beste worden verborgen voor hulpsoftware met een leeg alt-attribuut (alt="").
Dit komt ook voor op pagina https://bravo.info/reizen/diensten/bravofiets-de-deelfiets-bergen-op-zoom .

Bevinding 6: Advies: Op pagina https://bravo.info/english/tickets staat onderaan de pagina een afbeelding met de alt-tekst "Illustratie bus". Omdat de afbeelding puur decoratief lijkt, kan deze het beste worden verborgen voor hulpsoftware met een leeg alt-attribuut (alt="").

1.2 Op tijd gebaseerde media

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Bevinding 7: Op pagina https://www.bravo.info/over-bravo/vernieuwing-ov staat een video onder 'Gedeelde mobiliteit' waar het logo aan het begin en eind in beeld komt. Slechtziende of blinde bezoekers is het nu niet duidelijk dat dit een video van de Provincie Noord-Brabant is. Voeg deze informatie toe aan een transcript, of een audiodescriptie om ook te voldoen aan succescriterium 1.2.5. Of laat alle informatie uitspreken door de voiceover waardoor de audiodescriptie overbodig wordt.
Dit geldt overigens ook voor de video 'Digizine gedeelde mobiliteit' maar dit lijkt precies dezelfde video te zijn.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Bevinding 8: Op pagina https://www.bravo.info/over-bravo/vernieuwing-ov staat een video onder 'Gedeelde mobiliteit' waar het logo aan het begin en eind in beeld komt. Slechtziende of blinde bezoekers is het nu niet duidelijk dat dit een video van de Provincie Noord-Brabant is. Voeg deze informatie toe aan een audiodescriptie. Of laat alle informatie uitspreken door de voiceover waardoor de audiodescriptie overbodig wordt.
Dit geldt overigens ook voor de video 'Digizine gedeelde mobiliteit' maar dit lijkt precies dezelfde video te zijn.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 9: Op de homepagina staan de koppen 'Regel het zelf', 'Snel naar' en 'Kies je vervoerbewijs'. Deze zijn niet met een kopelement gecodeerd. Gebruik een kopelement, bijvoorbeeld H2.

Bevinding 10: Op de homepagina staan onder de koppen 'Regel het zelf', 'Snel naar' en 'Kies je vervoerbewijs' lijstitems. Deze zijn niet als lijst gecodeerd. Gebruik een <ul> lijst om dit op te lossen.

Bevinding 11: Op de homepagina staan onder 'Uitgelicht' afbeeldingen met daarop labels, zoals '2=1' en 'Feestdag'. Visueel is duidelijk dat het om een label gaat, maar in de code niet. Voeg bijvoorbeeld vóór de tekst een visueel verborgen span-tekst toe, zoals 'Label:'.

Bevinding 12: Als een menu-item in het hoofdmenu actief is, dan is dat te zien aan de blauwe kleur van het item. Bijvoorbeeld op pagina https://bravo.info/klantenservice/contact-met-vervoerders is 'Klantenservice' blauw. Bezoekers die afhankelijk zijn van voorleessoftware missen deze informatie. Maak bijvoorbeeld gebruik van aria-current om dit op te lossen.
Dit komt ook voor in de menu's aan de zijkant van de pagina, bijvoorbeeld op pagina https://www.bravo.info/vervoerbewijzen/betalen-het-ov/ovpay-en-uitchecken-het-ov-met-je-betaalpas .

Bevinding 13: Onderaan de pagina https://bravo.info/nieuws staat een paginering. Dit is een ongeordende lijst, maar één lijstelement heeft de rol presentatie gekregen. Dit is daardoor geen geldig lijst element meer en mag niet op deze plaats in de code staan. Dit kan problemen geven met hulpsoftware. Zorg voor een goede opmaak van lijsten.

Bevinding 14: Op pagina https://bravo.info/english/tickets staat onder 'Subscription tickets and tickets on the bus' een tabel. De koppen 'Tickets on the bus and in shops', 'Price' en 'Details' zijn opgemaakt met kop niveau 3 in plaats van met het th-element. Daardoor is de relatie tussen de koppen en datacellen voor screenreadergebruikers niet duidelijk. Onder deze tabel staat een tweede tabel die visueel een voortzetting is van de eerste tabel, maar hier ontbreken de koppen helemaal. Zorg ervoor dat tabellen goed zijn opgemaakt en gebruik voor tabelkoppen altijd het th-element.

Bevinding 15: Op pagina https://www.bravo.info/reizen/diensten zijn de koppen 'Bussen' en 'Stads- en streekbussen' opgemaakt met het strong element. Het strong-element is bedoeld om nadruk te geven aan een of enkele woorden, niet voor de opmaak van koppen. Gebruik in plaats daarvan een kopelement (zoals H2) en gebruik CSS om de tekst anders vorm te geven.
Dit komt op meerdere pagina's voor, zoals op pagina https://bravo.info/klantenservice/contact-met-vervoerders op de koppen 'Voorwerpen verloren in de Bus?' en 'Reisinformatie bij calamiteiten', en voor de koppen onder 'Wat kost een ritje met de bus?' op pagina https://bravo.info/klantenservice/tips/de-bus-goedkoper-dan-je-denkt .

Bevinding 16: Op pagina https://bravo.info/nieuws/cao-onderhandelingsresultaat-openbaar-vervoer is een stuk tekst 'Zodra het definitieve ...' opgemaakt met het em-element. Het em-element is bedoeld om nadruk te geven aan een of enkele woorden. Gebruik CSS om de tekst anders vorm te geven.
Dit geldt ook voor schuingedrukte teksten als onderdeel van een naam, zoals 'Bravofiets' op pagina https://bravo.info/reizen/diensten/bravofiets-de-deelfiets-bergen-op-zoom .

Bevinding 17: Op pagina https://www.bravo.info/reizen/diensten staan verschillende blokken met lijstitems. Sommige hebben een visuele kop, andere hebben een afbeelding. Het kan voor blinde bezoekers onduidelijk zijn dat een afbeelding een nieuw blok vormt en niet hoort bij de voorgaande kop. Zorg dat de blokken met een afbeelding ook een kop hebben (visueel of onderwater) zodat de hiërarchische structuur van de pagina duidelijk is.

Bevinding 18: Op pagina https://bravo.info/english/tickets staat een kop van niveau 2 'How does it work?' in een uitklapbare tekst onder de kop van niveau 3 'Check in with your contactless debit or credit card'. Dit zou een kop van niveau 4 moeten zijn. Bezoekers die gebruikmaken van voorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Voor hen lijkt het nu of de kop 'Fares' onderdeel is van 'How does it work?'. Zorg voor een koppenstructuur die overeenkomt met de hiërarchische structuur van de pagina.
Dit geldt ook voor pagina https://www.bravo.info/klantenservice/direct-regelen/bravo-tarievencheck, waar (na het doorlopen van het advies) de kop 'OV-chipkaart of betaalpas' een hoger niveau is (H2) dan de kop erboven ('Beste keus', H3).

Bevinding 19: De PDF "Bravo fiets Bergen op Zoom" is niet gecodeerd (van tags voorzien). Dit betekent dat er de documentstructuur niet is te bepalen. Er kan daardoor bijvoorbeeld niet worden bepaald wat koppen zijn, de alternatieve tekst bij afbeeldingen en wat de leesvolgorde is. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriterium met betrekking tot de PDF code laag zoals semantische koppen en alt teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan. Kaarten vormen een uitzondering, maar de informatie op deze kaart, de Bravofiets-locaties, moet wel op een toegankelijke manier beschikbaar zijn in de code van deze PDF of op een andere plaats in de website.

Bevinding 20: Advies: Op de homepagina ontbreekt een kop van niveau 1. Het is gebruikelijk dat een pagina precies één koptekst bevat. Voeg daarom een h1-kop toe.

Bevinding 21: Advies: Bijvoorbeeld op de pagina https://bravo.info/klantenservice/contact-met-vervoerders is de eerste kop van niveau 2 'Main navigation'. Gebruikelijk is om in de HTML code te beginnen met de kop van niveau 1 met de titel van de pagina. Visueel kan de pagina hetzelfde blijven.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 22: Op de homepagina staan onder 'Uitgelicht' meerdere blokken met een label, een afbeelding, een kop en tekst. Als de blokken achter elkaar worden voorgelezen is het niet duidelijk bij welke kop de banner en afbeelding horen. Zet de koppen vooraan in de HTML-code en zet hierachter de banner en afbeelding. Visueel mag deze indeling wel aangehouden worden.

Bevinding 23: Op pagina https://www.bravo.info/klantenservice/direct-regelen/bravo-tarievencheck is bij de keuze 'Jonger dan 12 jaar' door middel van een sterretje aangegeven dat er onder dat er meer informatie volgt. De voetnoot volgt verderop in de content. Zorg dat de voetnoot in de code direct na het sterretje wordt geplaatst, zodat het voor bezoekers die gebruik maken van hulpsoftware duidelijk is waar de verwijzing bij hoort. Visueel kan het zo blijven staan.
Dit komt ook voor op pagina https://bravo.info/klantenservice/tips/de-bus-goedkoper-dan-je-denkt binnen de tabellen.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Bevinding 24: In de footer van elke pagina staat een invoerveld waar een bezoeker een e-mailadres kan invullen. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".
Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: https://www.w3.org/tr/wcag21/#input-purposes.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Bevinding 25: Als een menu-item in het hoofdmenu actief is, dan is dat te zien aan de blauwe kleur van het item. Bijvoorbeeld op pagina https://bravo.info/klantenservice/contact-met-vervoerders is 'Klantenservice' blauw. Slechtzienden en kleurenblinden kunnen mogelijk niet zien dat dit het actieve menu-item is. Zorg ervoor dat een actief menu-item ook herkenbaar zijn aan minimaal één andere eigenschap, bijvoorbeeld door het te onderstrepen.
Dit komt ook voor in de menu's aan de zijkant van de pagina, bijvoorbeeld op pagina https://www.bravo.info/vervoerbewijzen/betalen-het-ov/ovpay-en-uitchecken-het-ov-met-je-betaalpas .

Bevinding 26: Als in het formulier op pagina https://bravo.info/reizen/reisplanner een veld niet of niet goed is ingevuld is dat te zieWn aan de rode in plaats van zwarte rand rond het invoerveld. Slechtzienden en kleurenblinden kunnen mogelijk deze informatie missen. Zorg er voor dat er minimaal nog één ander manier is om te zien dat een veld niet goed is ingevuld, bijvoorbeeld door er een foutmelding naast te plaatsen. Zie ook succescriterium 3.3.1.

Bevinding 27: Advies: Op pagina https://www.bravo.info/klantenservice/direct-regelen/bravo-tarievencheck is de link 'hier' in de lopende tekst alleen met een kleurverschil aangegeven. Slechtzienden en kleurenblinden kunnen hierdoor mogelijk niet herkennen dat om links gaat. De contrast ratio tussen de rode kleur en de zwarte tekst is groter dan 3:1 dus aan dit criterium is voldaan. Toch is het beter ervoor te zorgen dat hyperlinks in lopende tekst ook herkenbaar zijn aan minimaal één andere eigenschap, bijvoorbeeld door ze te onderstrepen.
Dit komt op meerdere pagina's voor, zoals op pagina https://bravo.info/reizen/diensten/bravofiets-de-deelfiets-bergen-op-zoom bij 'Download hier'.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 28: Op elke pagina verschijnt een skiplink. De rode kleur (HEX #DD0000) op de grijze achtergrond (HEX #E6E6E6) geeft een contrastwaarde van 4,1:1, maar dit moet minimaal 4,5:1 zijn.

Bevinding 29: Op de homepagina staat onder 'Plan je reis' een select-element met de tekst 'vandaag'. Deze blauwe tekst (HEX #007cb7) heeft in combinatie met de grijze achtergrond (HEX #e9e9ed) een contrastwaarde van 3,8:1. Dit moet minimaal 4,5:1 zijn.

Bevinding 30: Op de hele website wordt lichtblauwe tekst gebruikt, bijvoorbeeld op de homepagina 'Lees meer' (HEX #009AD8) op een witte achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 3,2:1 waar dit minimaal 4,5:1 moet zijn. Overigens is de contrastverhouding voor de grotere titels zoals 'Regel het zelf' voldoende omdat daarvoor een minimaal contrast van 3:1 geldt.
Op de homepagina heeft tekst 'Of zoek een halte' dezelfde kleur lichtblauw op lichtgrijs (HEX #F1F6F9) een contrastverhouding van 2,9:1 waar dit minimaal 4,5:1 moet zijn.

Bevinding 31: Op de homepagina staan onder 'Uitgelicht' afbeeldingen met daarop labels, zoals '2=1' en 'Feestdag'. Deze witte teksten hebben een te lage contrastwaarde in combinatie met de gekleurde achtergrond, namelijk 3,2:1 op de blauwe en oranje achtergronden (#009AD8 en #FF5300). Dit moet minimaal 4,5:1 zijn.

Bevinding 32: Op pagina https://bravo.info/nieuws/cao-onderhandelingsresultaat-openbaar-vervoer is de datum van het artikel grijs (HEX #777777). Deze tekst heeft net een te laag contrast van 4,47:1. Dit moet minimaal 4,5:1 zijn.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Bevinding 33: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400%, verdwijnt bijvoorbeeld op pagina https://bravo.info/nieuws/cao-onderhandelingsresultaat-openbaar-vervoer tekst. Het gaat bijvoorbeeld om '6 april'. Zorg ervoor dat teksten in beeld blijven staan zonder een scrollbalk in de leesrichting (horizontaal) te krijgen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 34: Op pagina https://bravo.info/reizen/diensten/bravofiets-de-deelfiets-bergen-op-zoom staat in de routeplanner een zoekveld. De randen van dit zoekveld (#CCCCCC) hebben een contrastwaarde van 1,6:1 met de witte binnenkant. Dit moet minimaal 3,0:1 zijn.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Bevinding 35: Wanneer bij een schermgrootte van 1280x1024px ingezoomd wordt tot 400% en bezoekers de regelhoogte, alinea- en tekstafstand wijzigen naar de waarden zoals beschreven voor dit succescriterium dan verdwijnt bijvoorbeeld op pagina https://bravo.info/nieuws/cao-onderhandelingsresultaat-openbaar-vervoer tekst. Het gaat bijvoorbeeld om 'dat er op 6'. Zorg ervoor dat teksten in beeld blijven staan zonder een scrollbalk in de leesrichting (horizontaal) te krijgen.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Bevinding 36: Als bij een schermresolutie van 1280x1024px ingezoomd wordt tot 200% verschijnt een menuknop in de header. Dit hamburgermenu is niet bedienbaar met behulp van het toetsenbord. Maak zoveel mogelijk gebruik van native HTML elementen, zoals een <button>.

Bevinding 37: Op de homepagina is de link 'Of zoek een halte' niet bedienbaar met het toetsenbord. Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen deze links niet gebruiken. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord.

Bevinding 38: Als op pagina https://bravo.info/reizen/reisplanner een traject en tijd is gekozen verschijnen er aanklikbare reisadviezen en de knoppen 'Toon eerdere reisadviezen' en 'Toon latere reisadviezen'. Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen deze links niet gebruiken. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord. Hetzelfde komt vaker voor op de website, bijvoorbeeld op de homepagina bij de link 'Of zoek een halte'.

Bevinding 39: Op pagina https://bravo.info/english/tickets wordt gebruik gemaakt van uitvouwbare blokken (accordeons) zoals bij 'Personal OV-chipkaart'. Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen deze links niet gebruiken. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord.

Bevinding 40: Op pagina https://www.bravo.info/klantenservice/direct-regelen/bravo-tarievencheck is het hele formulier niet te bedienen met behulp van het toetsenbord.

Bevinding 41: Op pagina https://bravo.info/reizen/diensten/bravofiets-de-deelfiets-bergen-op-zoom is de knop 'Naar routeplanner' niet bedienbaar met het toetsenbord. Maak zoveel mogelijk gebruik van native HTML elementen, zoals een <a href=>.

Bevinding 42: Op pagina https://bravo.info/reizen/reisplanner zijn de klikbare reisadviezen die verschijnen niet bedienbaar met het toetsenbord.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Bevinding 43: Op de pagina https://www.bravo.info/vervoerbewijzen/betalen-het-ov/ovpay-en-uitchecken-het-ov-met-je-betaalpas wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium. Ditzelfde komt op meer plaatsen in de website voor, bijvoorbeeld op pagina https://www.bravo.info/over-bravo/vernieuwing-ov.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 44: De PDF 'Bravo fiets Bergen op Zoom' heeft een documenttitel in de eigenschappen maar de titel 'Bravofiets_Industriegebieden_last_mile_flyer_2022_v2.indd' beschrijft de inhoud niet en in de eigenschappen staat ingesteld dat de Bestandsnaam wordt getoond. Zorg voor een goede titel en dat niet de bestandsnaam maar de Documenttitel wordt getoond.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 45: Wanneer op een pagina een menu-item wordt geopend in het hoofdmenu, bijvoorbeeld 'Reizen', verschijnt een submenu. De focus komt echter pas in dit menu nadat deze over de andere menu-items, en over het tweede menu bovenaan de pagina is gegaan. Zorg dat de focus direct in het submenu wordt geplaatst.

Bevinding 46: Wanneer op een pagina een menu-item wordt geopend in het hoofdmenu, bijvoorbeeld 'Reizen', verschijnt een submenu. Wanneer een bezoeker met het toetsenbord dit menu verlaat, blijft het menu geopend staan, en gaat de focus verder over de achterliggende pagina. De bezoeker ziet dan niet waar de focus zich bevindt. Zorg dat de focus in het menu blijft totdat de bezoeker het menu sluit, of dat het menu automatisch sluit zodra de bezoeker verder navigeert.

Bevinding 47: Op pagina https://bravo.info/english/tickets wordt gebruik gemaakt van uitvouwbare blokken (accordeons) zoals bij 'Personal OV-chipkaart'. Er doet zich hier een probleem voor met de focusvolgorde. De items in de uitvouwbare tekstblokken zoals de link naar 'OV-chipkaart' krijgen toetsenbordfocus, ook als het tekstblok niet uitgevouwen is. Dit is verwarrend voor gebruikers die met het toetsenbord navigeren en wel het scherm kunnen zien. Zorg ervoor dat de items die niet zichtbaar zijn geen focus krijgen als de accordeon ingevouwen is.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 48: Op de homepagina staan links met de linktekst 'Lees meer'. Vermijd linkteksten als ‘Lees meer’ en ‘Klik hier’, zulke teksten beschrijven het linkdoel niet. Zorg dat linkteksten duidelijk beschrijven waar de link naartoe gaat, bijvoorbeeld door de tekst aan te vullen met de titel van het bericht of pagina waarnaar gelinkt wordt. Als visueel duidelijk is waar de link bij hoort hoeft deze aanvullende tekst niet visueel zichtbaar te zijn.
Hetzelfde komt op meer plaatsen in de website voor, bijvoorbeeld op pagina https://www.bravo.info/reizen/diensten en op pagina https://www.bravo.info/klantenservice/direct-regelen/bravo-tarievencheck bij de links 'Lees meer' en 'Wijzig'.

Bevinding 49: Op de pagina https://www.bravo.info/vervoerbewijzen/betalen-het-ov/ovpay-en-uitchecken-het-ov-met-je-betaalpas staat een video met het logo van OVpay dat een link is naar het YouTube kanaal van OVpay. De toegankelijke linktekst 'Photo image of OVpay' beschrijft het linkdoel niet. Zorg dat linkteksten duidelijk beschrijven waar de link naartoe gaat,

Bevinding 50: Op de pagina https://bravo.info/klantenservice/contact-met-vervoerders staat twee keer de link 'Neem contact op'. Voor ziende bezoekers is duidelijk waarmee contact opgenomen wordt, maar dit is niet het geval voor bezoekers die afhankelijk zijn van voorleessoftware. Geef aan wat de link doet door aan de toegankelijke linktekst bijvoorbeeld 'Arriva' of 'Hermes' toe te voegen.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 51: Op pagina https://www.bravo.info/klantenservice/direct-regelen/bravo-tarievencheck komt de kop van niveau 2 'Main navigation' twee keer voor, dat is verwarrend. Geef bijvoorbeeld de zijnavigatie een andere titel.
Hetzelfde komt vaker voor op de website, bijvoorbeeld op pagina https://www.bravo.info/over-bravo/vernieuwing-ov komt de kop 'Secondary menu' twee keer voor.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 52: Advies: Wanneer het logo bovenaan de pagina in Firefox toetsenbordfocus heeft, verschijnt een focusrand die het logo niet geheel omsluit. Onder de WCAG 2.2 komen strengere eisen voor de focuszichtbaarheid. Zie de conceptversie op www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 53: Op de homepagina staat onder 'Uitgelicht' een link van een afbeelding met daaroverheen de tekst 'Samen erop uit in de meivakantie!'. De toegankelijke naam van de link is 'Lees meer'. Doordat het visuele label en de toegankelijke naam van deze knop niet overeenkomen, is de knop niet of moeilijk te bedienen door bezoekers die afhankelijk zijn van spraaksoftware. Zorg ervoor dat het visuele label van deze knop in de toegankelijke naam voorkomt, het liefst vooraan.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Bevinding 54: In de eigenschappen van PDF Bravo fiets Bergen op Zoom is de taal niet goed ingevuld. Deze staat op Engels in plaats van Nederlands. Zorg ervoor dat de taalinstelling overeenkomt met de taal die gebruikt wordt in de PDF.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 55: Op pagina https://bravo.info/english/tickets is de taalaanduiding van de hele pagina Nederlands. De hoofdinhoud van de pagina is echter in het Engels. Zorg voor een taalwissel in de HTML zodat hulpsoftware de tekst op correcte wijze voorleest.

Bevinding 56: Het hoofdmenu en het zijmenu, bijvoorbeeld op pagina https://bravo.info/klantenservice/contact-met-vervoerders, hebben een (onzichtbare) Engelstalige kop: 'Main navigation' en 'Secondary navigation'. De pagina is gecodeerd als Nederlandstalig. Hiervoor moet in de code een taalwisseling aangegeven worden. Dit kan door aan de omliggende html-code een lang="en" toe te voegen, of maak de koppen Nederlandstalig.

Bevinding 57: Advies: Op pagina https://bravo.info/search/node?keys=Veghel wordt gebruik gemaakt van de teksten 'Next' en 'Last'. Omdat de pagina Nederlandstalig is, kunnen deze teksten beter naar het Nederlands vertaald worden.
Ditzelfde geldt ook voor afbeeldingen met Engelstalige alt-teksten, zoals op pagina https://bravo.info/reizen/reisplanner bij de iconen die binnen een reisadvies aangeven hoe er gereisd wordt.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Bevinding 58: Als in het formulier op pagina https://bravo.info/reizen/reisplanner een veld niet of niet goed is ingevuld is dat alleen te zien aan de rode in plaats van zwarte rand rond het invoerveld. Zorg voor een tekstuele foutmelding. Een goede fout identificatie vermeldt welke fout gemaakt is en waar de fout gemaakt is. Bijvoorbeeld 'Het veld Vertrekadres is niet ingevuld’.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Bevinding 59: De formuliervelden 'Van' en 'Naar' op de homepagina hebben een zichtbaar label maar er staat meer informatie over wat er ingevuld kan worden in de placeholdertekst. De placeholdertekst is niet voldoende, want die verdwijnt zodra de bezoeker begint met typen. Voor sommige mensen kan het moeilijk zijn om te onthouden wat ze moeten invullen als dat er niet duidelijk bij staat. Voeg een label toe dat altijd zichtbaar blijft om dit probleem op te lossen.

Bevinding 60: De formuliervelden 'vertrek of aankomst', 'reisdag' en 'reistijd' op de homepagina hebben geen visueel zichtbaar label, waardoor bezoekers niet weten wat zij hier in moeten vullen. Zorg ervoor dat het voor alle bezoekers altijd duidelijk is welke input gevraagd wordt.
Dit geldt ook voor het veld 'station of halte' dat verschijnt via 'Of zoek een halte'.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Bevinding 61: In het 'Plan je reis' formulier op de homepagina kan bijvoorbeeld je vertrektijd ingevuld worden. Het enige juiste format om dat te doen is 'u:mm' maar het is niet duidelijk welk formaat de tijdsnotering moet volgen. Zorg dat het voor bezoekers duidelijk is hoe zij dit formulierveld moeten invullen.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Bevinding 62: Als bij een schermresolutie van 1280x1024px ingezoomd wordt tot 200% verschijnt een menuknop in de header. De naam van dit element is 'menu', maar er ontbreekt een waarde die aangeeft of het menu uitgevouwen of samengevouwen is. Voeg bijvoorbeeld het aria-expanded attribuut toe.
Daarnaast mist de juiste rol (knop). Maak gebruik van het <button> element om dit op te lossen.
Dit geldt ook voor de sluitknop (x) die verschijnt wanneer het menu geopend is.

Bevinding 63: Op meerdere plekken op de pagina wordt gewerkt met klikbare <div> elementen. Deze zijn beschreven onder succescriterium 2.1.1.
De elementen missen een juiste rol. Maak zoveel mogelijk gebruik van native HTML, zoals een <button> of <a href> element om dit op te lossen.

Bevinding 64: Op de pagina https://www.bravo.info/vervoerbewijzen/betalen-het-ov/ovpay-en-uitchecken-het-ov-met-je-betaalpas wordt gebruikgemaakt van de videospeler van YouTube in een iframe. Daar ontbreekt het title-attribuut. Plaats het title-attribuut in dit i-frame met een goede omschrijving van de inhoud van het iframe, bijvoorbeeld "OVpay Introductie Video".
Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina https://bravo.info/reizen/diensten/bravofiets-de-deelfiets-bergen-op-zoom bij het iframe met de routeplanner.

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

• Home:
  https://bravo.info/
• Contact:
  https://bravo.info/klantenservice/contact-met-vervoerders
• Zoekresultaten:
  https://bravo.info/search/node?keys=Veghel
• Video:
  https://www.bravo.info/vervoerbewijzen/betalen-het-ov/ovpay-en-uitchecken-het-ov-met-je-betaalpas
• PDF:
  https://bravo.info/reizen/diensten/bravofiets-de-deelfiets-bergen-op-zoom
• Tabel:
  https://bravo.info/klantenservice/tips/de-bus-goedkoper-dan-je-denkt
• Engelstalig:
  https://bravo.info/english/tickets
• Formulier:
  https://www.bravo.info/klantenservice/direct-regelen/bravo-tarievencheck
• 404:
  https://www.bravo.info/fout
• Nieuws:
  https://bravo.info/nieuws
• Nieuws artikel:
  https://bravo.info/nieuws/cao-onderhandelingsresultaat-openbaar-vervoer
• reisplanner:
  https://bravo.info/reizen/reisplanner
• Video:
  https://www.bravo.info/over-bravo/vernieuwing-ov
• Diensten:
  https://www.bravo.info/reizen/diensten

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• DOM
• ECMAScript 5
• SVG

Bronnen

• Evaluatiedocument WCAG 2.0
  www.drempelvrij.nl/over-het-waarmerk
• Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
  www.w3.org/Translations/WCAG20-nl
• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.