SVG-afbeeldingen toegankelijk maken op websites

Officiële informatie

• Succescriterium 1.1.1 Niet-tekstuele content
• Succescriterium 1.4.3 Contrast (minimum)
• Succescriterium 1.4.11 Contrast van niet-tekstuele content
• Succescriterium 1.4.1: Gebruik van kleur

SVG-afbeeldingen

SVG is de afkorting voor Scalable Vector Graphics en is een bestandsformaat voor afbeeldingen. Een vectorafbeelding wordt niet opgebouwd uit pixels zoals bij digitale foto’s, maar uit punten en lijnen. Deze blijven in verhouding wanneer je de grootte van de afbeelding aanpast of er sterk op inzoomt. Zo blijft de afbeelding altijd scherp. Ook zijn het vaak kleine bestanden die snel laden. Dit maakt het een perfect bestandsformaat voor afbeelding op websites die opgebouwd zijn uit lijnen en vormen zoals logo’s, iconen, grafieken en infographics.

Doe dit voor goede toegankelijkheid

• Zorg voor voldoende kleurcontrast.
• Gebruik meer dan alleen kleur om informatie over te brengen.
• Maak informatieve tekst in de afbeelding digitaal toegankelijk. Bijvoorbeeld bij een logo als link naar de homepage.
• Geef een tekstalternatief voor een eenvoudige afbeelding.
• Beschrijf de actie of het doel in de alternatieve tekst wanneer de afbeelding een link of knop is.
• Voeg een beschrijving toe aan complexe afbeelding.
• Plaats een informatieve afbeelding niet via een pseudo-element met CSS. Een tekstalternatief toevoegen is dan lastig. Lees meer over pseudo-elementen op de website van MDN Web Docs (Engelstalig).

Bij animaties

• Laat animaties niet automatisch starten.
• Bied de mogelijkheid om animaties te stoppen of te pauzeren wanneer ze langer duren dan 5 seconden.
• Zorg dat het beeld niet flikkert. Dit kan een epileptische aanval veroorzaken.

Inline SVG-afbeeldingen

Plaats de code uit een SVG-bestand direct in de HTML-code van je website. Deze inline svg-afbeelding heeft een aantal voordelen voor digitale toegankelijkheid. Een aantal tips:

• De afbeelding is aan te passen via CSS. Geef bijvoorbeeld een icoon via CSS een donkere kleur op een lichte achtergrond en een lichte kleur op een donkere achtergrond voor een goed kleurcontrast.
• Wees voorzichtig met het gebruik van <text> elementen in de SVG-afbeelding. Deze zijn waarneembaar door schermlezers, maar kunnen niet gebruikt worden als toegankelijke naam of tekstalternatief. Ook leveren ze soms ongewenste resultaten op.
• Voeg een tekstalternatief toe aan de code van de SVG:
  1. Voeg een ’title’-element toe. Plaats meteen na het <svg>-label een <title>-element. Dit doe je bovenaan in de code van je afbeelding.
  2. Geef de afbeelding een tekstalternatief. Schrijf in het <title>-element een korte en duidelijke beschrijving van de afbeelding. Bijvoorbeeld: <title>Deze pagina delen</title>.
  3. Voeg aan het <svg>-element zelf het attribuut aria-labelledby=”title” toe. Dit zorgt dat alle browsers de beschrijving herkennen en gebruiken.

Decoratieve inline SVG-afbeeldingen

Voeg een aria-hidden=”true” toe in het SVG-element van decoratieve afbeeldingen. Een schermlezer slaat deze afbeelding dan over.

Meer informatie

Smashing magazine – Accessible SVGs (Engelstalig)