Overzicht van bevindingen uit toegankelijkheidsaudits

Met toetsenbordbediening krijgt de mediaplayer als geheel geen focus. Dat moet wel, zodat mensen die het toetsenbord gebruiken de focusindicator zien. Dit gaan we bespreken met het bureau dat deze bevinding heeft gedaan. Deze bevinding is in onze ogen tegenstrijdig met de WCAG.

Op een pagina kan het contentelement zoeken in bekendmakingen geplaatst worden, waarmee bekendmakingen doorzocht kunnen worden. Als er geen resultaten zijn gevonden voor de zoekopdracht verschijnt het statusbericht "Geen bekendmakingen gevonden". Deze rol van een statusbericht moet programmatisch kunnen worden bepaald, zodat hulpsoftware deze informatie kan voorlezen. Dit is nu niet het geval. We bespreken met een toegankelijkheidsexpert hoe we hiermee omgaan.

In het contentelement follow-up contactpersonen zijn de verschillende manieren om contact op te nemen niet aan elkaar gelinkt. We bespreken dit met een toegankelijkheidsadviseur.

De foutmeldingen bij invoervelden van formulieren leggen niet uit wat er precies fout is gegaan met de invoer. 

We hebben de foutmeldingen van diverse applicaties onderzocht waarmee we koppelen. We zijn in overleg met de leveranciers achter de applicaties over de juiste manier van doorgeven van foutmeldingen in de koppelingen.

In de formulieren worden foutmeldingen vanuit de browser getoond. Deze melding zijn onvolledig en verdwijnen in sommige browsers. De browsermeldingen kunnen de bezoeker helpen. Formulieren krijgen nu een no-validate tag mee. Er gaat dan pas validatie plaatsvinden als formulier verstuurd wordt. Dit is een tijdelijke oplossing. De definitieve oplossing wordt besproken in het team.

Op meerdere plekken worden overbodige of onjuiste aria-attributen gebruikt, zoals de role "searchbox" op een invoerelement waar al type=search aan is toegevoegd, of een role="application" op een video element. Dit is een advies. Intern bespreken we nog wat we hiermee doen.

De titel van een link in de sitemap wordt herhaald via de mouse-over. Title-attribuut bij mouse-over verwijderen bij links in Sitemap. Deze werkzaamheden moeten ingepland worden.

In het contentelement Beslisboom werden opties weergegeven als radioknoppen, terwijl dit in werkelijkheid links waren. Dit kwam niet overeen met de visuele weergave en de verwachte functionaliteit. We hebben de radioknoppen aangepast naar linkjes. 

In de filtering zagen de filteropties eruit als checkboxes, terwijl het in werkelijkheid links waren. Dit kwam niet overeen met de verwachte werking en weergave. Voor alle varianten van filteropties (bekendmakingen, projecten, nieuws, evenementen en zoekresultaten) zijn inmiddels aangepaste ontwerpen gemaakt en geïmplementeerd in het concept.

Het probleem is hiermee opgelost en de weergave is nu in lijn met de ontwerpafspraken en verwachtingen van gebruikers.

Op de homepage worden meerdere decoratieve SVG-iconen gebruikt, zoals bij de link ‘Paspoort of identiteitskaart’. Deze iconen hadden standaard de rol img, waardoor ze zichtbaar zouden zijn voor schermlezers. Aangezien het hier om puur decoratieve elementen gaat, is dit niet wenselijk.

Om dit correct op te lossen, hebben we het attribuut aria-hidden="true" toegevoegd. Hierdoor worden de iconen genegeerd door schermlezers en functioneren ze nu zoals bedoeld: enkel als visuele ondersteuning.

Bij gebruik van het contentelement toegankelijkheidslabel viel de afbeelding van de toegankelijkheidsverklaring deels buiten het scherm wanneer dit werd verkleind. Hierdoor was de tekst niet voor alle gebruikers goed zichtbaar, omdat de afbeelding niet meeschaalde.

Dit probleem is inmiddels opgelost: de afbeelding schaalt nu correct mee met de schermgrootte en blijft volledig zichtbaar, ook in kleinere weergaven.

In de zoekresultaten wordt momenteel het <em>-element gebruikt om het zoekwoord visueel te benadrukken. Dit element is echter bedoeld voor het benadrukken van inhoudelijke nadruk en niet voor puur visuele opmaak, zoals cursieve tekst.

