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.

Van de tekst 'Scroll de tabel om meer te zien' bij de tabel aria-hidden = true afhalen, zodat dit wordt voorgelezen door hulp software. Bespreken met bureau dat deze bevinding heeft gedaan. Voor mensen met een visuele beperking werkt scrollen niet en het hoeft dus ook niet voorgelezen te worden.

Het logo van de website heeft geen goed tekstalternatief. Dit is nu “Logo Home”. Intern bespreken we nog wat we hiermee doen.

In zoekresultaten wordt het em-element gebruikt voor het opmaken van het zoekwoord in het resultaat. Dit element mag niet worden gebruikt voor visuele presentatie om tekst cursief te maken. Bespreken met bureau dat deze bevinding heeft gedaan. Deze bevinding is in onze ogen een ‘false positive’.

Bij gebruik van het contentelement toegankelijkheidslabel valt de afbeelding van de toegankelijkheidsverklaring in de collapsible deels buiten het scherm wanneer het scherm kleiner wordt, waardoor de tekst niet voor iedereen zichtbaar is. De afbeelding schaalt niet mee. Intern bespreken we wat we hiermee willen.

Kan het aria label skipnav menu worden aangepast naar skiplink menu. Dit is een advies. Intern bespreken we nog wat we hiermee doen.

Iconen SVG role = img weghalen en attribuut aria-hidden-true toevoegen, zodat het icoon echt alleen decoratief is. Dit is een advies. Intern bespreken we nog wat we hiermee doen.

In de mediaplayer staat een video in een div-element met role=”application”. Deze heeft de toegankelijkheidsnaam “Video Player”. Er moet in de toegankelijkheidsnaam ook vermeld worden om welke video het gaat. Dit kan dus worden opgelost door ook de titel van de video in het aria-label te plaatsen. Er moet wel ook vermeld blijven worden dat het om een video gaat. Bespreken met bureau dat deze bevinding heeft gedaan. Deze bevinding is in onze ogen een ‘false positive’.

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 filtering zien filteropties eruit als een checkbox, maar het zijn links. Dat klopt niet. Er zijn ontwerpen gemaakt voor alle varianten van filteropties (bekendmakingen, projecten, nieuws, evenementen en zoekresultaten). Deze worden ingepland om geimplementeerd te worden in het concept.

De radiobuttons in de beslisbomen zijn eigenlijk links naar pagina's. Ze zijn niet gekoppeld aan de vraag. Er is een aanpassing gemaakt in het ontwerp. Dit moet verwerkt worden in de functionaliteit.

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.