svg, liens et lecteurs d’écran

Publié le 11 juillet 2014 par Équipe Atalan

Cette page présente des résultats de tests du support, par des couples navigateur/lecteur d’écran, de balises et attributs visant à rendre accessibles des <svg> intégrés dans des <a>.

Chaque technique présentée ci-dessous est accompagnée de l’exemple ayant servi de test, de son code HTML et du tableau de résultats.

Code de base

<a href="/">
   <svg viewBox="0 0 100 100">
      <use xlink:href="#accueil"></use>
   </svg>
</a>

<title>

<a href="/">
   <svg viewBox="0 0 100 100">
      <title>Accueil</title>
      <use xlink:href="#accueil"></use>
   </svg>
</a>

Résultats
MAJ le 11/07/2014	11	2014.2	iOS 7.1.2
MAJ le 11/07/2014	JAWS	NVDA	VoiceOver
IE 11
FF 30
Safari

À noter qu’avec la combinaison IE11 + NVDA, « Accueil » est restitué deux fois.

`<title>` + `aria-labelledby`

<a href="/" aria-labelledby="titre">
   <svg viewBox="0 0 100 100">
      <title id="titre">Accueil</title>
      <use xlink:href="#accueil"></use>
   </svg>
</a>

Résultats
MAJ le 11/07/2014	11	2014.2	iOS 7.1.2
MAJ le 11/07/2014	JAWS	NVDA	VoiceOver
IE 11
FF 30
Safari

À noter qu’avec la combinaison IE11 + NVDA, « Accueil » est restitué trois fois.

`<desc>`

<a href="/">
   <svg viewBox="0 0 100 100">
      <desc>Accueil</desc>
      <use xlink:href="#accueil"></use>
   </svg>
</a>

Résultats
MAJ le 11/07/2014	11	2014.2	iOS 7.1.2
MAJ le 11/07/2014	JAWS	NVDA	VoiceOver
IE 11
FF 30
Safari

À noter qu’avec la combinaison IE11 + NVDA, « Accueil » est restitué deux fois.

`<desc>` + `labelledby`

<a href="/" aria-labelledby="description">
   <svg viewBox="0 0 100 100">
      <desc id="description">Accueil</desc>
      <use xlink:href="#accueil"></use>
   </svg>
</a>

Résultats
MAJ le 11/07/2014	11	2014.2	iOS 7.1.2
MAJ le 11/07/2014	JAWS	NVDA	VoiceOver
IE 11
FF 30
Safari

À noter qu’avec la combinaison IE11 + NVDA, « Accueil » est restitué trois fois.

`aria-label` sur `<svg>`

<a href="/">
   <svg viewBox="0 0 100 100" aria-label="Accueil">
      <use xlink:href="#accueil"></use>
   </svg>
</a>

Résultats
MAJ le 11/07/2014	11	2014.2	iOS 7.1.2
MAJ le 11/07/2014	JAWS	NVDA	VoiceOver
IE 11
FF 30
Safari

`role="img"` + `aria-label` sur `<svg>`

<a href="/">
   <svg viewBox="0 0 100 100" role="img" aria-label="Accueil">
      <use xlink:href="#accueil"></use>
   </svg>
</a>

Résultats
MAJ le 15/07/2014	11	2014.2	iOS 7.1.2
MAJ le 15/07/2014	JAWS	NVDA	VoiceOver
IE 11
FF 30
Safari

`aria-label` sur `<a>`

<a href="/" aria-label="Accueil">
   <svg viewBox="0 0 100 100">
      <use xlink:href="#accueil"></use>
   </svg>
</a>

Résultats
MAJ le 11/07/2014	11	2014.2	iOS 7.1.2
MAJ le 11/07/2014	JAWS	NVDA	VoiceOver
IE 11
FF 30
Safari

`title` sur `svg`

<a href="/">
   <svg viewBox="0 0 100 100" title="Accueil">
      <use xlink:href="#accueil"></use>
   </svg>
</a>

Résultats
MAJ le 11/07/2014	11	2014.2	iOS 7.1.2
MAJ le 11/07/2014	JAWS	NVDA	VoiceOver
IE 11
FF 30
Safari

`title` sur `<a>`

<a href="/" title="Accueil">
   <svg viewBox="0 0 100 100">
      <use xlink:href="#accueil"></use>
   </svg>
</a>

Résultats
MAJ le 11/07/2014	11	2014.2	iOS 7.1.2
MAJ le 11/07/2014	JAWS	NVDA	VoiceOver
IE 11
FF 30
Safari

À noter que ces résultats peuvent varier en fonction de la configuration du lecteur d’écran (dépend du paramétrage de la restitution de l’attribut title sur les <a>).

Texte caché

Accueil

<a href="/">
   <span class="masquer">Accueil</span>
   <svg viewBox="0 0 100 100">
      <use xlink:href="#accueil"></use>
   </svg>
</a>

Résultats
MAJ le 11/07/2014	11	2014.2	iOS 7.1.2
MAJ le 11/07/2014	JAWS	NVDA	VoiceOver
IE 11
FF 30
Safari

Conclusion

Note importante :
VoiceOver (iOS 7.1.2) ne parcourt pas les <svg> dans un <a>. Ils sont donc totalement inaccessibles pour les utilisateurs de cette combinaison.

