Afbeeldingen

Inhoud van een website dat niet uit tekst bestaat zoals foto’s, icoontjes en andere afbeeldingen, kan toegankelijk worden gemaakt door ze ook als tekst beschikbaar te maken. Tekst kan namelijk door hulptechnologieën op verschillende manieren worden gepresenteerd. Voorleessoftware kan een tekst omzetten in spraak (auditief) en een brailleleesregel kan het vertalen naar braille (tactiel). Zo worden afbeelding ook toegankelijk voor bezoekers die de afbeelding niet kunnen waarnemen.

De invulling van zo’n tekstueel alternatief is afhankelijk van de context van de afbeelding en kan per situatie zelfs verschillen voor dezelfde afbeelding.

  • Alle afbeeldingen moeten een tekstueel alternatief hebben. Een tekstueel alternatief kan op verschillende manieren worden toegevoegd:

    Tekstueel alternatief voor een <img>-element

    Bij een <img>-element wordt een tekstueel alternatief gegeven met behulp van het alt-attribuut.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Tekstueel alternatief voor een <svg>-element

    Bij een <svg>-element wordt een tekstueel alternatief gegeven met behulp van het title-element in de svg. Gebruik ook aria-attribuut role="img" om ervoor te zorgen dat zo veel mogelijk ondersteunende technologieën het <svg>-element herkennen als een afbeelding.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Tekstueel alternatief voor afbeeldingen die is geplaatst met CSS

    Aan een afbeelding die geplaatst is met CSS kan een tekstueel alternatief worden gegeven met een aria-label.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Invulling van het tekstueel alternatief

    De invulling van een tekstueel alternatief wordt bepaald door de functie die een afbeelding heeft. In veel gevallen draagt een afbeelding informatie over. Beschrijf dan in het tekstueel alternatief wat er op de afbeelding te zien is. Bij een afbeelding die ook een link is, gaat het juist om het beschrijven waar de link naar toe verwijst. Als een afbeelding geen informatie aan de pagina toevoegt, dan is het beter om het helemaal geen tekstueel alternatief te geven zodat het kan worden genegeerd door hulptechnologieën.

  • Afbeeldingen die informatie overbrengen zijn noodzakelijk voor het begrijpen van de tekst. De afbeeldingen voegen extra informatie toe aan de pagina. Deze afbeeldingen moeten een tekstueel alternatief hebben dat nauwkeurig beschrijft wat er op de afbeelding te zien is. De invulling is afhankelijk van de context en kan per situatie afwijkend zijn voor dezelfde afbeelding.

    In een CMS kan een tekstueel alternatief doorgaans worden toegevoegd in de mediatheek.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Het tekstuele alternatief moet een goede vervanging kunnen geven voor een afbeelding. Bedenk bij het schrijven van het tekstueel alternatief altijd wat de bedoeling is van de afbeelding. Houd een tekstueel alternatief altijd nuttig en beknopt.

  • Soms is het niet mogelijk om een afbeelding volledig te beschrijven in een kort tekstueel alternatief. Bijvoorbeeld als het gaat om een uitgebreide infographic of een grafiek. Dit soort complexe afbeeldingen moeten ook volledig worden beschreven in een tekstueel alternatief. Geef in dat geval naast een beknopte beschrijving in het alt-attribuut ook een langere beschrijving in de omringende tekst.

    				
    					
    				
    			

    Een langere beschrijving mag ook op een aparte pagina worden geplaatst. Plaats dan een link met de verwijzing naar die andere pagina direct voor of na de afbeelding.

    				
    					
    				
    			

    De omringende tekst hoort ook te worden gekoppeld aan de afbeelding. Dit is geen verplichting maar wel erg handig. Hiervoor kan gebruik worden gemaakt van het aria-describedby-attribuut. Gebruik het ID van het element waar de complexe afbeelding beschreven wordt. Deze informatie hoort dan ook zichtbaar te zijn voor bezoekers die wel kunnen zien.

    				
    					
    				
    			
  • In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Dit kunnen afbeeldingen zijn die verwijzen naar een andere pagina of website, maar ook afbeeldingen die een actie op de pagina uitvoeren.

    Deze afbeeldingen moeten een tekstueel alternatief hebben dat het doel van de link beschrijft, of die beschrijft wat er gebeurd als op de afbeelding wordt geklikt. Voorleessoftware gebruikt het tekstuele alternatief namelijk als linktekst. Daarom is het belangrijker om het doel van de link te beschrijven, in plaats van wat er op de afbeelding te zien is.

    Als er ook tekst staat op een functionele afbeelding, dan moeten de tekst op de afbeelding én het doel van de link allebei in het tekstueel alternatief worden vermeld. Hierdoor kunnen bezoekers die met spraakherkenning werken de link ook makkelijk bereiken.

    Zo is ‘Ga naar Twitter.com’ een beter tekstueel alternatief dan ‘Kleine witte vogel op een lichtblauwe achtergrond’ als het gaat om een afbeelding die wordt gebruikt als link naar een Twitter.com.

    				
    					
    				
    			
  • Afbeeldingen die alleen ter decoratie op de pagina zijn geplaatst, horen geen tekstueel alternatief te hebben. Dit zijn bijvoorbeeld afbeeldingen die geen informatie overdragen en niet noodzakelijk zijn voor het begrijpen van de tekst. Deze afbeeldingen moeten worden genegeerd door hulptechnologieën. Decoratieve afbeeldingen kunnen het best met CSS worden geplaatst.

    				
    					
    				
    			
    				
    					
    				
    			

    Als het niet mogelijk is om een decoratieve afbeelding met CSS te plaatsen, dan moet het alt-attribuut in het <img>-element worden leeg gelaten. Het alt-attribuut moet wel aanwezig zijn maar het heeft dan geen tekst.

    				
    					
    				
    			

    Let op: Dit kan in bepaalde gevallen ook worden gedaan met ARIA role="presentation" of aria-hidden="true".

  • Afbeeldingen van tekst moeten niet worden gebruikt tenzij het echt niet anders kan. Het is toegankelijker om echte tekst te gebruiken en deze tekst met CSS vorm te geven. Met CSS kan tekst ook goed worden vormgegeven, zo kan bijvoorbeeld de kleur, de grootte, het lettertype, de spatiëring en de regelafstand worden ingesteld.

    Er zijn een paar uitzonderingen voor dit succescriterium. Zo is een logo geen afbeelding van tekst en mag een afbeelding van tekst wel worden gebruikt als er ook een toegankelijk alternatief wordt aangeboden.

  • Bewegende plaatjes en knipperende onderdelen moeten eenvoudig kunnen worden gepauzeerd, gestopt of worden verborgen. Bezoekers met een cognitieve beperking kunnen er door worden afgeleid. Bijvoorbeeld voor bezoekers die moeite hebben met concentratie.

    Laat plaatjes en knipperende onderdelen niet langer duren dan 5 seconden. De richtlijnen houden deze vijf seconden aan omdat content in deze 5 seconden wel de aandacht kan trekken, maar niet lang genoeg duurt om een bezoeker af te leiden of te belemmeren bij het gebruik van de website.

  • Laat onderdelen niet meer dan 3 keer per seconde flitsen. Bezoekers met bepaalde vormen van epilepsie kunnen een aanval krijgen als ze kijken naar knipperende of flitsende afbeeldingen of filmpjes.

E-mail ons

info@wcag.nl

Bel ons

085 - 80 81 814

Succescriteria

  • Principe 1. Waarneembaar
    • Richtlijn 1.1 Tekstalternatieven
      • 1.1.1 Niet-tekstuele content
    • Richtlijn 1.4 Onderscheidbaar
      • 1.4.5 Afbeeldingen van tekst
  • Principe 2. Bedienbaar
    • Richtlijn 2.2 Genoeg tijd
      • 2.2.2 Pauzeren, stoppen, verbergen
    • Richtlijn 2.3 Toevallen en fysieke reacties
      • 2.3.1 Drie flitsen of beneden drempelwaarde
    • Richtlijn 2.4 Navigeerbaar
      • 2.4.4 Linkdoel (in context)
    • Richtlijn 2.5 Input Modaliteiten
      • 2.5.3 Label in naam
  • Principe 4. Robuust
    • Richtlijn 4.1 Compatibel
      • 4.1.2 Naam, rol, waarde