Issues:
Audit digitale toegankelijkheid website Brabant Magazine Nr. 50

(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: Als een zoekterm ingevuld wordt in het zoekvenster, bijvoorbeeld 'Brabant' staat boven elk zoekresultaat een afbeelding met als toegankelijke naam de titel van het artikel. Dit is dubbelop omdat de titel van het artikel al zichtbaar is, en beschrijft de afbeelding niet. Pas de alternatieve tekst aan of maak de afbeelding eventueel decoratief door een leeg alt-attribuut toe te voegen binnen het img-element.

Bevinding 2: Op pagina publicaties.brabant.nl/bm50/ staat het logo van de Provincie Noord-Brabant. Dit logo heeft geen alternatieve tekst. Zorg ervoor dat dit logo een alternatieve tekst krijgt waar ministens de tekst op het logo in staat.

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 3: Op de pagina publicaties.brabant.nl/bm50/verkiezingen is er in de video 'Brabant kiest' op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 0:00. Er ontbreekt uitgeschreven tekst en er is ook geen voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van een screenreader niet weten wat er wordt getoond in de video. Zet deze en andere informatie in een transcript. Of maak gebruik van een extra audiospoor om ook te voldoen aan SC 1.2.5. Hetzelfde komt vaker voor op de website bijvoorbeeld op pagina publicaties.brabant.nl/bm50/video in de video 'Subsidie voor collectieve wooninitiatieven' waar op 0:09 tekst in beeld is.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Bevinding 4: Op de pagina publicaties.brabant.nl/bm50/verkiezingen is er in de video 'Brabant kiest' op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 0:00. Er ontbreekt een voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien niet weten wat er wordt getoond in de video. Laat de teksten in beeld uitspreken door een voice-over of maak gebruik van een audiodescriptie. Hetzelfde komt vaker voor in de website bijvoorbeeld op pagina publicaties.brabant.nl/bm50/video in de video 'Subsidie voor collectieve wooninitiatieven' waar op 0:09 tekst in beeld is.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Bevinding 5: Op pagina publicaties.brabant.nl/bm50/circulaire-economie wordt een introductie tekst opgemaakt als een kop van niveau 4. Bezoekers die gebruikmaken van voorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Daarom mag het kop-element alleen worden gebruikt voor een korte zin die de informatie van de onderliggende content beschrijven. Maak van deze kop gewone tekst. Hetzelfde komt vaker voor op de website. Bijvoorbeeld op de pagina publicaties.brabant.nl/bm50/twee-meningen staan citaten die opgemaakt zijn als kop.

Bevinding 6: Op pagina publicaties.brabant.nl/bm50/circulaire-economie staan koppen die niet als kop zijn opgemaakt zoals 'Schoonmaken met je schillen' en 'Frietje Precies'. Wanneer iets een visuele kop is en in de code niet is opgemaakt met een kop-element kan hulpsoftware niet aangeven dat hier een kop staat. Zorg ervoor dat alles wat visueel een kop is ook is opgemaakt met een kop-element. Hetzelfde komt vaker voor op de website, bijvoorbeeld op pagina publicaties.brabant.nl/bm50/colofon bij de koppen zoals 'CONTACT' en 'EINDREDACTIE EN REALISATIE'.

Bevinding 7: Advies: Op pagina publicaties.brabant.nl/bm50/video heeft de titel 'Subsidie voor collectieve woonvormen' kopniveau 1. Deze titel beschrijft de pagina niet. Kop niveau 1 kan het beste gereserveerd worden voor de titel van de hele pagina, in dit geval 'Check hier de beste video's uit Brabant'.

Bevinding 8: Advies: Op pagina publicaties.brabant.nl/bm50/circulaire-economie staat twee keer een kop op niveau 1 en worden kopniveaus overgeslagen. Hulpsoftware maakt gebruik van de koppenstructuur van een pagina om de inhoud overzichtelijk weer te geven, bijvoorbeeld in een koppenlijst. Het is daarom beter om een goede koppenstructuur toe te passen op de pagina.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Bevinding 9: Op de pagina publicaties.brabant.nl/bm50/video staan blokken met een video, een kop en tekst. Als de blokken achter elkaar worden voorgelezen is het niet duidelijk bij welke kop de video hoort. Zet de koppen vooraan in de HTML-code en zet hierachter de video. Visueel mag deze indeling wel aangehouden worden. Eenzelfde probleem komt voor op de inhoudpagina publicaties.brabant.nl/bm50/inhoud, waar voor de titel extra informatie wordt gegeven zoals 'RUIMTE'. Dit probleem komt ook voor bij de zoekresultaten die verschijnen wanneer een zoekterm ingevuld wordt waar eerst een afbeelding, dan een paginanummer en dan pas de titel van het resultaat staat.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Bevinding 10: Op pagina publicaties.brabant.nl/bm50/verkiezingen staat een witte tekst op een roze achtergrond (HEX #FC819E). Deze tekst heeft een te laag contrast. De contrastverhouding is 2,4:1, waar dit 4,5:1 moet zijn voor de kleine tekst en 3:1 voor de grote tekst zoals de titel 'Wat doet de provincie?'. Dezelfde kleur roze tekst op witte achtergrond heeft ook een te laag contrast.
Op dezelfde pagina hebben de kleuren oranje (HEX #FF8927) met een contrastverhouding van 2,4:1, groen (HEX #0EB862) met een contratsverhouding van 2,6:1 en lila (HEX #747BFF) met een contrastverhouding van 3,5:1, ook een te laag contrast met de witte tekst of achtergrond. Zorg voor kleurencombinaties met voldoende contrast.
Hetzelfde komt op meerdere plaatsen in de website voor, bijvoorbeeld op pagina publicaties.brabant.nl/bm50/circulaire-economie heeft de lichtgroene tekst (HEX #AFCA0B) op witte achtergrond, een contrastverhouding van 1,9:1.

Bevinding 11: Op een pagina met een witte achtergrond zoals publicaties.brabant.nl/bm50/instagram heeft de witte tekst van de titel in de header, in dit geval 'Instagram', een te laag contrast met de lichtgrijze achtergrond (HEX #CCCCCC). De contrastverhouding is 1,6:1, waar dit 4,5:1 moet zijn.

Bevinding 12: Op pagina publicaties.brabant.nl/bm50/inhoud staan witte teksten voor afbeeldingen. Door de lichte achtergrondafbeeldingen hebben veel van deze teksten onvoldoende contrast, bijvoorbeeld de tekst 'Brabant Video' heeft een contratsverhouding van 1,3:1 met de achtergrond (HEX #DEDEDE). Zorg ervoor dat alle teksten voldoende contrast hebben met de achtergrond.

Bevinding 13: Advies: Op publicaties.brabant.nl/bm50/ zijn witte en rode teksten geplaatst voor een video. Op sommige punten in de video zijn deze teksten slecht leesbaar, bijvoorbeeld omdat ze voor een lichte achtergrond zijn geplaatst. Zorg ervoor dat teksten altijd voldoende contrast hebben met hun achtergrond. Het is daarom beter om ervoor te zorgen dat teksten altijd voor een vaste achtergrond, bestaande uit één kleur, staan.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Bevinding 14: Op pagina publicaties.brabant.nl/bm50/instagram staat een afbeelding met onder andere de tekst 'omroepbrabant en 9 anderen vinden dit leuk.'. Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. De tekst op de afbeelding komt verder niet voor op de pagina. Plaats deze tekst daarom als HTML-tekst op de pagina.
Op andere pagina's staan ook afbeeldingen van tekst die verder niet voorkomen op de pagina, bijvoorbeeld bij de tekst 'Brabant kiest' op pagina publicaties.brabant.nl/bm50/verkiezingen.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Bevinding 15: Advies: Als op pagina publicaties.brabant.nl/bm50/video de video op de achtergrond afspeelt, kan op sommige momenten de knop naar de Inhoudsopgave onvoldoende contrast hebben met de achtergrond. Plaatst daarom liever geen content zoals knoppen of teksten over video's of afbeeldingen.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Bevinding 16: Als je op elke pagina over de pijltjes knoppen rechtsonder in beeld hovert met de muis, verschijnt er aanvullende content. De bezoeker kan deze content niet weghalen zonder de muis te bewegen of de focus met het toetsenbord te verplaatsen. Een bezoeker moet dit bijvoorbeeld met de escapetoets kunnen doen.

2. Bedienbaar

2.2 Genoeg tijd

2.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Bevinding 17: Op de pagina publicaties.brabant.nl/bm50/video staat een roterende titel: 'Check hier de beste / video's uit Brabant'. Er is geen mechanisme beschikbaar, of makkelijk bereikbaar, om de content te laten stoppen, te pauzeren of te verbergen. Voeg een mechanisme toe waarmee de gebruiker dat kan, of verwijder de content om dit probleem op te lossen.

Bevinding 18: Advies: Er is, bijvoorbeeld op pagina publicaties.brabant.nl/bm50/twee-meningen en publicaties.brabant.nl/bm50/video content die automatisch begint te spelen zoals bedoeld in dit criterium. Er is ook een mechanisme voor de gebruiker om dit te pauzeren, zodat aan dit criterium is voldaan. De knop om dit te doen is verstopt achter een toegankelijkheidsicoon. Niet elke gebruiker die het beeld zou willen stoppen beseft dat dit iets te maken kan hebben met toegankelijkheid. Het zou beter zijn om bijvoorbeeld een pauze-icoon te gebruiken.

2.4 Navigeerbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Bevinding 19: De pagina publicaties.brabant.nl/bm50/instagram heeft als titel 'Instagram - BM50', dit beschrijft de inhoud van de pagina niet geheel. Alle Instagram posts gaan over #BrabantKiest en dat is ook de tekst van de kop van niveau 1. Geef een paginatitel die de inhoud van de pagina goed beschrijft.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Bevinding 20: Op elke pagina kan je met de tabtoets door de pagina navigeren. Nadat de links naar de vorige en volgende pagina focus hebben gekregen is het volgende element dat focus heeft de hele pagina. Er wordt in de HTML gebruikgemaakt van het attribuut tabindex=0 op in dit geval op een section-element met de pagina inhoud. Daardoor ontstaat er bij een onlogische focusvolgorde. Zorg dat de focusvolgorde door webpagina's logisch is, wanneer men met het toetsenbord navigeert. Plaats geen tabindex="0" op elementen die niet-interactief zijn en geen focus horen te krijgen. Hetzelfde komt vaker voor in de website, bijvoorbeeld als op de homepagina op de link 'WIN KAARTEN VOOR
EFTELING - DE TENTOONSTELLING' geklikt wordt open een venster waarin vier section-elementen met tabindex=0 voorkomen en bijvoorbeeld ook op de pagina hpublicaties.brabant.nl/bm50/video krijgen meerdere niet-actieve elementen focus.

Bevinding 21: Als met de knop 'inhoudsopgave' in de header van elke pagina het venster met de inhoud van de website is geopend, krijgt de link 'Pagina's' focus terwijl het geen interactief element is. Dat komt omdat het onderdeel van een tab lijst is met één element. Bij het openen van een nieuw venster hoort de knop 'sluiten' als eerste focus te krijgen en niet als laatste zoals nu het geval is. Zorg voor een logische focus volgorde waarbij niet-interactieve elementen geen focus krijgen.

Bevinding 22: Op pagina publicaties.brabant.nl/bm50/instagram staan i-frames met posts van Instagram, bijvoorbeeld de post van 'renateverheijen'. Bezoekers die met behulp van de tabtoets door de pagina navigeren moeten 14 keer op de tabtoets klikken voor één post waarbij 12 keer een link naar de zelfde profielpagina wordt gepasseerd. Zorg voor een logische focus volgorde.

Bevinding 23: Op pagina publicaties.brabant.nl/bm50/ loopt de focus volgorde niet logisch over de pagina. Na de skiplink krijgt eerst het toegankelijkheidsicoon focus, daarna pas de links en knoppen in de header. Ook krijgt de content op de pagina, zoals de link ''Twee meningen' over woningbouw' pas als laatst focus, terwijl dit midden op de pagina staat. Zorg ervoor dat de focus volgorde logisch over de pagina loopt, het is hierbij het best om de leesvolgorde aan te houden.
Dit komt voor op meerdere pagina's, bijvoorbeeld op publicaties.brabant.nl/bm50/landbouwinnovaties.

2.4.4 Linkdoel (in context) (Niveau A)

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Bevinding 24: Op pagina publicaties.brabant.nl/bm50/instagram staan links met de linktekst 'Profiel bekijken', maar elke link verwijst naar een andere pagina. Vermijd links met dezelfde naam maar die naar andere pagina's verwijzen, 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 de post waarnaar gelinkt wordt. Als visueel duidelijk is waar de link bij hoort hoeft deze aanvullende tekst niet visueel zichtbaar te zijn. Hetzelfde geldt voor de links met bijvoorbeeld de naam 'View more on Instagram' of 'like' op dezelfde pagina.

Bevinding 25: Op pagina publicaties.brabant.nl/bm50/verkiezingen staat een video 'Brabant kiest'. Het logo van de provincie linksboven is een link naar de YouTube pagina van de Provincie Noord-Brabant. De linktekst 'Photo image of Provincie Noord-Brabant' beschrijft het doel van de link niet goed. Hetzelfde geld voor de video 'Lijsttrekkers Provinciale Statenverkiezingen' op dezelfde pagina.

Bevinding 26: Op pagina publicaties.brabant.nl/bm50/circulaire-economie heeft een link naar het nieuwsartikel 'Grootschalige productie Prefab biobased huizen mogelijk' op de website www.brabant.nl de linktekst 'Meer informatie'. Deze linktekst beschrijft het doel 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.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Bevinding 27: Op pagina publicaties.brabant.nl/bm50/instagram zijn Instagram posts via een iframe geplaatst. Het title-attribuut van het iframe beschrijft de inhoud niet. Bijvoorbeeld de titel van de eerste post is 'www.instagram.com/p/CpXw9CzNq25/embed'. Geef in de titel een goede omschrijving van de inhoud van het iframe, bijvoorbeeld "Instagram post van renateverheijen".

Bevinding 28: Op elke pagina staat een link die gelabeld is met het toegankelijkheidsicoon. Wanneer deze link is geopend is een knop zichtbaar waarmee bezoekers video's kunnen pauzeren. Deze knop heeft het visuele label 'Autoplay videos/GIFs'. Naast dat dit een Engelse tekst is (zie ook succescriterium 3.1.2), beschrijft dit label de onvoldoende wat de knop doet. Zorg ervoor dat het label van de knop duidelijk omschrijft wat de functie van de knop is.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Bevinding 29: Op elke pagina kan je met de tabtoets door de pagina navigeren. Nadat de links naar de vorige en volgende pagina's focus hebben gekregen is het volgende element dat focus heeft de hele pagina, maar dat is niet te zien. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk element de focus heeft door een duidelijke focusrand toe te voegen, of zorg er in dit geval voor dat dit element geen focus krijgt. Zie ook succescriterium 2.4.3.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Bevinding 30: Op elke pagina staat een link die gelabeld is met het toegankelijkheidsicoon. Wanneer deze link is geopend is een knop zichtbaar waarmee bezoekers video's kunnen pauzeren. De toegankelijke naam van deze knop is 'Pause', terwijl het visuele label 'Autoplay videos/GIFs' is. Wanneer de knop is geactiveerd verandert de toegankelijke naam naar 'Play'. Als het visuele label van knop niet voorkomt in de toegankelijke naam, is de knop moeilijk te activeren met spraakgestuurde bediening. Er is meer mis met het label van deze knop (zie ook succescriterium 2.4.6 en 3.1.2). Zorg er daarom voor dat deze knop een label krijgt dat de functie van de knop duidelijk beschrijft en dat dit label voorkomt in de toegankelijke naam van de knop.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Bevinding 31: Op elke pagina staat een link die gelabeld is met het toegankelijkheidsicoon. Deze link heeft de toegankelijke naam 'Accessibility options'. Ook is de content die de link toont zodra deze is uitgeklapt in het Engels. De taalaanduiding van elke pagina is Nederlands. Als Engelstalige content is geplaatst op een pagina met een Nederlandse taalaanduiding wordt dit niet correct voorgelezen door voorleessoftware. Zorg er daarom voor dat een taalwissel wordt aangegeven op de Engelse content, of vertaal de Engelstalige content naar het Nederlands.

Bevinding 32: Op publicaties.brabant.nl/bm50/ staan een zoekknop en een knop om audio te dempen. Deze knoppen hebben de Engelse toegankelijke namen 'Search' en 'Mute' terwijl de pagina een Nederlandse taalaanduiding heeft. Zorg ervoor dat deze knoppen een Nederlandse toegankelijke naam krijgen.
Deze knoppen met een Engelse toegankelijke naam komen voor op meerdere pagina's, bijvoorbeeld op publicaties.brabant.nl/bm50/video.

Bevinding 33: De skiplink op elke pagina is in het Engels, terwijl deze pagina's een Nederlandse taalaanduiding hebben. Vertaal de skiplink naar het Nederlands of geen een taalwissel aan op de skiplink.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Bevinding 34: De afbeelding van de knop 'Inhoudsopgave' is een SVG met een alternatieve tekst 'Menu icon'. Een SVG mag geen alt-attribuut bevatten. Dit kan problemen met hulpsoftware veroorzaken.

Bevinding 35: Op de homepagina heeft de link 'Meer informatie' onderaan de pagina een niet toegestaan attribuut actionid. Dit kan problemen met hulpsoftware veroorzaken. Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina publicaties.brabant.nl/bm50/verkiezingen bij de link 'waarismijnstemlokaal.nl'.

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://publicaties.brabant.nl/bm50/
• Colofon:
  https://publicaties.brabant.nl/bm50/colofon
• Inhoud:
  https://publicaties.brabant.nl/bm50/inhoud
• Pagina 3:
  https://publicaties.brabant.nl/bm50/landbouwinnovaties
• Pagina 4:
  https://publicaties.brabant.nl/bm50/verkiezingen
• Pagina 5:
  https://publicaties.brabant.nl/bm50/twee-meningen
• Pagina 6 Video:
  https://publicaties.brabant.nl/bm50/video
• Pagina 7:
  https://publicaties.brabant.nl/bm50/in-de-mix
• Pagina 9:
  https://publicaties.brabant.nl/bm50/instagram
• Pagina 8:
  https://publicaties.brabant.nl/bm50/circulaire-economie

Ondersteunende technieken

• HTML5
• CSS
• WAI-ARIA
• ECMAScript 5
• DOM
• 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.