Hogeschool Windesheim

Afbeeldingen & tekstalternatieven

Aangepast op

Gebruik van afbeeldingen

Volgens de richtlijnen voor digitale toegankelijkheid is het belangrijk dat afbeeldingen begrijpelijk zijn voor iedereen. Dit kun je doen met korte beschrijvingen (alt-tekst) en, waar nodig, een uitgebreide uitleg naast of onder de afbeelding/foto. Dit is vooral belangrijk voor gebruikers die zelf de afbeelding niet kunnen zien. Een screenreader leest dan deze alternatieve tekst of de uitgebreidere uitleg voor.
Toevoegen van alt-tekst zorgt ook voor betere zoekresultaten via zoekmachines.

Belangrijkste tips

  • Geef een korte beschrijving van de afbeelding.
  • Geef alleen de belangrijkste informatie. Bijvoorbeeld, hoe je in minimale bewoordingen de afbeelding aan iemand aan de telefoon zou uitleggen.
  • Voor ingewikkelde afbeeldingen, zoals grafieken en diagrammen, geef je een uitgebreide uitleg.
  • Leg duidelijk uit wat de afbeelding laat zien, zoals cijfers of trends.
  • Is de afbeelding alleen voor versiering? Zet dan een lege alt-tekst (alt="") om te voorkomen dat schermlezers het voorlezen

Voorbeeld

Een lijndiagram dat de temperatuur toont van januari tot december in Nederland.

Alt-tekst: "Lijndiagram met de maandelijkse gemiddelde temperatuur in Nederland."

 

Lijndiagram met de maandelijkse gemiddelde temperatuur in Nederland.

Uitgebreide uitleg: Het diagram laat zien dat de temperaturen in Nederland het koudst zijn in januari en het warmst in juli. De temperaturen stijgen geleidelijk van winter naar zomer en dalen daarna weer in de herfst.

Soms wil je een afbeelding met tekst in een document gebruiken, zoals gescande teksten(krantenknipsels) of screenshots van tekst. Maar ook een tekst die je print als pdf resulteert in een niet bewerkbare tekst. Deze “niet bewerkbare” tekst is niet toegankelijk voor zoekmachines of screenreaders.
Als een alternatief voor de afbeelding ontbreekt, kun je ervoor kiezen de afbeelding niet te gebruiken.

Uitzonderingen hierop zijn bijvoorbeeld logo’s, decoratieve tekst, kunstwerken, offline reclamemateriaal, of tekst met een specifieke vorm (zoals diagonaal of in een boog). Ook diagram- en grafiektekst kunnen een uitzondering zijn. Teksten opgeslagen als pdf op een juiste manier zorgen voor een meer toegankelijk document. Vraag je hierbij altijd af wat de relevantie is van je keuze voor pdf. Is een directe (online)publicatie of een MS Word document niet een beter toegankelijker alternatief?

Leesvolgorde

De richtlijnen voor digitale toegankelijkheid benadrukken het belang van een logische en betekenisvolle volgorde in documenten, zodat gebruikers met ondersteunende technologie, zoals schermlezers, de inhoud ook goed kunnen begrijpen.

In Microsoft Word is de standaard leesvolgorde meestal correct, omdat de software de tekst van boven naar beneden en van links naar rechts leest. Dit is ideaal voor documenten die alleen tekst bevatten.

Wanneer je in Microsoft Word of PowerPoint elementen zoals afbeeldingen, tabellen, kolommen of zwevende tekstvakken toevoegt, kan de leesvolgorde verstoord raken. Dit kan problematisch zijn voor gebruikers die afhankelijk zijn van schermlezers. Ook hebben zoekmachines problemen met het interpreteren van deze inhoud. Vermijd zwevende tekstvakken of zorg ervoor dat ze logisch zijn geplaatst in de structuur van het document.

 

Toepassingen in SharePoint, Brightspace en ANS.

SharePoint

Leesvolgorde:

  • Zorg bij het maken van pagina’s in SharePoint dat de inhoud logisch wordt gestructureerd.
  • Gebruik koppen zoals H1, H2 en H3 om een duidelijke hiërarchie te creëren.
  • Test de volgorde met behulp van een schermlezer (Verteller in Windows) of controleer handmatig door elementen stapsgewijs te doorlopen.

Afbeeldingen en tekstalternatieven:

  • Upload afbeeldingen via de "Nieuw webonderdeel toevoegen" optie.
  • Klik, na het toevoegen, op de afbeelding en selecteer "Eigenschappen" om alternatieve tekst toe te voegen. Geef een korte beschrijving van de afbeelding.
  • Voor decoratieve afbeeldingen kun je de alternatieve tekst leeg laten of aangeven dat ze decoratief zijn.
Screenshot van Alternatieve tekst toevoegen in SharePoint

Brightspace

Leesvolgorde:

  • Gebruik de ingebouwde tekst editor om pagina's en inhoud logisch op te bouwen.
  • Zorg ervoor dat tabellen en kolommen in een logische volgorde worden weergegeven voor schermlezers.

Afbeeldingen en tekstalternatieven:

  • Voeg afbeeldingen toe via de knop "Afbeelding invoegen"
  • Upload een afbeelding, of kies een afbeelding die al geüpload is.
  • Brightspace toont direct een pop-up om de afbeelding te voorzien van een alternatieve tekst, of te markeren als decoratief
  • Schrijf een korte, duidelijke alt-tekst die de kerninformatie van de afbeelding beschrijft.
  • Voeg uitgebreide uitleg toe in de begeleidende tekst wanneer de afbeelding complex is (zoals grafieken of diagrammen).
Screenshot van Alternatieve tekst toevoegen in Brightspace

Ans

Leesvolgorde:

  • In Ans gebruik je inhoud en vragen om een toets logisch te structureren.
  • Controleer de volgorde van de vragen door de preview-optie te gebruiken en te testen hoe de vragen worden weergegeven.

Afbeeldingen en tekstalternatieven:

  • Voeg afbeeldingen toe met de knop "Nieuwe content" en kies voor de optie "Afbeelding".
  • Upload een afbeelding
  • Vul het "Onderschrift" in. Dit wordt getoond onder de afbeelding, en is daarnaast ook meteen de alternatieve tekst.
  • Als een afbeelding complex is, licht deze dan toe door een tekstvak eronder of erboven te plaatsen met de toelichting.
Screenshot van afbeelding in Ans met onderschrift en extra tekstuele toelichting

Let op: Heb je afbeeldingen toegevoegd in een tekstvak, dan vul je de alternatieve tekst in door de afbeelding te bewerken.
Klik op de afbeelding en kies voor Bewerken

Screenshot afbeelding in een tekstblok bewerken
Screenshot van het invoeren van alternatieve tekst bij een afbeelding in een tekstblok
Vorige Artikel Multimedia
Volgende Artikel Opsommingen & lijsten