Home > Aan de slag > Alternatieve tekst: animaties en interactieve afbeeldingen

Ook bij animaties en interactieve afbeeldingen is het belangrijk om na te denken over alternatieve tekst.

Inhoudsopgave

Geanimeerde afbeeldingen

Geanimeerde afbeeldingen (Animated gifs) trekken de aandacht van het oog en worden daarom vaak toegepast voor aandacht eisende informatie, zoals ‘reclame-banners’. Voor deze toepassing hoeft alleen het om de belangrijkste boodschap van de uiting als alternatieve tekst te worden gebruikt.

Reclame-banner met een alternatieve tekst (HTML)

  1. <img src="/images/banners/gemeentearchief.gif" alt="Adv.: Vind wat je zoekt in het Gemeentelijke Archief">

Een geanimeerde afbeelding hoeft zelden uitgebreid beschreven te worden; geanimeerde afbeeldingen zijn doorgaans ongeschikt voor het overbrengen van belangrijke informatie.Niet-bewegende informatie is dan toegankelijker en gebruiksvriendelijker.

Houd er rekening mee dat geanimeerde afbeeldingen op een pagina de aandacht sterk kunnen afleiden. Bovendien kunnen zeer drukke animaties leiden tot epileptische aanvallen bij bezoekers die daar gevoelig voor zijn.

“Until user agents allow users to control blinking, avoid causing content to blink.”

W3C Web Content Accessibility Guidelines ijkpunt 7.2

Naar boven

Interactieve afbeeldingen

Interactieve afbeeldingen worden ook wel ‘rollover images’ – kortweg rollovers – genoemd. Het zijn afbeeldingen op een pagina die meestal voor de navigatie dienen (knoppen, symbolen, et cetera) en van vorm veranderen wanneer de bezoeker er met de muiswijzer overheen beweegt. Alle afbeeldingen vereisen een alternatieve tekst, met name afbeeldingen voor navigatie.

In bovenstaand voorbeeld wordt gebruik gemaakt van een muiswijzer. De verandering moet echter ook plaatsvinden als een gebruiker die alleen over een toetsenbord beschikt, op dezelfde link terechtkomt.

Meestal beperkt de interactieve afbeelding zich tot het veranderen van kleur of vorm, maar soms verandert de boodschap van de afbeelding. Bijvoorbeeld, een knop die luidt ‘Nieuws’. Wanneer de bezoeker met de muiswijzer over deze knop beweegt verandert de afbeelding in een knop die luidt ‘Lees onze nieuwsbrief’. Webontwikkelaars kunnen hier op twee manieren mee omgaan:

  • Plaats beide boodschappen in de alternatieve tekst voor de afbeelding. Deze zou dan luiden “Nieuws: lees onze nieuwsbrief”.
  • Gebruik de belangrijkste boodschap als alternatieve tekst en gebruik het title attribuut (op de afbeelding of de link om de afbeelding) voor de secundaire boodschap. In dit geval de alternatieve tekst “Nieuws” en de waarde voor het title attribuut “Lees onze nieuwsbrief”.

Het title attribuut voor aanvullende informatie

Het title attribuut is altijd aanvullend van aard. De weergave ervan wordt door enkele (oude) browsers niet ondersteund. Met andere woorden, de bezoeker moet de secundaire boodschap kunnen missen.

Dit geldt voor interactieve afbeeldingen in het algemeen: er worden client-side scripts en/of CSS (Cascading Style Sheets) gebruikt voor het veranderen van de afbeeldingen. Beide technologieën zijn optioneel van aard en moeten nooit gebruikt worden voor overdracht van essentiële informatie. Zie ook Achtergrondafbeeldingen.

Naar boven