Ce dysfonctionnement peut se régler via l’ajout d’un texte caché. C’est notamment pour cette raison que nous préconisons cette technique d’intégration.

À venir très prochainement, dans un autre billet, les résultats des mêmes types de tests sur la balise <a> dans un <svg>.

D’ici là, dans le cas où vous n’obtiendriez pas les mêmes résultats, nous vous invitons à nous le signaler dans les commentaires de ce billet, via notre formulaire de contact ou en écrivant à blog(AT)atalan.fr.

Vos commentaires

Par Gerber, le 17 avril 2024 à 14:46.

Bonjour,

Nous en sommes où en 2024 des tests effectués pour cet article ?

Merci
Très belle journée
Aurélie

Répondre
- Par Romain Desjardins, le 18 avril 2024 à 04:34.
  
  Bonjour Aurélie,
  
  Nous vous proposons de suivre le RGAA, qui propose maintenant une méthodologie de test indiquant le développement nécessaire pour être conforme et garantir le meilleur support d’accessibilité. Le test 1.1.5 du critère 1.1 concernant les alternatives textuelles des images indique le développement HTML à prendre en compte. En particulier, l’attribut role="img" doit être ajouté, en complément d’une des 3 techniques suivantes :
  - Contenu de l’attribut WAI-ARIA aria-label.
  - Passage de texte associé via l’attribut WAI-ARIA aria-labelledby.
  - Contenu de l’élément <title>.
  À noter que l’alternative textuelle de l’image peut tout aussi bien être ajoutée via l’attribut aria-label sur la balise de lien <a>. Cet attribut est désormais correctement pris en charge par l’ensemble des lecteurs d’écran évoqués sur cette fiche.
  
  Nous allons mettre à jour la fiche en conséquence. Merci pour votre message !
  
  Bien à vous,
  Romain
  
  Répondre
Par Nicolas, le 12 mai 2017 à 16:31.

Bonjour Johan,

Les <a> dans les <svg> sont-ils bien interprétés par les lecteurs d’écran ?
Ils semblent être considérés comme des liens boutons et n’apparaissant pas dans la liste d’éléments de NVDA (insert + F7).
Du coup, cela ne peut-être conforme RGAA 3 ?

Voici un exemple de code :
```
<svg version="1.1" id="Calque_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve" aria-labelledby="title">
     <title id="title">Schéma</title>
     <a href="#test_1" data-action="modal-open">
          <rect x="94.5" y="321.5" fill="#2988CE" stroke="#000000" stroke-miterlimit="10" width="61" height="112"/>
          <text transform="matrix(1 0 0 1 103.056 381.8915)" font-family="'MyriadPro-Regular'" font-size="12">Bloc 1</text>
    </a>
</svg>
```
merci !! :-)

PS : je n’ai pas réussi à trouver votre billet sur les résultats de tests sur la balise <a> dans un </a>.

Répondre
- Par Johan Ramon, le 24 mai 2017 à 10:48.
  
  Bonjour Nicolas,
  
  Merci pour ton commentaire.
  
  Nous avons prévu de remettre à plat la fiche AcceDe Web « Gérer l’alternative des SVG (images vectorielles) ».
  
  Nous profiterons de cette mise à jour pour mener des tests sur ton cas de figure.
  
  Et je ne manquerai pas de te tenir au courant. ;)
  
  Merci encore et très bonne journée !
  Johan
  
  Répondre
Par levy, le 18 mars 2015 à 09:12.

Bonjour,

un petit update sur ce post, sur voiceover avec osX 10.10.2 cela fonctionne correctement sur :
– role img + aria label sur svg
– aria label sur a
– aria label sur svg
– desc + aria labelledby
– title + aria labelledby
– texte caché
– title sur a

sur ios8.2 :
– role img + aria label sur svg
– aria label sur a
– desc + aria labelledby
– title + aria labelledby
– title sur a

avec texte caché le texte est bien annoncé en lecture linéaire mais pas au touch

avec aria label sur svg ou title sur svg l’élément n’est pas annoncé ou atteignable du tout

Répondre
- Par Johan Ramon, le 18 mars 2015 à 14:06.
  
  Bonjour Aurélien,
  
  Merci beaucoup pour ces retours de tests.
  
  Johan
  
  Répondre
Par Vincent De Oliveira, le 11 juillet 2014 à 16:23.

Merci pour ces tests.

Personnellement, pour les icones SVG de mon header de blog, j’ai ajouté un role="img" + aria-label="texte" et Voice Over s’en sort très bien. Pas testé JAWS ni NVDA.

Je ne sais plus où j’avais vu cette solution mais elle était présentée comme LA bonne.

Du coup, est-ce que cette technique est correcte également ?

Répondre
- Par Johan Ramon, le 11 juillet 2014 à 16:35.
  
  Bonjour et merci pour ton commentaire Vincent.
  
  Je viens de tester et te confirme qu’un role="img" + un aria-label sur le svg le rend accessible sous iOS (7.1.2). \o/
  
  Je teste prochainement si cette solution fonctionne sur les autres couples et mets à jour le billet en conséquence.
  
  Merci encore !
  Johan
  
  Répondre