Rapport:
Audit digitale toegankelijkheid website BrabantStad
- Onderzoeker
- Pieternel de Jonge; Jules Ernst van 200 OK
- Datum
- 17 mei 2021
- Opdrachtgever
- Simon Besters, De Staat van het Web
Samenvatting onderzoeksresultaat
De website BrabantStad voldoet nog niet aan WCAG 2.1 niveau AA. Er zijn 33 van de 50 succescriteria waar één of meer fouten zijn gevonden. In dit document is vastgelegd in hoeverre de website voldoet aan de toegankelijkheidseisen die vastgelegd zijn in WCAG, de Web Content Accessibility Guidelines.
De website brabantstad.nl is onderzocht tussen 7 en 17 mei 2021. Het onderzoek is uitgevoerd aan de hand van de evaluatiemethode WCAG-EM. Doel van dit rapport is om de vervolgstappen te bepalen om tot een toegankelijke website te komen.
Het onderzoek richt zich specifiek op de toegankelijkheid van de website voor mensen met een functiebeperking, zoals mensen die blind, doof, laaggeletterd zijn of andere functieproblemen hebben. Voor hen is het van belang dat de website technisch en inhoudelijk zo is ingericht dat de site voor hen goed bruikbaar is. Een website optimaliseren voor toegankelijkheid heeft meer voordelen; het maakt de website beter bruikbaar voor iedereen (bijvoorbeeld ook voor mensen die op hun mobieltje kijken in een zonnige omgeving) en het maakt de site beter vindbaar in zoekmachines.
Scope van de evaluatie
| Naam website | BrabantStad |
|---|---|
| Scope van de website |
- Alle pagina's op brabantstad.nl |
| Conformiteitsdoel | WCAG 2.1 niveau AA |
| Basisniveau van toegankelijkheid ondersteund | Gangbare browsers en hulpsoftware |
Overzicht toetsresultaat
| Principe | Voldoende | Onvoldoende | Onbekend |
|---|---|---|---|
| 1 Waarneembaar | 7 | 13 | 0 |
| 2 Bedienbaar | 7 | 10 | 0 |
| 3 Begrijpelijk | 3 | 7 | 0 |
| 4 Robuust | 0 | 3 | 0 |
| Totaal | 17 | 33 | 0 |
Leeswijzer
Dit onderzoek is een momentopname. De website kan inmiddels veranderd zijn. De gevonden problemen zijn slechts voorbeelden. Ga daarom bij elk probleem de gehele website na of dit ook op andere plaatsen voorkomt. Dit onderzoek is slechts een steekproef van een aantal pagina's. Er zijn zo veel mogelijk verschillende type pagina's opgenomen in de sample om zo een goede indruk te krijgen van de toegankelijkheid. Let op! Bij het aanbrengen van verbeteringen of wijzigingen op de website/app kunnen nieuwe problemen ontstaan. Succescriteria gemarkeerd met "Niet aanwezig" worden automatisch goedgekeurd. Succescriteria gemarkeerd met "Onbekend" worden niet goedgekeurd.
Uitgebreide toetsresultaten
1. Waarneembaar
1.1 Tekstalternatieven
1.1.1 Niet-tekstuele content (Niveau A)
Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve voor de hierna vermelde situaties.
- Bedieningselementen, invoer: Als niet-tekstuele content een bedieningselement is of gebruikersinvoer accepteert, dan heeft ze een naam die het doel ervan beschrijft. (We verwijzen naar succescriterium 4.1.2 voor aanvullende eisen over bedieningselementen en content die gebruikersinvoer accepteren.)
- Op tijd gebaseerde media: Als niet-tekstuele content op tijd gebaseerde media is, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content. (We verwijzen naar Richtlijn 1.2 voor aanvullende eisen ten aanzien van media.)
- Test: Als niet-tekstuele content een test of oefening is die, als ze door middel van tekst gepresenteerd wordt onjuist zou zijn, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content.
- Zintuiglijk: Als niet-tekstuele content primair is bedoeld om een specifieke zintuiglijke ervaring te creëren, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content.
- CAPTCHA: Als het doel van niet-tekstuele content is om te bevestigen dat content wordt gebruikt door een persoon in plaats van een computer, dan worden tekstalternatieven geleverd die het doel van de niet-tekstuele content identificeren en beschrijven. En er worden alternatieve vormen van CAPTCHA aangeboden gebruikmakend van uitvoermodes voor verschillende soorten van zintuiglijke perceptie om tegemoet te komen aan verschillende functiebeperkingen.
- Decoratie, opmaak, onzichtbaar: Als niet-tekstuele content puur decoratief is, slechts voor visuele opmaak wordt gebruikt, of niet aan gebruikers wordt gerepresenteerd, dan wordt het op zo'n manier geïmplementeerd dat het genegeerd kan worden door hulptechnologie.
Informatie over succescriterium 1.1.1 Niet-tekstuele content
Uitkomst: Onvoldoende
Bevindingen: Op elke pagina staat rechts bovenin een afbeelding van het logo van BrabantStad. Dit logo is klikbaar. De alternatieve tekst is nu “Brabantstad”. Dit kan duidelijker, bijvoorbeeld “BrabantStad logo, ga naar homepagina". Ook is op de link een title-attribuut aanwezig met dezelfde tekst. Het title-attribuut wordt niet goed ondersteund door elke screenreader. Laat het title-attribuut daarom weg.
Op pagina https://brabantstad.nl/ zijn de afbeeldingen binnen de carrousel klikbaar, maar ze missen een alternatieve tekst die het linkdoel beschrijft. Zorg voor een alternatieve tekst die het linkdoel goed beschrijft. Het title-attribuut wordt niet goed ondersteund door elke screenreader. Laat het title-attribuut daarom weg.
Op pagina https://brabantstad.nl/lancering-sensrnet/ staat bovenin de hoofdinhoud een klikbare afbeelding van het Zuiden van Nederland. Wanneer de link geactiveerd wordt, wordt de afbeelding als een popup getoond. De alternatieve tekst “Lancering SensRNet” doet echter vermoeden dat het linkdoel een pagina is met informatie over de lancering van SensRNet. Een betere beschrijving van het linkdoel is “Bekijk de afbeelding”. Bovendien heeft het afzonderlijk tonen van de afbeelding geen toegevoegde waarde, deze wordt zelfs kleiner getoond dan hij op de pagina staat. Een soortgelijke situatie doet zich voor op pagina’s https://brabantstad.nl/brabant-stoomt-mkb-klaar-voor-data/ en https://brabantstad.nl/bezoek-brabantstad-op-de-provada/.
De captcha-afbeelding op pagina https://brabantstad.nl/contact/ mist een tekstalternatief, hierdoor is het voor mensen die afhankelijk zijn van hulpsoftware niet mogelijk om deze code te lezen. Omdat een captcha-afbeelding met alternatieve tekst een zinloze bescherming is, moet uitgekeken worden naar een toegankelijke wijze om je te beschermen voor spam. Deze captcha bevat meer toegankelijkheidsproblemen.
Op pagina https://brabantstad.nl/nieuws-brabantstad/ staan nieuwsblokken met bovenin een klikbare afbeelding. De alternatieve tekst beschrijft hier de inhoud van de afbeelding. Dat is niet correct. De afbeelding dient het linkdoel te beschrijven. Zie ook succescriterium 2.4.4.
1.2 Op tijd gebaseerde media
1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) (Niveau A)
Voor media met vooraf opgenomen louter-geluid en vooraf opgenomen louter-videobeeld is het volgende waar, behalve als de audio of video een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld:
- Vooraf opgenomen louter-geluid: Er wordt een alternatief geleverd voor op tijd gebaseerde media dat equivalente informatie geeft voor vooraf opgenomen louter-geluid content.
- Vooraf opgenomen louter-videobeeld: Er wordt een alternatief geleverd voor op tijd gebaseerde media of een geluidsspoor dat equivalente informatie geeft voor vooraf opgenomen louter-videobeeld content.
Informatie over succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)
Uitkomst: Niet aanwezig
1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)
Er worden ondertitels voor doven en slechthorenden geleverd voor alle vooraf opgenomen audiocontent in gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.
Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Uitkomst: Onvoldoende
Bevindingen: De video met de titel “Themamiddag BrabantRing” op pagina https://brabantstad.nl/brabantring/ heeft automatisch gegenereerde ondertitels. De kwaliteit hiervan is dermate slecht, dat een groot gedeelte van de video moeilijk of niet te begrijpen is voor bezoekers met een auditieve beperking. Ter illustratie de vertaling van het fragment dat begint op 4:03 ziet er als volgt uit: “samen met een groot aantal collega’s uit de steden in brabant werken leuke band aan aan de brahman de ging” Dit zou moeten zijn “Samen met een groot aantal collega’s uit de steden in Brabant werken wij op dit moment aan de BrabantRing.”. Los dit op door de auto-gegenereerde tekst te voorzien van interpunctie en de teksten te corrigeren die niet correct vertaald zijn.
1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)
Er wordt een alternatief geleverd voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen videocontent geleverd voor gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.
Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
Uitkomst: Onvoldoende
Bevindingen: In de eerste video op pagina https://brabantstad.nl/brabantring/ met de titel "Themamiddag BrabantRing" wordt op tijdstip 5:31 de agenda getoond. De tekst in de agenda wordt niet in de omschrijving bij de video getoond. Op tijdstip 25:53 wordt een grafiek met demografische gegevens getoond. Deze wordt slechts summier toegelicht. Er wordt bijv. gerefereerd aan de kleuren van de lijnen, maar deze informatie is voor mensen met een visuele beperking niet beschikbaar. In deze video komen veel verschillende sprekers aan het woord. Met name als er vragen gesteld wordt moet het duidelijk zijn wie er wat zegt. Zorg dat alle informatie die visueel beschikbaar is, ook beschikbaar is in geluid zodat gebruikers met een visuele beperking deze informatie kunnen horen. Voor dit succescriterium ie een tekstalternatief voldoende.
In de tweede video op pagina https://brabantstad.nl/brabantring/ met de titel "PNB BrabantRing DEF" vindt op tijdstip 0:38 een wisseling van sprekers plaats. In het videobeeld zelf wordt even kort de naam en functie van de spreker “Jan Hoskam, wethouder ‘s Hertogenbosch” getoond. Op tijdstip 2:02 wordt tot aan het eind van de video nog tekst getoond, ook deze is niet in geluid beschikbaar. Deze informatie is niet beschikbaar voor mensen met een visuele beperking. Zorg ervoor dat deze informatie via audiodescriptie wordt toegevoegd. Voor dit succescriterium ie een tekstalternatief voldoende.
1.2.4 Ondertitels voor doven en slechthorenden (live) (Niveau AA)
Er worden ondertitels voor doven en slechthorenden geleverd voor alle live audiocontent in gesynchroniseerde media.
Informatie over succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live)
Uitkomst: Niet aanwezig
1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)
Er wordt een audiodescriptie geleverd voor alle vooraf opgenomen videocontent in gesynchroniseerde media.
Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)
Uitkomst: Onvoldoende
Bevindingen: Bij de twee video’s op pagina https://brabantstad.nl/brabantring/ ontbreekt een audiodescriptie. Zie ook succescriterium 1.2.3, echter een tekstalternatief is in dit succescriterium onvoldoende.
1.3 Aanpasbaar
1.3.1 Info en relaties (Niveau A)
Informatie, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.
Informatie over succescriterium 1.3.1 Info en relaties
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://brabantstad.nl/ zijn de koppen “Wat is BrabantStad?” en “Bouw mee aan een beter Brabant!” opgemaakt als <h3> koppen. Hierdoor lijkt het alsof ze onder de <h2> kop “52 woningen van slimste wijk ter wereld” thuishoren. Dat is niet correctl. Op deze manier is het voor gebruikers van hulpsoftware niet duidelijk wat de structuur van de pagina is. Los dit op door hier <h2> koppen van te maken.
Op pagina https://brabantstad.nl/ staat een afbeelding met de grafische tekst “De stedelijke agenda van BrabantStad in zes hoofdpunten”. Dit heeft betrekking op de zes gekleurde blok-afbeeldingen en links eronder. Het is nu niet duidelijk dat deze bij elkaar horen. Los dit op door om deze afbeelding een <h2> kop te plaatsen. Zie ook succescriterium
Op pagina https://brabantstad.nl/stedelijke-agenda/ staat in de middelste kolom de tekst “Zes summits”. Deze tekst is alleen visueel opgemaakt als een kop. Zorg dat deze tekst als een echte kop opgemaakt wordt. Plaats ook de erboven staande zes gekleurde blok-afbeeldingen en links onder deze kop, omdat dit links zijn naar deze zes summits.
Op pagina https://brabantstad.nl/lancering-sensrnet/ is de tekst “BrabantStad zet de sensor op de kaart” alleen visueel opgemaakt als kop. Dit is een echte kop en zou beter als <h1> opgemaakt worden.
Op pagina https://brabantstad.nl/digitale-stad/ staan twee <h1> koppen met exact dezelfde tekst nl. “Digitale stad”. Zorg ervoor dat deze koppen een unieke tekst krijgen die de inhoud eronder duidelijk beschrijft. Ook is het beter om slechts één <h1> kop in te zetten. Houd daarbij goed de structuur van de pagina in de gaten.
Op pagina https://brabantstad.nl/nieuws-brabantstad/ hebben de <h3> koppen “Nieuws” en “Archief nieuwsberichten” een lager kopniveau dan de nieuwsberichten eronder. Dit is onlogisch en zorgt ervoor dat de structuur van de pagina niet meer klopt. Pas de kopniveaus zodanig aan dat ze de structuur van de pagina weerspiegelen.
Op pagina https://brabantstad.nl/brabantring/ is de tekst “Themamiddag BrabantRing” visueel als kop opgemaakt. Zorg ervoor dat dit een echte kop wordt.
Op pagina https://brabantstad.nl/brabant-stoomt-mkb-klaar-voor-data/ is de tekst “Brabant stoomt MKB klaar voor Data” alleen visueel als kop opgemaakt, Maak hier een echte kop.
Op pagina https://brabantstad.nl/bezoek-brabantstad-op-de-provada/ is de tekst “Bezoek BrabantStad op de Provada 2019” visueel opgemaakt als kop. Maak hier een echte kop van.
Op elke pagina wordt bij het eerste bezoek ervan het inschrijfformulier voor de nieuwsbrief in een pop-up getoond. In het formulier worden placeholder teksten ingezet in plaats van labels. Placeholder teksten zijn toegestaan, maar daarnaast dient altijd een label aanwezig te zijn dat zowel visueel als programmatisch beschikbaar is. Zie ook succescriterium 3.3.3.
Op 404 pagina https://brabantstad.nl/nietgevonden heeft het zoekformulier geen label. Zorg voor een label dat het doel van het invoerveld beschrijft. Voor gebruikers die kunnen zien, is dit geen probleem, omdat het vergrootglas-icoon voldoende informatie biedt. Voor gebruikers van hulpsoftware is dit wel een probleem. Zorg dat het label programmatisch gekoppeld wordt aan het invoerveld. Het kan eventueel visueel verborgen worden m.b.v. CSS.
In het formulier op pagina https://brabantstad.nl/contact/ bevinden zich naast de radiobuttons labels die zichtbaar zijn weergegeven, maar die programmatisch niet gekoppeld zijn aan de erbij behorende radiobuttons. Zorg ervoor dat deze programmatisch gekoppeld worden aan de radiobuttons.
Onderaan pagina https://brabantstad.nl/nieuws-brabantstad/ staat een paginerings-blok. De paginanummers zijn opgenomen in een ongeordende lijst <ul>. Het is logischer om hier gebruik te maken van een geordende lijst <ol>, omdat het hier gaat om een geordende reeks.
Op elke pagina staan onderin de footer een vijftal links, waaronder de links naar “Privacyverklaring” en “Disclaimer”. Zorg ervoor dat deze in een lijst komen te staan.
De pagineringslijst op pagina https://brabantstad.nl/?s=brabant ontbreken onder de lijst <ul> de <li>-elementen. Dat is niet correct. Zie ook succescriterium 4.1.1.
Best practices:
Op de meeste pagina’s ontbreekt een <h1> kop. Ook worden regelmatig kopniveaus overgeslagen. Zorg voor een duidelijke koppenstructuur. Dit is beter voor gebruikers van hulpsoftware: zo kunnen ze informatie sneller vinden. Ook worden op een aantal pagina’s meerdere <h1> koppen gebruikt. Probeer dit te beperken tot een <h1> kop per pagina.
Het PDF bestand https://brabantstad.nl/wp-content/uploads/2019/02/privacyregeling.pdf is niet gecodeerd. Daardoor is er voor hulpsoftware geen informatie beschikbaar om deze PDFs te interpreteren. Omdat de code ontbreekt kan deze PDF niet volledig worden onderzocht (alle succescriteria met betrekking tot de PDF code-laag zoals semantische koppen en alternatieve teksten bij afbeeldingen).
Het PDF bestand https://brabantstad.nl/wp-content/uploads/2021/03/aftrap-brabantdiner-1.pdf is gecodeerd, maar de code is niet overal goed toegepast.
- De kop “BrabantStad-diner” is opgemaakt als afbeelding zonder alt-tekst, maar zou een <h1>kop moeten zijn.
- Alle overige koppen en lijsten zijn opgemaakt als een paragraaf. De enige positieve uitzondering is de lijst startend met lijst-item “Benoem de opgaven en vertaal deze programmatisch en in locaties”.
Zonder correct toegepaste code is het voor gebruikers van hulpsoftware niet duidelijk wat de structuur van het document is. Los dit op door koppen en lijsten te voorzien van de juiste codering.
1.3.2 Betekenisvolle volgorde (Niveau A)
Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een correcte leesvolgorde door software bepaald worden.
Informatie over succescriterium 1.3.2 Betekenisvolle volgorde
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://brabantstad.nl/stedelijke-agenda/ komen de zes links in de gekleurde blokken in de code direct na de kop “Dit gaan we de komende jaren doen:”. Visueel wordt echter eerst de tekst behorend bij de kop getoond en pas daarna de links. Zorg ervoor dat de kop en de onderliggende tekst direct onder elkaar staan; de zes gekleurde blokken moeten na de kop "Zes summits" geplaatst worden.
1.3.3 Zintuiglijke eigenschappen (Niveau A)
Instructies die geleverd worden om content te begrijpen en te bedienen zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, visuele locatie, oriëntatie of geluid.
Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen
Uitkomst: Voldoende
1.3.4 Weergavestand (Niveau AA)
De content beperkt de weergave en bediening niet tot een enkele presentatie-oriëntatie, zoals staand of liggend, tenzij een specifieke presentatie-oriëntatie essentieel is.
Informatie over succescriterium 1.3.4 Weergavestand
Uitkomst: Voldoende
1.3.5 Identificeer het doel van de input (Niveau AA)
Het doel van elk invoerveld waarmee informatie van de gebruiker wordt verzameld, kan door software bepaald worden wanneer:
- Het invoerveld een doel dient dat is geïdentificeerd in de paragraaf Inputdoelen voor Componenten van de Gebruikersinterface; en
- De content wordt geïmplementeerd met behulp van technologieën die ondersteuning bieden bij het identificeren van de verwachte betekenis van formulier-invoergegevens.
Informatie over succescriterium 1.3.5 Identificeer het doel van de input
Uitkomst: Onvoldoende
Bevindingen: In het formulier op pagina https://brabantstad.nl/contact/ dienen door de bezoeker persoonlijke gegevens ingevuld te worden. Het betreft de invoervelden naam, e-mail en telefoonnummer. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald zodat velden automatisch kunnen worden ingevuld, of zodat extra hulp geboden kan worden bij het invullen. Dat ontbreekt hier. Dit kan door het attribuut ‘autocomplete’ aan de input-elementen toe te voegen. Voor naam: autocomplete=”family-name” en voor e-mail: autocomplete=”email”. Een overzicht van de velden waarvoor dit van toepassing is vind je hier: www.w3.org/tr/wcag21/.
1.4 Onderscheidbaar
1.4.1 Gebruik van kleur (Niveau A)
Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.
Informatie over succescriterium 1.4.1 Gebruik van kleur
Uitkomst: Voldoende
1.4.2 Geluidsbediening (Niveau A)
Als een geluidsweergave op een webpagina automatisch meer dan 3 seconden speelt, is er of een mechanisme beschikbaar om de geluidsweergave te pauzeren of te stoppen, of er is een mechanisme beschikbaar om het geluidsvolume onafhankelijk van het overall systeemvolume te regelen.
Informatie over succescriterium 1.4.2 Geluidsbediening
Uitkomst: Niet aanwezig
1.4.3 Contrast (minimum) (Niveau AA)
De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in de volgende gevallen:
- Grote tekst: Grote tekst en afbeeldingen van grote tekst hebben een contrastverhouding van ten minste 3:1;
- Incidenteel: Tekst of afbeeldingen van tekst die deel zijn van een inactieve component van de gebruikersinterface, die puur decoratief zijn, die voor niemand zichtbaar zijn, of die onderdeel zijn van een afbeelding die significant andere visuele content bevat, hebben geen contrasteis.
- Woordmerken: Tekst die onderdeel is van een logo of merknaam heeft geen contrasteis.
Informatie over succescriterium 1.4.3 Contrast (minimum)
Uitkomst: Onvoldoende
Bevindingen: Op elke pagina hebben de witte tekstlinks in de hoofdnavigatie te weinig contrast t.o.v. de rood-roze achtergrond. De contrastwaarde is 3,5:1 waar dit 4,5:1 moet zijn.
Op elke pagina hebben de rood-roze teksten van de links tegen de witte achtergrond in de footer een te laag contrast. De contrastwaarde is 3,6:1 waar dit 4,5:1 moet zijn.
Op pagina https://brabantstad.nl/ hebben de donkergrijze teksten op het lichtgrijze vlak behorend bij de carrousel een te lage contrast. De contrastwaarde is 3,9:1 waar dit 4,5:1 moet zijn.
Op pagina https://brabantstad.nl/page/2/?s=brabant hebben de donkergrijze cijfers in het pagineringsblok een te laag contrast met de witte achtergrond. De contrastwaarde is 4,47:1 en dat is net niet voldoende.
Op pagina https://brabantstad.nl/page/2/?s=brabant hebben de grijze tekst (bijvoorbeeld de categoriën) en rood-roze teksten (de koppen) onvoldoende contrast met de witte achtergrond.
Op pagina’s https://brabantstad.nl/brabantring/ en https://brabantstad.nl/digitale-stad/ hebben alle witte teksten op een groene achtergrond en alle groene teksten tegen een witte achtergrond te weinig contrast. De contrastwaarde is 2,8:1 waar dit 4,5:1 moet zijn. Voor grote tekst zoals de koppen geldt een minimum van 3:1.
In het formulier op pagina https://brabantstad.nl/contact/ hebben alle placeholder-teksten en meldingen in en onder het formulier te weinig contrast met de witte achtergrond. Advies is om de placeholders weg te laten en hiervoor in de plaats labels te gebruiken, zie SC 3.3.2.
Op pagina https://brabantstad.nl/nieuws-brabantstad/ hebben de witte “Verder lezen” links in de groene blokken te weinig contrast. Dit is 2,84.
Op 404 pagina https://brabantstad.nl/nietgevonden staat een niet zichtbare <h3> kop met de tekst “Nothing Found”. Het betreft een witte tekst tegen een witte achtergrond. Zorg ervoor dat de tekst zichtbaar is en voldoende contrast heeft met de achtergrondkleur.
Op pagina https://brabantstad.nl/ hebben een viertal van de zes gekleurde blokafbeeldingen met witte grafische teksten te weinig contrast t.o.v. de achtergrondkleur. Het betreft de afbeeldingen met de teksten “Digitale stad”, “Slimme en duurzame mobiliteit”, “Gezonde en duurzame leefomgeving” en “Kennis en onderwijs”. Dit komt op meerdere pagina’s voor waar tekst als onderdeel van een afbeelding is opgenomen.
Op e pagina https://brabantstad.nl/ons-netwerk/ staan teksten over foto's heen. Deze hebben niet overal voloende contrast. Zorg voor voldoende tekst rond de hele letter door bijvoorbeeld een donkere transparante laag tussen de tekst en de foto te plaatsen.
1.4.4 Herschalen van tekst (Niveau AA)
Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit.
Informatie over succescriterium 1.4.4 Herschalen van tekst
Uitkomst: Onvoldoende
Bevindingen: Op alle pagina’s wordt het eerste gedeelte van de hoofdinhoud verborgen onder het rode vlak waarin zich de hoofdnavigatie en het zoekformulier bevinden. Zie als voorbeeld pagina https://brabantstad.nl/stedelijke-agenda/ waar een gedeelte van de <h1>-kop en de links in de gekleurde blokken niet meer zichtbaar zijn.
Op pagina https://brabantstad.nl/digitale-stad schuiven in de rechterkolom de blokken met links naar de nieuwsberichten over elkaar heen, waardoor alle teksten door elkaar heen staan en lastig te lezen zijn. Dit gebeurt niet in elke browser. Dit komt ook voor op https://brabantstad.nl/nieuws-brabantstad/
Op elke pagina staat in de HTML-code bij meta name="viewport" de volgende instellingen: "maximum-scale=1.0" en "user-scalable=0". Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instellingen weg.
1.4.5 Afbeeldingen van tekst (Niveau AA)
Als de gebruikte technologieën de visuele weergave tot stand kunnen brengen, wordt tekst gebruikt in plaats van afbeeldingen van tekst om informatie over te brengen, behalve in de volgende gevallen:
- Aanpasbaar: De afbeelding van tekst kan visueel aangepast worden aan de eisen van de gebruiker;
- Essentieel: Een specifieke weergave van tekst is essentieel voor de informatie die wordt overgebracht.
Informatie over succescriterium 1.4.5 Afbeeldingen van tekst
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://brabantstad.nl/ staan een aantal afbeeldingen die uit grafische tekst bestaan. Het betreft de afbeeldingen met de teksten “De stedelijke agenda van Brabantstad in zes hoofdpunten” en de zes afbeeldingen eronder met de o.a. teksten “Digitale stad” en “Slimme en duurzame mobiliteit”. Voor bezoekers met een visuele beperking is het belangrijk dat tekst met html wordt geplaatst en niet als onderdeel van afbeeldingen. Grafische tekst wordt niet gedetecteerd door hulpsoftware en de teksten kunnen ook niet worden aangepast in grootte, kleur, etc. Zorg ervoor dat deze tekst als html tekst beschikbaar is. Dit doet zich op meerdere pagina’s voor, zoals op de pagina https://brabantstad.nl/stedelijke-agenda/ en https://brabantstad.nl/ons-netwerk/.
Op pagina https://brabantstad.nl/stedelijke-agenda/ staat rechts van de kop “Zes summits” een afbeelding met een aantal cirkels en veel tekstuele informatie. Deze tekstuele informatie kan niet worden aangepast in grootte, kleur, etc. Zorg ervoor dat deze tekst als html tekst beschikbaar is. Als dat echt onmogelijk is, dan geldt SC 1.1.1, de informatie is niet beschikbaar als alternatieve tekst. Zorg voor een goed tekstalternatief, let daarbij op dat de alt-tekst niet langer wordt dan circa 150 tekens. In dat geval is het beter de tekst op andere wijze in tekst op te nemen op de pagina.
1.4.10 Reflow (Niveau AA)
Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor:
- Verticaal scrollbare content met een breedte gelijkwaardig aan 320 CSS-pixels;
- Horizontaal scrollbare content met een hoogte gelijkwaardig aan 256 CSS-pixels.
Met uitzondering van delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen.
Informatie over succescriterium 1.4.10 Reflow
Uitkomst: Onvoldoende
Bevindingen: Zie SC 1.4.4.
1.4.11 Contrast van niet-tekstuele content (Niveau AA)
De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren:
- Componenten van de gebruikersinterface: Visuele informatie die vereist is om componenten van de gebruikersinterface en statussen te identificeren, met uitzondering van inactieve componenten of componenten waarvan de weergave van de component wordt bepaald door de user agent en niet wordt aangepast door de auteur;
- Grafische objecten: Delen van afbeeldingen die vereist zijn om de content te begrijpen, behalve wanneer een specifieke weergave van afbeeldingen essentieel is voor de informatie die wordt overgebracht.
Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content
Uitkomst: Onvoldoende
Bevindingen: Op elke pagina met veel inhoud staat onderin het scherm een link die dient om terug naar de bovenkant van de pagina te gaan. De grijze achtergrond van de link en het witte pijltje hebben een te lage contrastratio van 2,8:1 waar dit 3:1 moet zijn.
Op pagina https://brabantstad.nl/ hebben de witte pijlen links en rechts van de carrousel te weinig contrast met de foto’s in de carrousel. Soms zijn ze helemaal niet zichtbaar. Een mogelijkheid is om deze pijlen te voorzien van een zwarte rand.
Op pagina https://brabantstad.nl/ hebben de ronde donkergrijze links onder de carrousel, die dienen om de carrousel te bedienen, te weinig contrast met de rode achtergrond.
De randen van het invoerveld op pagina https://brabantstad.nl/nietgevonden hebben een te laag contrast. Het contrastratio is 1,2:1 waar dit 3:1 moet zijn.
Op elke pagina staat bovenin een vergrootglas-icoon om het zoekformulier te activeren. Door het kleurgebruik is het niet duidelijk dat het rode vlak ook een invoerveld bevat. Dit is een best practice.
Op pagina’s https://brabantstad.nl/lancering-sensrnet/, https://brabantstad.nl/bezoek-brabantstad-op-de-provada/ en https://brabantstad.nl/brabant-stoomt-mkb-klaar-voor-data/ hebben het grijze hartje en tekstballon onderaan de afbeelding te weinig contrast met de witte achtergrond. De contrastwaarde is 2,8:1 waar dit 3:1 moet zijn. De cijfers erachter moeten een contrastwaarde 4,5:1 hebben.
Op de pagina https://brabantstad.nl/brabant-stoomt-mkb-klaar-voor-data/ zijn onder het bericht social-media-knoppen geplaatst. Deze zijn heel lichtgrijs. De contrastwaarde is 1,4:1 waar dit 3:1 moet zijn.
1.4.12 Tekstafstand (Niveau AA)
Bij content die wordt geïmplementeerd met opmaaktalen die de volgende stijleigenschappen voor tekst ondersteunen, is er geen sprake van verlies van content of functionaliteit door het instellen van alle volgende, en door het niet wijzigen van andere stijleigenschappen:
- Regelhoogte (regelafstand) naar minstens 1,5 keer de lettergrootte;
- Afstand tussen alinea's naar minstens 2 keer de lettergrootte;
- Letterafstand (spatieren van letters) naar minstens 0,12 keer de lettergrootte;
- Spatieren van woorden naar minstens 0,16 keer de lettergrootte.
Uitzondering: Menselijke talen en scripts die geen gebruik maken van een of meer van deze stijleigenschappen voor tekst in schriftelijke tekst, kunnen voldoen aan de eisen door alleen gebruik te maken van de eigenschappen die bestaan voor de betreffende combinatie van taal en script.
Informatie over succescriterium 1.4.12 Tekstafstand
Uitkomst: Onvoldoende
Bevindingen: Op alle pagina’s schuift het hoofdnavigatie-item “Contact” en/of het zoeken-icoon naar de volgende regel. Hierdoor wordt de hoogte van de header groter en valt deze gedeeltelijk over de hoofdinhoud heen.
Op pagina https://brabantstad.nl/digitale-stad/ staan aan de linkerkant blokken die naar nieuws-artikelen verwijzen. Bij een grotere tekstafstand vallen de teksten gedeeltelijk over elkaar heen, waardoor ze lastig leesbaar zijn.
Op pagina https://brabantstad.nl/nieuws-brabantstad/ vallen de links “Verder Lezen” onderin de nieuwsblokken in een aantal gevallen over de tekst heen bij een grotere tekstafstand. Dit komt niet in elke browser voor.
1.4.13 Content bij hover of focus (Niveau AA)
Wanneer aanvullende content zichtbaar wordt en daarna weer verborgen, door het gebruik van hover met de aanwijzer of focus met het toetsenbord, gelden de volgende zaken:
- Sluiten: Er is een mechanisme beschikbaar waarmee de aanvullende content kan worden gesloten zonder de aanwijzer hover of de toetsenbordfocus te verplaatsen, tenzij de aanvullende content een invoerfout communiceert of andere content niet verbergt of vervangt;
- Aanwijsbaar: Wanneer een aanwijzer hover aanvullende content kan activeren, dan kan de aanwijzer over de aanvullende content worden bewogen zonder dat deze verdwijnt;
- Aanhouden: De aanvullende content blijft zichtbaar totdat de oorzaak voor de hover of focus is verwijderd, de gebruiker de content sluit of de informatie niet langer geldig is.
Uitzondering: De visuele weergave van de aanvullende content wordt beheerd door de user agent en wordt niet aangepast door de auteur.
Informatie over succescriterium 1.4.13 Content bij hover of focus
Uitkomst: Voldoende
2. Bedienbaar
2.1 Toetsenbordtoegankelijk
2.1.1 Toetsenbord (Niveau A)
Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten.
Informatie over succescriterium 2.1.1 Toetsenbord
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://brabantstad.nl/ staan onder de carrousel links om de carrousel te bedienen, deze zijn opgemaakt als donkergrijze rondjes. Ondanks dat ze opgemaakt zijn als echte links, zijn ze niet focusbaar.
Onder de afbeelding van Zuid-Nederland op pagina’s https://brabantstad.nl/lancering-sensrnet/ en https://brabantstad.nl/brabant-stoomt-mkb-klaar-voor-data/ staan twee symbolen een hartje en een tekstballon. Het hartje is niet focusbaar en zou dat wel moeten zijn. Zie ook succescriterium 4.1.2.
De blokjes met paginanummers onderaan de pagina https://brabantstad.nl/nieuws-brabantstad/ zijn niet focusbaar, ondanks dat het links zijn.
Op pagina https://brabantstad.nl/contact/ is de tweede radiobutton in het contactformulier niet te benaderen met het toetsenbord.
Op pagina’s https://brabantstad.nl/brabant-stoomt-mkb-klaar-voor-data/ https://brabantstad.nl/bezoek-brabantstad-op-de-provada/ staan links en rechts van de pagina twee lichtgrijze links met de afbeelding van een witte pijl. Deze zijn niet focusbaar.
De cookiemelding die op elke pagina verschijnt bij een eerste bezoek is niet focusbaar. De focus blijft in het achterliggende scherm. Ook valt de melding over de hoofdnavigatie heen, waardoor deze niet meer zichtbaar is.
Het pop-up scherm met het inschrijfformulier voor de nieuwsbrief, dat tevoorschijn komt bij een eerste bezoek aan de website, is moeilijk met het toetsenbord te bedienen. De focus blijft in eerste instantie in het scherm erachter. Pas nadat je door de hele pagina getabd hebt kom je in het formulier terecht. Dit is niet goed. De focus dient direct naar het pop-up scherm te gaan en de achtergrond moet foor de tabvolgorde en leesvolgorde verdwijnen. Visueel mag de content in de achtergrond wel op deze wijze zichtbaar blijven.
2.1.2 Geen toetsenbordval (Niveau A)
Als de toetsenbordfocus met de toetsenbordinterface verplaatst kan worden naar een component van de pagina, dan kan de focus ook met alleen de toetsenbordinterface weer van dat component weg worden bewogen. En, als er meer nodig is dan de standaard pijl- of tabtoetsen of andere standaard methoden om de focus te verplaatsen, dan wordt de gebruiker geïnformeerd over de manier waarop de focus kan worden verplaatst.
Informatie over succescriterium 2.1.2 Geen toetsenbordval
Uitkomst: Voldoende
2.1.4 Enkel teken sneltoets (Niveau A)
Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken, geldt ten minste één van de volgende zaken:
- Uitzetten: Er is een mechanisme beschikbaar waarmee de sneltoets kan worden uitgezet;
- Opnieuw toewijzen: Er is een mechanisme beschikbaar om de sneltoets opnieuw toe te wijzen aan één of meerdere niet-afdrukbare tekens (bijvoorbeeld Ctrl, Alt, enz.);
- Alleen actief bij focus: De sneltoets voor een component van de gebruikersinterface is alleen actief wanneer de betreffende component de focus heeft.
Informatie over succescriterium 2.1.4 Enkel teken sneltoets
Uitkomst: Onvoldoende
Bevindingen: Op de pagina’s https://brabantstad.nl/brabantring/ bevinden zich twee Youtube video’s. Als de focus zich binnen de videospeler bevindt, zijn er sneltoetsen actief bestaande uit een enkel karakter. Zo kan met de ‘f’ de video schermvullend gemaakt worden en met de ‘k’ kan de video gestart en gestopt worden. Dit levert problemen op voor mensen die met spraakbedieningssoftware werken (bijvoorbeeld mensen die volledig verlamd zijn). Als de video speelt kan de video reageren op gesproken tekst waar deze letters in voorkomen, waardoor ongewenste acties uitgevoerd kunnen worden tijdens het kijken naar de video. Er is geen manier gevonden om deze sneltoetsen uit te zetten in de videospeler of om deze aan te passen.
2.2 Genoeg tijd
2.2.1 Timing aanpasbaar (Niveau A)
Voor elke tijdslimiet die door de content wordt ingesteld, geldt ten minste één van de volgende zaken:
- Uitzetten: De gebruiker kan de tijdslimiet uitzetten voordat die wordt bereikt; of
- Aanpassen: De gebruiker mag de tijdslimiet aanpassen voordat deze is verstreken over een bereik van ten minste tien keer de standaardinstelling; of
- Verlengen: De gebruiker wordt gewaarschuwd voor de tijd afloopt en krijgt ten minste 20 seconden om de tijdslimiet met een eenvoudige handeling te verlengen (bijvoorbeeld, "druk op de spatiebalk"), en de gebruiker mag de tijdslimiet ten minste tien keer verlengen; of
- Real-time uitzondering: De tijdslimiet is onderdeel van een realtime gebeurtenis (een veiling bijvoorbeeld) en er is geen alternatief voor de tijdslimiet mogelijk; of
- Essentiële uitzondering: De tijdslimiet is essentieel en verlenging zou de activiteit ongeldig maken; of
- 20 uur uitzondering: De tijdslimiet is langer dan 20 uur.
Informatie over succescriterium 2.2.1 Timing aanpasbaar
Uitkomst: Niet aanwezig
2.2.2 Pauzeren, stoppen, verbergen (Niveau A)
Voor alle bewegende, knipperende, scrollende of automatisch actualiserende informatie gelden alle volgende zaken:
- Bewegen, knipperen, scrollen: Voor bewegende, knipperende of scrollende informatie die (1) automatisch start, (2) langer dan vijf seconden duurt, en (3) parallel met andere content wordt getoond, is er een mechanisme voor de gebruiker om dit te pauzeren, te stoppen of te verbergen, tenzij de beweging, knippering of scrolling, onderdeel is van een activiteit waar ze essentieel is en
- Automatisch actualiserend: Voor elke soort automatisch actualiserende informatie die (1) automatisch start en (2) parallel met andere content wordt gepresenteerd, is er een mechanisme voor de gebruiker om dit te pauzeren, te stoppen of te verbergen of de frequentie van de actualisering in te stellen, tenzij de automatische actualisering onderdeel is van een activiteit waar ze essentieel is.
Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://brabantstad.nl/ staat boven in de hoofdinhoud een carrousel. Deze start automatisch. De carrousel bevat naast afbeeldingen ook stukken tekst en er is niet voldoende tijd om deze te kunnen lezen. Indirect is er een mogelijkheid om de carrousel te stoppen door op de witte pijlen links en rechts van de carrousel te klikken, of door op de ronde donkergrijze links onder de carrousel te klikken. Dat is echter niet duidelijk en niet voldoende. Er dient bij de carrousel een duidelijke optie te zijn om deze te kunnen stoppen. Los dit op door bij de carrousel een knop met een duidelijk tekstlabel toe te voegen waarmee je de carrousel kunt stoppen of pauzeren.
Op elke pagina staat links bovenin het BrabantStad logo. Het logo is een bewegende afbeelding. Deze beweging kan niet gestopt worden. Zorg ervoor dat deze beweging niet langer dan 5 seconden duurt.
2.3 Toevallen en fysieke reacties
2.3.1 Drie flitsen of beneden drempelwaarde (Niveau A)
Webpagina's bevatten niets wat meer dan drie keer flitst in enige periode van één seconde of de flits is beneden de algemene flits- en rodeflitsdrempelwaarden.
Informatie over succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde
Uitkomst: Niet aanwezig
2.4 Navigeerbaar
2.4.1 Blokken omzeilen (Niveau A)
Er is een mechanisme beschikbaar om blokken content die op meerdere webpagina's worden herhaald te omzeilen.
Informatie over succescriterium 2.4.1 Blokken omzeilen
Uitkomst: Onvoldoende
Bevindingen: Er is geen skiplink aanwezig op de website. Zorg ervoor dat toetsenbordgebruikers herhaalde content op de pagina kunnen overslaan en direct naar de hoofdinhoud van de pagina kunnen springen.
Op pagina https://brabantstad.nl/brabantring/ bevat het <iframe>-element van de tweede video een title-attribuut met de tekst “PNB BrabantRing DEF”. Deze titel is door de verkortingen die erin voorkomen niet voor iedereen duidelijk. Pas deze titel aan, zodat deze het doel van de video beschrijft.
Niet verplicht, maar wel aan te raden is, om de inhoud van het <title> element van het ingesloten document overeen te laten komen met de tekst in het title-attribuut op het <iframe> element. Sommige screenreaders vervangen namelijk de inhoud van het title-attribuut op het <iframe> element door de inhoud van het <title> element van het ingesloten document.
2.4.2 Paginatitel (Niveau A)
Webpagina's hebben titels die het onderwerp of doel beschrijven.
Informatie over succescriterium 2.4.2 Paginatitel
Uitkomst: Onvoldoende
Bevindingen: De PDF op pagina https://brabantstad.nl/wp-content/uploads/2019/02/privacyregeling.pdf bevat geen paginatitel. Voorzie het document van een titel die de inhoud van ervan beschrijft, bijvoorbeeld “BrabantStad Privacyregeling”.
De PDF op pagina https://brabantstad.nl/wp-content/uploads/2021/03/aftrap-brabantdiner-1.pdf bevat geen paginatitel. Voorzie het document van een titel die de inhoud van ervan beschrijft, bijvoorbeeld “Aftrap BrabantStad Diner”.
2.4.3 Focus volgorde (Niveau A)
Als een webpagina sequentieel genavigeerd kan worden en de navigatiesequenties hebben invloed op de betekenis of het gebruik, dan krijgen focusbare componenten de focus in de juiste volgorde waardoor betekenis en bedienbaarheid behouden blijft.
Informatie over succescriterium 2.4.3 Focus volgorde
Uitkomst: Onvoldoende
Bevindingen: Op de pagina https://brabantstad.nl/nieuws-brabantstad/ zijn blokjes met paginanummers onderaan de pagina vlak boven "Archief nieuwsberichten". Zodra je een paginanummer kiest scroll je naar boven. De focus blijft echter staan, en start dus niet op de plek waar naartoe is gescrolld.
2.4.4 Linkdoel (in context) (Niveau A)
Het linkdoel kan bepaald worden uit enkel de linktekst of uit de linktekst samen met zijn door software bepaalde linkcontext, behalve daar waar het doel van de link een dubbelzinnige betekenis zou kunnen hebben voor gebruikers in het algemeen.
Informatie over succescriterium 2.4.4 Linkdoel (in context)
Uitkomst: Onvoldoende
Bevindingen: Op elke pagina staat rechts bovenin een link met een vergrootglas-icoon. Deze link bevat geen linktekst. Voor mensen die kunnen zien is het duidelijk wat dit betekent, voor mensen die blind of slechtziend zijn is het dat niet. Zorg ervoor dat de link voorzien wordt van een link die duidelijk het linkdoel beschrijft. In dit geval zou dat bijvoorbeeld “Ga naar zoekformulier” kunnen zijn. Deze tekst kan visueel verborgen worden met CSS.
Op pagina https://brabantstad.nl/ staan een aantal links die als linktekst slechts een harde spatie bevatten. Het betreft links die visueel gepositioneerd zijn over afbeeldingen met grafische tekst, bijv. “De stedelijke agenda van Brabantstad in zes hoofdpunten” en de links die visueel gepositioneerd over de zes afbeeldingen met o.a. de grafische teksten “Digitale stad” en “Slimme en duurzame mobiliteit”. Links moeten een linktekst bevatten die het linkdoel duidelijk beschrijft. Zorg dat linkteksten gelijk zijn aan de teksten die getoond worden in de afbeeldingen erboven. En verwijder het title-attribuut met de waarde “thuis”. Een andere optie is om de afbeeldingen boven de links in de links zelf op te nemen. Dan kan worden volstaan met een alternatieve tekst op de afbeeldingen.
Dit doet zich op meerdere pagina’s voor, zoals op de pagina’s https://brabantstad.nl/stedelijke-agenda/ en https://brabantstad.nl/ons-netwerk/
Op pagina https://brabantstad.nl/?s=brabant bevat de link met de afbeelding van een pijltje naar rechts geen linktekst. Los dit op door de link te voorzien van tekst die duidelijk het linkdoel beschrijft, bijv. “Ga naar volgende pagina”.
Op pagina’s met veel inhoud, zoals pagina https://brabantstad.nl/nieuws-brabantstad/ staat rechts onderin het scherm een afbeelding van een lichtgrijs vierkantje met een witte pijl naar boven. Deze bevat geen linktekst. Zorg voor een tekst die duidelijk het linkdoel beschrijft, bijvoorbeeld “Terug naar bovenkant pagina”.
Op elke pagina staat onderin de footer de tekst “Toegankelijkheidsverklaring”. Deze tekst is abusievelijk opgesplitst in drie links, te weten: “Toegankelijk”, “heids” en “verklaring”. Zorg ervoor dat dat één link wordt.
Op pagina https://brabantstad.nl/ staan onder de carrousel vijf links om de carrousel te bedienen. Deze zijn opgemaakt als donkergrijze rondjes. De linktekst is visueel verborgen en alleen toegankelijk voor hulpsoftware. De linktekst bevat nu alleen het nummer van de slide. Duidelijker zou zijn om dit uit te breiden naar “slide 1 van 5”, “slide 2 van 5” etc.
Op pagina https://brabantstad.nl/digitale-stad/ staan in de rechter kolom in de nieuwsblokken veel overbodige links, bijv. naar datum, headline archief en digitale stad. Dit wordt in elk bericht opnieuw herhaald. Het is duidelijker, overzichtelijker om alleen naar het betreffende nieuwsbericht te linken. Een mogelijkheid is om van de blokken één link te maken naar het betreffende nieuwsbericht.
Op pagina https://brabantstad.nl/nieuws-brabantstad/ staan nieuwsblokken met elk drie links. Ze verwijzen naar hetzelfde nieuwsbericht, maar hebben verschillende linkteksten. Voor toetsenbordgebruikers kost het extra tijd om elk nieuwsbericht langs te gaan. Voor mensen die blind of slechtziend zijn is het niet duidelijk dat de 3 links naar dezelfde pagina wijzen. Het is een best practice om het aantal links op één nieuwsbericht te beperken tot éénmaal de focus erop in plaats van 3. Voor dit succescriterium geldt dat de link naar de pagina eenduidig is. Probeer één link te gebruiken voor elk nieuwsblok.
Op pagina https://brabantstad.nl/nieuws-brabantstad/ staan nieuwsblokken Deze hebben elk een kopje. Sommige van de kopjes komen overeen met de kop van de pagina waarnaartoe wordt gelinkt. Bij sommige wijken de kopjes af. Zo heeft het bericht met "Transfernieuws" een link naar een pagina "BrabantStad neemt afscheid van Mieke en verwelkomt Mijntje als programmaleider", waar het woord Transfernieuws niet voorkomt.
Op pagina https://brabantstad.nl/?s=brabant zijn de vierkante lege blokken voor de zoekresultaten links. Deze hebben geen toegevoegde waarde. Ook bevat elk zoekresultaat veel links, dit is onoverzichtelijk en onduidelijk. Zorg ervoor dat er alleen een link naar het zoekresultaat aanwezig is.
Op pagina https://brabantstad.nl/brabant-stoomt-mkb-klaar-voor-data/ en https://brabantstad.nl/bezoek-brabantstad-op-de-provada/ staan rechts onderaan de tekst twee lege blokjes met links eromheen. Zorg voor een duidelijk zichtbare link die de linktekst weergeeft, of verwijder de links.
Op pagina’s https://brabantstad.nl/lancering-sensrnet/, https://brabantstad.nl/bezoek-brabantstad-op-de-provada/ en https://brabantstad.nl/brabant-stoomt-mkb-klaar-voor-data/ staat onder de eerste afbeelding in de hoofdinhoud een link met een tekstballon-icoon. De link bevat geen linktekst. Zorg ervoor dat de link een linktekst krijgt die het linkdoel duidelijk beschrijft.
Op pagina https://brabantstad.nl/nieuws-brabantstad/ staat rechts naast de paginanummers een pijltje. Deze heeft als linktekst het groter-dan teken (>). Zorg voor een duidelijke linktekst, bijv. “Ga naar de volgende pagina”. Een mogelijkheid is om het groter-dan teken te verwijderen en een afbeelding van een pijltje te plaatsen met deze tekst als alternatieve tekst. Hetzelfde geldt uiteraard voor het pijltje naar links, links van de paginering. Zorg ook dat er voor hulpsoftware in plaats van alleen cijfers meer informatie beschikbaar is, bijvoorbeeld “Pagina 1 van 5”, waarbij het eerste cijfer het nummer van de huidige pagina aangeeft en het tweede cijfer het totaal aantal pagina’s.
Op pagina https://brabantstad.nl/brabant-stoomt-mkb-klaar-voor-data/ staat onderaan in de tekst de link “Lees hier”. Deze linktekst biedt niet voldoende informatie. Beter zou zijn om de link te plaatsen om de tekst “een artikel uit het Brabants Dagblad”. Dan kan de tekst “Lees hier het volledige artikel.” volledig weggelaten worden.
Op de pagina https://brabantstad.nl/brabant-stoomt-mkb-klaar-voor-data/ zijn onder het bericht social-media-knoppen geplaatst. Geen van de links heeft een goede naam. Zorg ervoor dat duidelijk is wat deze links doen.
Dit komt ook voor op de pagina’s:
- https://brabantstad.nl/lancering-sensrnet/,
- https://brabantstad.nl/bezoek-brabantstad-op-de-provada/
Het is ook beter om van deze links knoppen te maken omdat er een popup wordt geopend en niet ergens naar toe wordt genavigeerd.
2.4.5 Meerdere manieren (Niveau AA)
Er is meer dan één manier beschikbaar om een webpagina binnen een verzameling webpagina's te vinden, behalve wanneer de webpagina het resultaat is van, of een stap in, een proces.
Informatie over succescriterium 2.4.5 Meerdere manieren
Uitkomst: Voldoende
2.4.6 Koppen en labels (Niveau AA)
Koppen en labels beschrijven het onderwerp of doel.
Informatie over succescriterium 2.4.6 Koppen en labels
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://brabantstad.nl/stedelijke-agenda/ staat in de rechterkolom boven de nieuwsberichten de <h2> kop “Recent”. Deze geeft onvoldoende informatie over de inhoud eronder. Beter zou bijv. zijn “Recent nieuws”.
Op pagina https://brabantstad.nl/stedelijke-agenda/ staat in de middelste kolom de tekst “Zes summits”. Deze tekst geeft geen duidelijke beschrijving van de inhoud eronder. Zorg voor een duidelijke beschrijving van de inhoud eronder. Zie ook succescriterium 1.3.1.
Op pagina https://brabantstad.nl/?s=brabant bevat de <h1> kop de tekst “Search”. Behalve dat de tekst Engelstalig is beschrijft deze niet duidelijk de inhoud eronder. Beter zou bijvoorbeeld zijn: “# Zoekresultaten voor zoekopdracht”, waarbij # het aantal zoekresultaten weergeeft en zoekopdracht de tekst waraop de bezoeker gezocht heeft.
2.4.7 Focus zichtbaar (Niveau AA)
Elke gebruikersinterface die met een toetsenbord te bedienen is, heeft een bedieningswijze waarbij de indicator van de toetsenbordfocus zichtbaar is.
Informatie over succescriterium 2.4.7 Focus zichtbaar
Uitkomst: Onvoldoende
Bevindingen: Op elke pagina ontbreken zichtbare focusindicatoren voor knoppen, links en formuliervelden. Voor ziende toetsenbordgebruikers is het belangrijk dat het visueel duidelijk is welk element op de pagina focus heeft. Zorg er daarom voor dat altijd visueel zichtbaar is waar de toetsenbordfocus zich bevindt, wanneer met het toetsenbord wordt genavigeerd. Houdt er rekening mee dat deze zomer een nieuwe versie van WCAG verschrijnt, versie 2.2. Daarmee wordt strikter naar de focuszichtbaarheid gecontroleerd.
2.5 Input modaliteiten
2.5.1 Aanwijzergebaren (Niveau A)
Alle functionaliteit waarmee bij de bediening gebruik wordt gemaakt van meerpunts- of padgebaseerde gebaren, kan worden bediend met een enkele aanwijzer zonder een padgebaseerd gebaar, tenzij een meerpunts- of padgebaseerd gebaar essentieel is.
Informatie over succescriterium 2.5.1 Aanwijzergebaren
Uitkomst: Niet aanwezig
2.5.2 Aanwijzerannulering (Niveau A)
Voor functionaliteit die kan worden bediend met een enkele aanwijzer, geldt ten minste één van de volgende zaken:
- Geen down-event: Het down-event van de aanwijzer wordt niet gebruikt om enig onderdeel van de functie uit te voeren;
- Afbreken of ongedaan maken: De functie wordt voltooid door het up-event en er is een mechanisme beschikbaar om de functie af te breken voordat deze wordt voltooid of om de functie ongedaan te maken als deze is voltooid;
- Up reversal: Met het up-event wordt elk resultaat van het voorgaande down-event ongedaan gemaakt;
- Essentieel: Het voltooien van de functie met het down-event is essentieel.
Informatie over succescriterium 2.5.2 Aanwijzerannulering
Uitkomst: Niet aanwezig
2.5.3 Label in naam (Niveau A)
Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.
Informatie over succescriterium 2.5.3 Label in naam
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://brabantstad.nl/ bevindt zich een link die de zichtbare tekst “De stedelijke agenda van Brabant in zes hoofdpunten” bevat. De naam bevat niet de zichtbare tekst, maar slechts het title-attribuut met de tekst “thuis”. Dit is ook het geval voor de zes links in de gekleurde blokken daaronder. Ook hier komt de zichtbare tekst niet overeen met de tekst in het title-attribuut. Maak geen gebruik van het title-attribuut. Zie ook SC 1.4.5.
Op pagina https://brabantstad.nl/stedelijke-agenda/ komen de zichtbare teksten van de links in de gekleurde blokken niet overeen met de teksten in het title-attribuut. Maak geen gebruik van het title-attribuut. Deze worden slecht ondersteund door hulpsoftware. Zorg voor goede alternatieve tekst of beter, maak de blokken in HTML met echte tekst. Zie ook SC 1.4.5.
Op pagina https://brabantstad.nl/ons-netwerk/ staan er links op de afbeeldingen met plaatsnamen, waaronder “Breda” en “Eindhoven”. De naam bevat echter niet de zichtbare tekst, maar slechts het title-attribuut met de tekst “ons netwerk”. Maak geen gebruik van het title-attribuut. Deze worden slecht ondersteund door hulpsoftware. Zorg voor goede alternatieve tekst of beter, gebruik echte tekst. Zie ook SC 1.4.5.
2.5.4 Bewegingsactivering (Niveau A)
Functionaliteit die kan worden bediend door de beweging van een apparaat of beweging van een gebruiker, kan ook worden bediend met componenten van de gebruikersinterface. De reactie op de beweging kan worden uitgeschakeld om onbedoelde activering te voorkomen, behalve wanneer:
- Ondersteunde interface: De beweging wordt gebruikt om de functionaliteit te bedienen via een door toegankelijkheid ondersteunde interface;
- Essentieel: De beweging is essentieel voor de functie en wanneer de reactie op de beweging wordt uitgeschakeld, wordt de activiteit ongeldig gemaakt.
Informatie over succescriterium 2.5.4 Bewegingsactivering
Uitkomst: Niet aanwezig
3. Begrijpelijk
3.1 Leesbaar
3.1.1 Taal van de pagina (Niveau A)
De standaard menselijke taal van elke webpagina kan door software bepaald worden.
Informatie over succescriterium 3.1.1 Taal van de pagina
Uitkomst: Onvoldoende
Bevindingen: In het PDF-bestand https://brabantstad.nl/wp-content/uploads/2019/02/privacyregeling.pdf ontbreekt de taalaanduiding "Nederlands". De taal hoort ingesteld te worden, zodat hulpsoftware de informatie uit het bestand in de correcte taal kan overdragen aan de bezoeker.
3.1.2 Taal van onderdelen (Niveau AA)
De menselijke taal van elke passage of zin in de content kan door software bepaald worden, behalve waar het gaat om eigennamen, technische termen, woorden uit een onbepaalde taal en woorden of zinsdelen die deel zijn gaan uitmaken van het jargon van de onmiddellijk omringende tekst.
Informatie over succescriterium 3.1.2 Taal van onderdelen
Uitkomst: Onvoldoende
Bevindingen: Pagina https://brabantstad.nl/nietgevonden is een Nederlandstalige pagina, maar bevat ook Engelstalige teksten. Wanneer gezocht wordt met het zoekformulier en er geen zoekresultaten zijn, verschijnen er Engelstalige meldingen, nl. de teksten “Search” en “Sorry, Nothing found! Try searching a different phrase.”. Bij deze teksten ontbreekt de taalwissel naar het Engels (lang="en"). Beter is om deze pagina volledig in het Nederlands te presenteren.
Op de pagina https://brabantstad.nl/?s=brabant Is een kop 1 opgenomen met een Engelse tekst "Search". De taalwissel ontbreekt, maar beter is om de titel begrijpelijk te maken voor mensen die geen Engels kunnen lezen. Zie ook SC 2.4.6
3.2 Voorspelbaar
3.2.1 Bij focus (Niveau A)
Als een component van de gebruikersinterface de focus krijgt, dan veroorzaakt dat geen contextwijziging.
Informatie over succescriterium 3.2.1 Bij focus
Uitkomst: Onvoldoende
Bevindingen: Op de pagina https://brabantstad.nl/nieuws-brabantstad/ is de mogelijkheid om nieuws te filteren op maand en jaar. Als je bij "Maand selecteren" met de pijltoets naar beneden gaat wordt direct de pagina ververst met de eerste keuze. De focus komt daardoor bovenin de pagina. Mensen kunnen daardoor gedesorienteerd raken. Maak gebruik van een knop om de filtering uit te voeren of gebruik asynchrone JavaScript-functionaliteit die de selectie aanpast. Gebruik bij dit laatste ook een "live-region" waar je aan de gebruiker duidelijk maakt dat er iets is gewijzigd (via hulpsoftware).
3.2.2 Bij input (Niveau A)
Verandering van de instelling van een component van de gebruikersinterface veroorzaakt niet automatisch een contextwijziging, tenzij de gebruiker geïnformeerd is over het gedrag vóór het gebruik van de component.
Informatie over succescriterium 3.2.2 Bij input
Uitkomst: Voldoende
3.2.3 Consistente navigatie (Niveau AA)
Navigatiemechanismen, die op meerdere webpagina's binnen een verzameling webpagina's herhaald worden, komen elke keer dat ze worden herhaald in dezelfde relatieve volgorde voor, tenzij een verandering wordt geïnitieerd door de gebruiker.
Informatie over succescriterium 3.2.3 Consistente navigatie
Uitkomst: Voldoende
3.2.4 Consistente identificatie (Niveau AA)
Componenten die dezelfde functionaliteit hebben binnen een verzameling webpagina's worden consistent geïdentificeerd.
Informatie over succescriterium 3.2.4 Consistente identificatie
Uitkomst: Onvoldoende
Bevindingen: Op de pagina’s https://brabantstad.nl/, https://brabantstad.nl/stedelijke-agenda/ en https://brabantstad.nl/ons-netwerk/ staan zes gekleurde blokken met links. De toegankelijk naam van de zes links is steeds gelijk aan de naam van de pagina. Dus op pagina https://brabantstad.nl/ is dat “thuis”, op https://brabantstad.nl/stedelijke-agenda/ is “stedelijke agenda” en op pagina https://brabantstad.nl/ons-netwerk/ is dat “ons netwerk”. Zorg ervoor dat op al deze pagina’s de link met de zichtbare tekst “digitale stad” de toegankelijke naam “digitale stad” krijgt etc. Zie ook succescriterium 2.5.3.
3.3 Assistentie bij invoer
3.3.1 Foutidentificatie (Niveau A)
Als een invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en wordt de fout tekstueel aan de gebruiker meegedeeld.
Informatie over succescriterium 3.3.1 Foutidentificatie
Uitkomst: Onvoldoende
Bevindingen: Als in het contactformulier op pagina https://brabantstad.nl/contact/ verplichte velden worden leeg gelaten, dan verschijnt onder de formuliervelden de melding "Dit veld is verplicht". Dit is een instructie en geen foutmelding. Een correcte foutmelding is: "Het veld is niet ingevuld.". Combineer dit met SC 3.3.2 en 3.3.3 zodat de instructie en hoe de fout te herstelle is duidelijk is.
Als in het contactformulier op pagina https://brabantstad.nl/contact/ formuliervelden niet of niet correct zijn ingevuld, worden er na het verzenden van het formulier bij de betreffende velden foutmeldingen getoond. Ook onder het formulier wordt een algemene melding getoond met de tekst “Een of meer velden bevatten een fout. Graag corrigeren en opnieuw proberen.” Visueel is het duidelijk welke velden niet correct zijn ingevuld. Echter, voor mensen die afhankelijk zijn van hulpsoftware is het niet duidelijk welke melding bij welk formulierveld hoort. Alle meldingen met het aria-attribuut (role=”alert”) worden namelijk achter elkaar voorgelezen. Zet de algemene foutmelding bovenin het formulier eventueel met de veldnamen met fouten en de foutmeldingen op de velden. De foutmeldingen vlak onder de formuliervelden kunnen wel blijven staan. Verwijder dan wel het aria-attribuut (role=”alert”) en zorg ervoor dat de meldingen programmatisch gekoppeld zijn met de formuliervelden. Dit kan bijvoorbeeld worden gedaan met het aria-attribuut “aria-describedby”. Zie ook SC 4.1.2.
Als het formulier op pagina https://brabantstad.nl/contact/ succesvol wordt verzonden verschijnt onder het formulier de melding “Bedankt voor je bericht. Het is verzonden.”. Zorg ervoor dat deze melding bovenin het formulier getoond wordt en zorg ervoor dat de leescursor en focus vooraan het formulier staan.
Op elke pagina wordt bij het eerste bezoek ervan het inschrijfformulier voor de nieuwsbrief getoond. Wanneer de verplichte velden worden leeg gelaten, verschijnt na het verzenden van het formulier alleen een CSS-afbeelding met een waarschuwingsteken in de formuliervelden. Dit is voor alle gebruikers een probleem. Zorg ervoor dat er een foutmelding is die duidelijk beschrijft wat er is fout gegaan en geef indien nodig ook een instructie hoe een en ander op te lossen.
3.3.2 Labels of instructies (Niveau A)
Als de content gebruikersinvoer vereist, dan worden labels of instructies geleverd.
Informatie over succescriterium 3.3.2 Labels of instructies
Uitkomst: Onvoldoende
Bevindingen: In het contactformulier op pagina https://brabantstad.nl/contact/ en in het inschrijfformulier voor de nieuwsbrief in het pop-up venster op elke pagina ontbreken zichtbare labels bij alle tekstvelden. Ter vervanging ervan is gebruik gemaakt van placeholder-tekst. Placeholder-tekst is niet bedoeld om een zichtbaar label te vervangen. De placeholder-tekst verdwijnt namelijk zodra het tekstveld focus ontvangt of wanneer men begint te typen. De tekst moet permanent in beeld blijven, dus gebruik een label.
In het contactformulier op pagina https://brabantstad.nl/contact/ zijn verplichte velden gemarkeerd met een (*) asterisk. Onder het formulier wordt vermeld wat de betekenis van de asterisk (*) is. Dat is niet correct, deze melding dient bovenaan het formulier geplaatst te worden. Ook kan de melding duidelijker, deze is nu “* Verplicht veld”, maar beter zou zijn “Verplichte velden zijn gemarkeerd met een (*)”. Zorg er ook voor dat het sterretje bij elk veld een alternatieve tekst heeft. De asterisk wordt niet altijd door elke screenreader voorgelezen.
Onderin het formulier op pagina https://brabantstad.nl/contact/ staan twee radiobuttons, erachter staat een tekst die dient als label met twee asterisken (**) erachter. Het gaat hier echter ook om een verplicht formulierveld en dat is nu niet duidelijk. Zorg ervoor dat er ook een enkele asterisk (*) achter deze tekst wordt geplaatst. De melding “In onze privacyverklaring kunt u lezen hoe wij met uw gegevens omgaan.” die geassocieerd is met de twee asterisken kan beter programmatisch gekoppeld worden met de radiobuttons. Dit kan worden gedaan met het aria-attribuut “aria-describedby”. Daarmee is de melding ook beschikbaar voor mensen die afhankelijk zijn van hulpsoftware.
3.3.3 Foutsuggestie (Niveau AA)
Als een invoerfout automatisch ontdekt wordt en suggesties voor verbetering bekend zijn, dan worden de suggesties aan de gebruiker geleverd, tenzij dit de beveiliging of het doel van de content in gevaar zou brengen.
Informatie over succescriterium 3.3.3 Foutsuggestie
Uitkomst: Onvoldoende
Bevindingen: Wanneer er in het formulier op pagina https://brabantstad.nl/contact/ het veld 'Uw E-mail' een ongeldige waarde wordt ingevoerd, dan verschijnt de foutmelding: " Het ingevoerde e-mailadres is onjuist.". Hetzelfde geldt voor het veld ‘Uw telefoonnummer’, daar verschijnt de melding “Het telefoonnummer is ongeldig.”. Suggesties die aangeven hoe de velden dan wel ingevuld dienen te worden ontbreken hier.
3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (Niveau AA)
Voor webpagina's die wettelijke verplichtingen of financiële transacties voor de gebruiker uitvoeren, die, door de gebruiker te beheren gegevens in gegevensopslagplaatsen verwijderen of wijzigen, of die antwoorden van de gebruiker verzenden, geldt minstens één van de volgende zaken:
- Omkeerbaar: Verzendingen kunnen ongedaan gemaakt worden.
- Gecontroleerd: Door de gebruiker ingevoerde gegevens worden gecontroleerd op invoerfouten en de gebruiker wordt de mogelijkheid gegeven om ze te verbeteren.
- Bevestigd: Er is een mechanisme beschikbaar voor het beoordelen, bevestigen en verbeteren van informatie voordat de verzending wordt voltooid.
Informatie over succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)
Uitkomst: Voldoende
4. Robuust
4.1 Compatibel
4.1.1 Parsen (Niveau A)
In content die geïmplementeerd is met opmaaktalen hebben elementen volledige begin- en eindtags, zijn elementen genest volgens hun specificatie, bevatten elementen geen dubbele attributen en zijn alle ID's uniek, behalve waar de specificatie deze eigenschappen toelaat.
Informatie over succescriterium 4.1.1 Parsen
Uitkomst: Onvoldoende
Bevindingen: Op pagina https://brabantstad.nl/bezoek-brabantstad-op-de-provada/ zit in de HTML een element waarop 2x een class is gezet: <div class="theme-content " id="blog-entry-2435" class="post-2435 post ... Dit kan gevolgen hebben voor de werking van de pagina. Zorg ervoor dat elke element maximaal 1 class-attribuut bevat. Dit komt op meerdere pagina's voor zoals hier in de regel die begint met <div class="theme-content " op de pagina https://brabantstad.nl/lancering-sensrnet/.
Op pagina https://brabantstad.nl/?s=brabant bevat een <ul> element een aantal <span> elementen en <a> elementen. Dit is niet correct en deze dienen te worden vervangen door het <li> element.
4.1.2 Naam, rol, waarde (Niveau A)
Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën.
Informatie over succescriterium 4.1.2 Naam, rol, waarde
Uitkomst: Onvoldoende
Bevindingen: Op de nieuwspagina https://brabantstad.nl/nieuws-brabantstad/ staan onderaan de pagina blokjes met cijfers. Het blokje van de pagina die actief is, wordt in een andere kleur weergegeven dan de blokjes die niet actief zijn. Blinden en slechtzienden zien deze informatie niet of slecht. Gebruik aria-current=”page” of een verborgen tekst 'Huidige pagina' om ook aan hulpsoftware duidelijk te maken op welke pagina de gebruiker zich bevindt.
Op pagina’s https://brabantstad.nl/lancering-sensrnet/, https://brabantstad.nl/bezoek-brabantstad-op-de-provada/ en https://brabantstad.nl/brabant-stoomt-mkb-klaar-voor-data/ staan onder de eerste afbeelding in de hoofdinhoud twee symbolen, te weten een hartje en een tekstballon. Het hartje is waarschijnlijk bedoeld om de afbeelding erboven te ‘liken’, maar is niet functioneel. De rol van de knop ontbreekt. Dit komt omdat er in de HTML gebruik is gemaakt van een <div>-element in plaats van een <button>-element.
Wanneer in het contactformulier op pagina https://brabantstad.nl/contact/ een veld niet goed is ingevuld, dan verschijnt onder het veld de foutmelding. Deze melding is niet beschikbaar voor screenreaders vanwege het onterecht gebruik van aria-hidden="true". Zorg ervoor dat de foutmelding leesbaar is door deze aria-code weg te laten. Omdat de tekst na het invoerveld moet je er ook voor zorgen dat deze foutmelding voorgelezen wordt direct voor het veld of op het moment dat het veld de focus krijgt. Dit kan door bijvoorbeeld aria-describedby te gebruiken op het invoerveld.
4.1.3 Statusberichten (Niveau AA)
In content die is geïmplementeerd met opmaaktalen kunnen statusberichten door software bepaald worden met behulp van rol (role) of eigenschappen (properties), zodat hulptechnologieën de berichten aan de gebruiker kunnen presenteren zonder dat ze de focus krijgen.
Informatie over succescriterium 4.1.3 Statusberichten
Uitkomst: Onvoldoende
Bevindingen: Op de pagina https://brabantstad.nl/nieuws-brabantstad/ zijn blokjes met paginanummers onderaan de pagina vlak boven "Archief nieuwsberichten". Zodra je een paginanummer kiest scroll je naar boven. De content wijzigt, maar voor blinden die een screenreader gebruiken is niet duidelijk dat er iets verandert op het scherm.
Op de pagina https://brabantstad.nl/contact/ wordt het formulier volledig via JavaScript bediend. Dat betekent dat er bij versturen van het formulier de pagina niet opnieuw geladen wordt. Er volgt een melding, maar deze is niet helemaal duidelijk. Zie ook SC 3.3.1. Zorg dat duidelijk is dat het formulier goed of niet goed verstuurd is en/of plaats de leescursor/focus zodanig dat deze informatie direct voorgelezen wordt. Bij een foutmelding is zorg je ervoor dat je weer vooraan het formulier staat zodat de bezoeker vanaf vooraan alle problemen in het formulier zelf kan oplossen.
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
- https://brabantstad.nl/
- https://brabantstad.nl/contact/
- https://brabantstad.nl/?s=brabant
- https://brabantstad.nl/brabantring/
- https://brabantstad.nl/nietgevonden
- https://brabantstad.nl/stedelijke-agenda/
- https://brabantstad.nl/ons-netwerk/
- https://brabantstad.nl/kalender/
- https://brabantstad.nl/nieuws-brabantstad/
- https://brabantstad.nl/lancering-sensrnet/
- https://brabantstad.nl/brabant-stoomt-mkb-klaar-voor-data/
- https://brabantstad.nl/digitale-stad
- https://brabantstad.nl/wp-content/uploads/2019/02/privacyregeling.pdf
- https://brabantstad.nl/wp-content/uploads/2021/03/aftrap-brabantdiner-1.pdf
- https://brabantstad.nl/bezoek-brabantstad-op-de-provada/
- https://brabantstad.nl/programmabureau-brabantstad/
Ondersteunende technieken
Webbrowsers (useragents) en andere software
Bij dit onderzoek is de volgende software gebruikt:- Chrome, versie 90
- Firefox, versie 88
- Edge, versie 90
- Acrobat PRO DC
Bronnen
-
Website Accessibility Conformance Evaluation Methodology (WCAG-EM) Overview
www.w3.org/WAI/eval/conformance (Engels) -
Web Content Accessibility Guidelines (WCAG) 2.1 (Geautoriseerde Nederlandse vertaling)
www.w3.org/Translations/WCAG21-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.