Uit de test blijkt dat de getoonde tekst afkomstig is van de pagina-inhoud zelf. Dit gebeurt wanneer er geen inhoud is ingevuld bij de velden abstract of description. In dat geval wordt automatisch een fallback gebruikt, waarbij de <em>-tag voorkomt.

Dit toegankelijkheidsprobleem kan eenvoudig worden voorkomen door als redacteur zelf de velden abstract of description correct in te vullen. Wanneer deze informatie goed is aangeleverd, wordt de fallback niet gebruikt en ontstaat er geen toegankelijkheidsprobleem.

Het tekstalternatief van het logo was niet optimaal en stond vaak ingesteld op “Logo Home”. Dit kan eenvoudig redactioneel aangepast worden door de alt-tekst aan te passen.

Een verbeterde suggestie voor de alt-tekst is:
“Logo gemeente [naam], ga naar de homepage.”

Deze aanpassing kan door jullie zelf worden doorgevoerd. Mocht je hulp nodig hebben bij het vinden van de juiste plek om dit aan te passen, neem dan gerust contact op met onze supportafdeling. We begeleiden je daar graag bij.

De tekst 'Scroll de tabel om meer te zien' is aangepast door aria-hidden="true" te verwijderen, zodat deze nu wordt voorgelezen door ondersteunende technologieën. Dit is afgestemd met het bureau om verschillende scenario’s te beoordelen. Omdat blinde gebruikers geen gebruik kunnen maken van scrollfunctionaliteit, was deze instructie voor hen niet noodzakelijk. Aangezien de software ook door ziende gebruikers wordt gebruikt, is ervoor gekozen om aria-hidden te verwijderen.

Op elke pagina staan skiplinks die geplaatst zijn in een nav-element met daarop het aria-label 'skipnav menu'. Voor sommige gebruikers van hulpsoftware is de term ‘skipnav’ onduidelijk. De benaming is aangepast naar 'skiplink menu'.

Bij een schermresolutie van 1280px bij 1024px en ingezoomd is op 400%, wordt het kruimelpad vervangen wordt door een terugpijl. Hierdoor gaat belangrijke informatie over de plek van de pagina in de structuur van de website verloren. Bij inzoomen en op mobiel blijft het broodkruimelpad intact. Het wordt dan een uitklapmenu.

Wanneer bezoekers inzoomen tot 300% en 400% op een pagina (bij een schermbreedte van 1280 bij 1024 pixels), verdwijnt het broodkruimelpad van de pagina en blijft hier alleen een link staan met de toegankelijke naam van de pagina. Ondanks dat meerdere links in het broodkruimelpad visueel verdwijnen staan ze nog steeds in de code. Hierdoor is het voor toetsenbordgebruiker mogelijk om focus te plaatsen op deze links. Hierbij wordt de focus niet visueel weergegeven en weten ziende toetsenbordgebruikers op dat moment niet welke elementen focus hebben. Dit issue is opgenomen in het verbeterde kruimelpad dat verschijnt bij inzoomen en op mobiel.

Als een pagina wordt bekeken op kleine schermen (320 px breed), wordt er een knop weergegeven met '...' in de broodkruimelnavigatie. De toegankelijke naam van deze knop is 'Meer'. Deze naam beschrijft echter niet duidelijk het doel van de knop. De toegankelijkheidsnaam is aangepast.

De tekst 'Meteen naar' en 'Zoek op' in de automatische zoeksuggesties worden niet voorgelezen door hulpsoftware. In de automatische zoeksuggesties is aria-hidden = true afgehaald van de tekst 'Meteen naar' en 'Zoek op'.

In de mediaplayer staat een checkbox waarmee toestemming kan worden gegeven voor de voorwaarden van YouTube. Deze beschikt over de toegankelijkheidsnaam "Onthoud mijn keuze. Uw keuze wordt opgeslagen op deze website totdat u uw browser sluit.". Dit is geen toereikend label, omdat hieruit niet duidelijk wordt wat het doel van de checkbox is. De toegankelijkheidsnaam is aangepast naar "Ik accepteer de voorwaarden van www.youtube.com".

Het contrast van de kleur rood van foutmeldingen in een formulier is net te laag. De kleur is aangepast.

