svg, liens et lecteurs d’écran

6 commentaires

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 JAWS NVDA VoiceOver
11 13 14 2014.2 iOS 7.1.2
IE 11 Supporté Supporté Supporté Supporté Non-testé
FF 30 Non-supporté Non-supporté Non-supporté Non-supporté Non-testé
Safari Non-testé Non-testé Non-testé Non-testé Non-supporté

À 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 JAWS NVDA VoiceOver
11 13 14 2014.2 iOS 7.1.2
IE 11 Supporté Supporté Supporté Supporté Non-testé
FF 30 Non-supporté Non-supporté Non-supporté Supporté Non-testé
Safari Non-testé Non-testé Non-testé Non-testé Non-supporté

À 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 JAWS NVDA VoiceOver
11 13 14 2014.2 iOS 7.1.2
IE 11 Supporté Supporté Supporté Supporté Non-testé
FF 30 Non-supporté Non-supporté Non-supporté Non-supporté Non-testé
Safari Non-testé Non-testé Non-testé Non-testé Non-supporté

À 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 JAWS NVDA VoiceOver
11 13 14 2014.2 iOS 7.1.2
IE 11 Supporté Supporté Supporté Supporté Non-testé
FF 30 Non-supporté Non-supporté Non-supporté Supporté Non-testé
Safari Non-testé Non-testé Non-testé Non-testé Non-supporté

À 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 JAWS NVDA VoiceOver
11 13 14 2014.2 iOS 7.1.2
IE 11 Non-supporté Non-supporté Non-supporté Supporté Non-testé
FF 30 Non-supporté Non-supporté Non-supporté Supporté Non-testé
Safari Non-testé Non-testé Non-testé Non-testé Non-supporté

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 JAWS NVDA VoiceOver
11 13 14 2014.2 iOS 7.1.2
IE 11 Non-supporté Non-supporté Supporté Supporté Non-testé
FF 30 Non-supporté Non-supporté Non-supporté Supporté Non-testé
Safari Non-testé Non-testé Non-testé Non-testé Supporté

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 JAWS NVDA VoiceOver
11 13 14 2014.2 iOS 7.1.2
IE 11 Non-supporté Supporté Supporté Supporté Non-testé
FF 30 Non-supporté Supporté Supporté Supporté Non-testé
Safari Non-testé Non-testé Non-testé Non-testé Non-supporté

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 JAWS NVDA VoiceOver
11 13 14 2014.2 iOS 7.1.2
IE 11 Non-supporté Non-supporté Non-supporté Supporté Non-testé
FF 30 Non-supporté Non-supporté Non-supporté Non-supporté Non-testé
Safari Non-testé Non-testé Non-testé Non-testé Non-supporté

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 JAWS NVDA VoiceOver
11 13 14 2014.2 iOS 7.1.2
IE 11 Non-supporté Supporté Supporté Supporté Non-testé
FF 30 Supporté Supporté Supporté Supporté Non-testé
Safari Non-testé Non-testé Non-testé Non-testé Non-supporté

À 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é

<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 JAWS NVDA VoiceOver
11 13 14 2014.2 iOS 7.1.2
IE 11 Supporté Supporté Supporté Supporté Non-testé
FF 30 Supporté Supporté Supporté Supporté Non-testé
Safari Non-testé Non-testé Non-testé Non-testé Supporté

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

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

Répondre à Johan Ramon

Tous les champs sont obligatoires.

Haut de page