Scalable Vector Graphics (SVG)
Gijs Veyfeyken op 13/07/2018
Scalable Vector Graphics (SVG) bieden bepaalde voordelen tegenover hun rastergebonden soortgenoten. Dankzij hun vectoriële aard kan je ze eindeloos herschalen zonder kwaliteitsverlies. Dit maakt ze gebruiksvriendelijk voor mensen die zichtproblemen hebben en vergrotingsprogramma's gebruiken.
Toch zijn SVG-bestanden niet vanzelf toegankelijk. Een aantal ingrepen zijn nodig om deze compatibel te maken met hulptechnologieën zoals schermlezers en toetsenbordnavigatie. Dit artikel bespreekt de belangrijkste aspecten van toegankelijke SVG's.
We overlopen enkele scenario's die veel voorkomen.
Decoratieve afbeelding
In dit voorbeeld is de SVG van het e-mail icoon decoratief want de informatie is ook als tekst beschikbaar.
<svg aria-hidden="true" focusable="false">...</svg>
<span>E-mail us at <a href="mailto:info@example.com">info@example.com</a></span>
Codepen svg decorative - aria-hidden
Screenshot:
- We voegen
aria-hidden="true"toe aan het SVG element zodat screenreaders het icoon negeren.role="presentation"is ook een optie. - Het
focusable="false"attribuut lost een bug in Internet Explorer op.
Betekenisvolle afbeelding met SVG als source attribuut
Dit is het meest robuust en waterdicht wat betreft ondersteuning door screenreaders. Je gebruikt een normale afbeelding met een beknopte alt-tekst en verwijst naar de svg in het source attribuut. Simpel en makkelijk. Het enige nadeel is dat je geen delen van de svg kunt aanspreken. Bijvoorbeeld een deel van de afbeelding van kleur laten veranderen bij :focus en :hover.
<img src="http://label.anysurfer.be/images/label_AS_square.svg" alt="AnySurfer logo" />
Codepen svg meaningful via src
Screenshot:
Betekenisvolle afbeelding als inline SVG
Je kan alternatieve tekst toevoegen aan inline SVG's met de combinatie van een title element, een aria-labelledby attribuut en een role img.
<svg role="img" aria-labelledby ="logo" focusable="false">
<title id="logo">AnySurfer logo</title>
...
</svg>
Screenshot:
- Voeg een
titleelement toe aan je SVG die de afbeelding beschrijft. Hettitelelement moet de eerste child zijn van diens parent element: deze plaats je dus meteen na jesvgtag. De titel heeft in deze context een gelijkaardige functie als het alt-attribuut van een standaardimgelement. De schermlezer zal deze gebruiken om de SVG-code te benoemen. - Laat het attribuut
aria-labelledbyverwijzen naar jetitle. Zo ben je zeker dat elke browser en schermlezer de link tussen de titel en de SVG legt. - Dankzij de toevoeging van
role="img"weet een schermlezer, en dus ook de blinde gebruiker, dat het gaat om een afbeelding. Bepaalde browsers en schermlezers beseffen niet dat SVG-code een beeldrol heeft. Door eenroletoe te voegen, overschrijf je de mogelijk foute rol die de browser zelf aan de SVG geeft. - De SVG specificatie voorziet ook een
desc(description) element voor afbeeldingen die een uitgebreide beschrijving vereisen. Plaats deze onder je title element en verwijs er op dezelfde manier naar metaria-labelledby. Eendescis overbodig voor normale, eenvoudige afbeeldingen. - Het
focusable="false"attribuut lost een bug in Internet Explorer op.
Complexe afbeelding als inline SVG
<h2>Water consumptie</h2>
<svg role="img" aria-labelledby="diag" focusable="false">
<title id="diag">Diagram water consumptie (tekstversie hieronder)</title>
<g aria-hidden="true">
<g>
<g>...</g>
<g>...</g>
<g>...</g>
<g>...</g>
<g>...</g>
</g>
</svg>
<table>
<caption>Water consumptie</caption>
...
</table>
Screenshot:
- We volgen dezelfde principes als bij een simpele SVG en geven de SVG een beknopte omschrijving via het title element
- We verbergen het g element wiens kinderen tekst bevatten zodat die wordt overgeslagen door screenreaders. Zonder de visuele context zijn die cijfers verwarrend.
- Onder de SVG voegen we een tabel toe als tekstueel alternatief voor het diagram.
SVG in een link of button
Wanneer de SVG binnen een link of button staat, mag de SVG zelf genegeerd worden door screenreaders. We kunnen als alternatief een aria-label op de link of button plaatsen. Of kiezen voor de meest robuuste techniek, verborgen tekst.
In een link met verborgen tekst:
<a href="http://www.anysurfer.be">
<span class="visuallyhidden">AnySurfer startpagina</span>
<svg role="presentation" focusable="false">
...
</svg>
</a>
.visuallyhidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
Screenshot:
In een button met een aria-label:
<button aria-label="delete">
<svg role="presentation" focusable="false">
...
</svg>
Screenshot:
Bugs
VoiceOver (screenreader op Mac) kondigt een SVG altijd aan als een "group" (Webkit bug), wat mogelijk verwarrend is.
IE11 bevat een veel voorkomende bug. SVG's krijgen namelijk focus wanneer je door een pagina tabt, ook wanneer deze geen link zijn. Dat los je op door focusable="false" toe te voegen.
Internet Explorer 11 wordt veel gebruikt door mensen met een handicap omdat deze browser compatibel is met vele soorten assistive technology, in tegenstelling tot Edge. Het is daarom belangrijk dat je website naar behoren werkt in IE.
Bronnen
- Tips for Creating Accessible SVG (SitePoint)
- Using ARIA to enhance SVG accessibility (The Paciello Group)
- Accessibility Support SVG (W3C)
- Accessibility guidelines for SVG (Carnegie Museums of Pittsburgh)
