WCAG in de Praktijk – Zelf testen opdracht uitwerking
Toetsenbord
De links op de pagina werken wel, maar de focus is niet zichtbaar (de outline staat op 0)
De links in de cookiemelding zijn niet bereikbaar, geen href
(De links in de footer hebben geen gevulde href vanwege demo, werken op zich wel)
De naar boven knop is niet bereikbaar, geen echte knop
De hamburgerknop is niet bereikbaar, geen echte knop
Headings
Tekst onterecht als kop opgemaakt (‘In Zwembad De Krommerijn is het bijzonder prettig zwemmen…’)
Onlogische volgorde in footer: items vallen onder h2-kop Trimzwemmen
Niveaus kloppen niet: eerst h3, dan h1, h4, h2…
Oplossing: eerste h3 en h4 weghalen, h1 aanpassen, extra kopje boven footer of footer kopjes op h2-niveau
Afbeeldingen
De alt-tekst van het logo is niet volledig t.o.v. de zichtbare tekst
Lege alt-teksten goed bij decoratieve foto’s
Vlaggetje mag alt-tekst hebben, hoeft niet (zo lang de link een naam heeft. Wel raar: taal is ‘en-US’, Britse vlag?)
Foto met bestandsnaam als alt-tekst: beter leeg laten
Footer: logo’s zwembad en social media moeten wel alt-tekst hebben
Title attributen alle overbodig
Contrast
Lichtblauwe menu-items voldoen niet (3.04:1 in Chrome inspector)
ARIA
aria-current=”page” in hoofdmenu (goed gebruikt)
cookie-popup: ‘aria-labelledby’ (verwijst naar zichzelf, dat mag), maar dialog staat op aria-hidden=”true”. Uitklaplink heeft geen aria-expanded-attribuut.
Lees meer links
Hebben nu geen duidelijk doel
Mogelijke oplossing: extra tekst in de link, eventueel met CSS verborgen, of via een ‘aria-labelledby’-verwijzing naar de kop ervoor