6.2. Gérer l’alternative des SVG (images vectorielles)

<svg> décoratifs/illustratifs

Lorsqu’un <svg> est simplement décoratif ou illustratif, lui intégrer aria-hidden="true".

Dans l’exemple de code HTML ci-après, le <svg> accompagne simplement le titre « Messages d’erreur » (explicite par nature) :

<h2>
   <svg aria-hidden="true">[…]</svg>
   Messages d'erreur
</h2>

Attention

Un <svg> simplement décoratif ou illustratif ne doit pas posséder d’attributs title, aria-label, aria-labelledby et/ou aria-describedby.

De la même manière, il ne doit pas posséder de balises <title> et/ou <desc> renseignées.

<svg> informatifs

Lorsqu’un <svg> informatif est intégré dans le code HTML :

Dans l’exemple de code HTML ci-après, le <svg> indique que le lien « Conditions Générales de Vente » s’ouvre dans une nouvelle fenêtre :

<a …>
   Conditions Générales de Vente
   <svg …>
      <text opacity="0" …>(nouvelle fenêtre)</text>
      <g aria-hidden="true">
         <path aria-hidden="true" …></path>
      </g>
   </svg>
</a>

Attention

Il est fortement déconseillé de rédiger le texte de remplacement d’un <svg> en commençant par exemple par la mention « Image […] ».

<svg> liens ou boutons seuls

Lorsqu’un <svg> seul (sans intitulé) servant de lien ou de bouton est intégré dans le code HTML :

Dans l’exemple de code HTML ci-après, le <svg> pointe vers la page d’accueil d’un site :

<div>
   <svg role="link" …>
      <a …>
         <text opacity="0" …>Accueil</text>
      </a>
      <g aria-hidden="true">
         <path aria-hidden="true" …></path>
      </g>
   </svg>
</div>

Attention

Il est fortement déconseillé de rédiger le texte de remplacement d’un <svg> servant de lien ou bouton en commençant respectivement par « Lien vers […] » ou « Bouton […] ». Cette information sera déjà annoncée par les aides techniques respectivement via role="link" et role="button".


Remarque

Bien que les techniques présentées sur cette fiche fonctionnent sur le plus grand nombre de combinaisons de navigateurs/lecteurs d’écran, elles ne sont pas conformes à ce qui est demandé dans les référentiels français d’accessibilité (RGAA 3.0 et AccessiWeb HTML5/ARIA).

Pour obtenir une conformité, il est important de se référer directement à ces référentiels.

Aller plus loin

