Scalable Vector Graphics (SVG)

Gijs Veyfeyken op 13/07/2018 - reageer als eerste

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:

e-mail icoon met tekst en link ernaast

  • 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:

AnySurfer logo

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>

Codepen svg meaningful - aria

Screenshot:

logo AnySurfer

  • Voeg een title element toe aan je SVG die de afbeelding beschrijft. Het titel element moet de eerste child zijn van diens parent element: deze plaats je dus meteen na je svg tag. De titel heeft in deze context een gelijkaardige functie als het alt-attribuut van een standaard img element. De schermlezer zal deze gebruiken om de SVG-code te benoemen.
  • Laat het attribuut aria-labelledby verwijzen naar je title. 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 een role toe 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 met aria-labelledby. Een desc is 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>

Codepen svg complex aria

Screenshot:

diagram en tabel waterconsumptie

  • 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);
}

Codepen svg link hidden text

Screenshot:

logo AnySurfer

In een button met een aria-label:

<button aria-label="delete">
<svg role="presentation" focusable="false">
...
</svg>

Codepen svg button aria-label

Screenshot:

vuilbak icoon

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

Reageer

De volgende HTML tags zijn toegestaan: <a> <b> <ul> <li>