De contrastkleur van uitgeschakelde paginering is te laag bij achtergrondkleur. Het contrast van uitgeschakelde paginering ten opzichte van de achtergrondkleur is aangepast.

Op het contactformulier vanuit TYPO3-forms is het nav-element gebruikt, terwijl dit niet nodig is. Het nav-element is verwijderd.

Bij filtering staat een knop 'Wissen'. De toegankelijkheidsnaam is 'Zet alle filters uit'. De teksten moeten met elkaar overeenkomen voor spraaksoftware. De toegankelijkheidsnaam is aangepast in "Alle filters wissen".

Achter een externe link staat een icoon dat aangeeft dat de link verwijst naar een externe pagina. Dit icoon wordt niet meegenomen in de toegankelijke naam van deze link. De svg-iconen voor links zijn op een andere manier voorzien van een alternatieve tekst.

Als een zoekresultatenpagina wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 400%, wordt het laatste socialemedia-icoon onder het kopje "Deel deze pagina" onzichtbaar doordat de knop om naar boven te scrollen erbovenop komt te staan. Het element ‘Deel deze pagina’ is uitgeschakeld op de zoekresultatenpagina.

Wanneer toetsenbordgebruikers navigeren over een pagina naar een mediaplayer komt een lichtblauwe focusrand te staan om de video. Op de witte achtergrond heeft deze focusrand onvoldoende contrast. Het kleur van de focusindicator is aangepast, zodat het contrast voldoet.

In de footer staat vaak een link met daarbij het logo van “X”. De link gaat naar Twitter en heeft dit ook in het aria-label staan (“Ga naar de Twitter-pagina van gebruikersnaam"). Dit kan beter aangepast worden zodat de website en het aria-label kloppen bij het zichtbare logo van “X” in plaats van Twitter. Het toegankelijkheidslabel is aangepast.

Op toptakenpagina's bij gebruik van een halve afbeelding valt de paginatitel over de foto bij inzoomen en de mobiele weergave. De titel is daardoor onleesbaar. De afbeelding vervalt vanaf het moment dat deze over de volledige breedte van de website getoond wordt.

Chevrons zijn niet goed gemarkeerd voor hulpsoftware. Role = img op chevrons bij toponderwerpen is weggehaald en vervangen door aria-hidden = true.

De toptaken op de homepage van toptaken websites hebben in de html geen relatie met elkaar. De onderlinge relatie is aangegeven in de code.

Bij gebruik van het contentelement laatste nieuws en nieuwscards staat de afbeelding die bij de koppen van de artikelen hoort in de code echter boven deze koptekst in plaats van eronder. Dit kan tot problemen leiden, omdat gebruikers kunnen denken dat deze content bij een andere bovenliggende kop hoort. Dit is vooral een probleem voor gebruikers die de webpagina niet visueel zien, maar afhankelijk zijn van de volgorde in de code, bijvoorbeeld bij het gebruik van hulpsoftware. Dit kan redactioneel opgelost worden door het alt-attribuut leeg te laten bij alle afbeeldingen in dit soort overzichten, zodat ze decoratief zijn.

Op de sitemappagina is gebruik te gemaakt van role="directory" op het ul-element. Deze rol heeft geen toegevoegde waarde voor gebruikers van hulpsoftware. Het role-attribuut is verwijderd van het ul-element.

In de evenemententabel staan meerdere links met dezelfde tekst "Meer info". Wanneer links naar verschillende bestemmingen verwijzen en op dezelfde pagina staan, mag de linktekst niet hetzelfde zijn. Linkteksten die binnen een pagina dezelfde tekst bevatten of nietszeggend zijn, zoals "Meer info", maken het doel van de link niet duidelijk. Dit probleem kunnen we niet oplossen in het huidige contentelement evenemententabel. Hiervoor kan het paginatype evenement worden gebruikt.

Op een homepage type standaard van een toptakenwebsite ontbreekt de h1. De paginatitel verbergen in de pagina-eigenschappen, betekent dat de h1 ontbreekt. De paginatitel is niet in html verborgen, maar alleen visueel.

Bij gebruik skiplink ‘Naar hoofdinhoud’ springt de focus naar de accordeon. De toptaken worden overgeslagen. Dat klopt niet. Bij gebruik van de skiplink "Naar hoofdinhoud" springt de focus nu naar de paginatitel.