10 commentaires

  • Par Claire Bizingre, le 7 mars 2016 à 16h25.

    Bonjour,

    Pour un lien image avec une balise SVG, est-ce que le code de votre exemple peut être remplacé par celui-là :

    <a … title="Accueil">
       <svg  …>
          <text opacity="0" …>Accueil</text>
          <g aria-hidden="true">
             <path aria-hidden="true" …></path>
          </g>
       </svg>
    </a>
    

    l’attribut title sur la balise <a> pour avoir une info bulle d’indication pour tout le monde.

    Merci !

    Répondre

    • Par Johan Ramon, le 7 mars 2016 à 16h59.

      Bonjour Claire,

      Merci pour ton commentaire.

      En intégrant le title dans la balise <a>, il y a un risque de double restitution du texte « Accueil » : le contenu de la balise <text> + le contenu du title.

      Le risque est probablement le même en l’intégrant dans la balise <svg>.

      Par conséquent, il est préférable de l’intégrer dans une des balises dans le <svg> disposant de aria-hidden="true".

      Je viens par exemple de faire un test en l’intégrant dans la balise <g> et l’infobulle s’affiche correctement.

      Johan

      Répondre

      • Par Claire Bizingre, le 8 mars 2016 à 8h20.

        Et est-ce qu’il y avait une raison pour mettre la balise <a> dans la balise <svg> comme proposé dans le code de la fiche ?

  • Par Johan Ramon, le 8 mars 2016 à 10h33.

    Bonjour Claire,

    Pour l’écriture de cette fiche, nous nous sommes appuyés sur les résultats des tests réalisés par Aurélien Lévy. D’après ses tests, à l’heure actuelle, c’est cette solution qui est la mieux supportée par les différentes combinaisons de navigateurs / lecteurs d’écran.

    Au cas où il n’est pas possible d’obtenir ce code (<a> dans la balise <svg>), il est envisageable de partir sur la dernière solution présentée dans cet article : « svg, liens et lecteurs d’écran ». Soit <a> autour de la balise <svg> + texte caché.

    Johan

    Répondre

  • Par Sébastien Delorme, le 16 mars 2016 à 11h32.

    Mise à jour du titre de la fiche effectuée le 16/03/2016.

    Répondre

  • Par Onthemoon, le 31 janvier 2017 à 16h18.

    Bonjour,

    j’ai une problématique similaire à celle de Claire, j’ai des balises <a> ou <button> autour de certains svg.

    Dans votre réponse du 8 mars, vous conseillez la solution du texte caché. Cependant, dans le référentiel AccessiWeb HTML5/ARIA, il est stipulé qu’une balise <svg> doit posséder un attribut aria-label ou un élément desc. Si nous souhaitons respecter cette règle, tout en conservant le texte caché (par souci de compatibilité avec certains lecteurs d’écran), il y a, à nouveau, un risque de double restitution du texte.

    Un consensus a-t-il été trouvé depuis sur cette question ? Car après de nombreuses recherches à ce sujet, je trouve plusieurs avis contradictoires (texte caché, attributs title, aria-label, aria-labelledby, title, desc…).
    Il semble notamment impossible de conserver l’attribut title sur le a sans désagréments pour les lecteurs d’écran, ce qui est dommage si l’on souhaite proposer un tooltip aux utilisateurs.

    Actuellement, j’utilise cette écriture, par souci de suivre la règle AccessiWeb, qu’en pensez-vous ?

    <a href="/">
      <svg role="img" aria-label="lorem ipsum">
        <use xlink:href="#test">
      </svg>
    </a>
    

    Merci par avance pour vos éclaircissements.

    Répondre

    • Par David Monnehay, le 7 février 2017 à 18h54.

      Bonjour Pierre,

      Bien que le code que vous utilisez soit bien restitué par l’ensemble des aides techniques actuelles, d’anciennes versions de JAWS (encore beaucoup utilisées, du fait du prix important pour le renouvellement des licences) n’annoncent pas l’attribut aria-label placé sur une balise svg (même dans le cas de l’utilisation du role="img").

      Comme indiqué dans l’encart « Remarque » de la fiche, l’utilisation du texte caché est encore aujourd’hui la solution qui propose le meilleur niveau de compatibilité mais elle n’est effectivement pas conforme à ce qui et demandé dans les référentiels français d’accessibilité.

      David

      Répondre

      • Par Onthemoon, le 8 février 2017 à 10h38.

        Bonjour David, merci pour votre réponse.

        Etant donné que nous visons une labellisation bronze, nous devrons rester sur cette solution. Il nous faut désormais trancher entre une double restitution par les lecteurs, avec l’astuce du texte caché, ou l’abandon de la compatibilité avec les anciennes versions de ces lecteurs, en gardant le seul aria-label.

        Il est dommage que le référentiel ne tienne pas compte de cette problématique, surtout si, en pratique, les anciennes versions sont encore couramment utilisées.

  • Par levy, le 4 mai 2017 à 17h21.

    Hello,

    sur les svg décoratifs il faut ajouter un attribut focusable="false" pour éviter que l’élément ne reçoive le focus.

    Répondre

    • Par Sébastien Delorme, le 15 mai 2017 à 9h52.

      Bonjour Aurélien,

      Merci pour ton commentaire !
      Remarque tout à fait pertinente, nous allons en tenir compte.

      Nous avons prévu de modifier en profondeur cette fiche dans les prochains jours, nous intégrerons ce point à ce moment.

      Bien à toi,
      Sébastien.

      Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page