spring naar de tekst

image-sliders

Onlangs kreeg ik van iemand een vraag over webpagina's met afbeeldingen die automatisch roteren. De zogenaamde carrousels of image-sliders.

Dit zijn als het ware een soort digitale fotolijsten. De afbeeldingen blijven een tijdje staan en volgens een vaste interval wordt de volgende getoond. Daar kun je dan nog allerlei effectjes aan toevoegen, bijvoorbeeld in- en uitfaden. Alles is denkbaar. Ook zie je dat er vaak kleine teksten over de afbeeldingen worden gezet. Ze staan vaak bovenaan de pagina en het ziet er altijd wel mooi en gelikt uit. Dit is goed voorbeeld van hoe je beweging en animatie kunt toepassen op een website.

Helaas gaan er hier ook vaak dingen mis als het om toegankelijkheid gaat. Deze carrousels worden vaak met behulp van Javascript gemaakt en er wordt niet altijd rekening gehouden met toegankelijkheid. Daarnaast hebben ze enorm veel opties waardoor het voor een leek vaak moeilijk is om de carrousels in te stellen. Ik heb het in een eerdere blog al gehad over animaties en beweging in websites. Als je bewegende onderdelen in je website stopt zorg er dan voor dat een bezoeker de beweging stil kan zetten. Vaak hebben deze carrousels wel de optie om dit te kunnen doen maar de meeste mensen vinden het niet mooi. Daarnaast heb je dan ook een optie nodig om de bezoeker handmatig door de afbeeldingen te laten bladeren. Maar goed of het er nu mooi of niet mooi uitziet voor een grote groep bezoekers is het erg prettig om deze opties te hebben.

Vandaar dat ik de vraag kreeg van een kennis van mij over deze carrousels in websites. Deze kennis wees mij op iets wat ik nooit gemerkt had, en dat is ook niet gek, aangezien zij een screenreader gebruikt om te surfen op het web. Als zij op een website met een screenreader een stuk tekst wilde lezen onder een carrousel dan werd het lezen steeds onderbroken door de tekst van de carrousel. Deze carrousel wisselde om de zoveel tijd een afbeelding en over de afbeeldingen stonden korte teksten. iedere keer als er van afbeelding werd gewisseld dan onderbrak de screenreader het voorlezen van de paragraaf en werd de tekst over de afbeelding van de carrousel voorgelezen.

Ik heb het zelf geprobeerd en het is echt behoorlijk irritant. Het had te maken met een klein regeltje code in de HTML. Deze code geeft een signaal aan de screenreader dat er een volgende afbeelding was geladen daardoor gaat de screenreader de tekst van de afbeelding voorlezen.

Deze code heeft wel degelijk nut. Als je namelijk wilt dat de tekst over de afbeeldingen wordt voorgelezen dan zorgt dit stukje code er voor dat dat automatisch gebeurt als de volgende afbeelding getoond wordt. Dat is wel handig. Maar het is niet handig als dit gebeurt als je iets anders aan het lezen bent. Hier is een hele simpele oplossing voor! Zorg dat de bezoeker de beweging kan stoppen en dat hij handmatig door de afbeeldingen kan scrollen door middel van buttons. Dit is een simpele oplossing waarmee je website voor alle bezoekers een beter ervaring geeft. Gepubliceerd op 8 juni 2020 door Renee de Kruijf