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

Attention

Par défaut, les balises <svg> reçoivent le focus clavier sous Internet Explorer.

Pour optimiser la navigation au clavier dans ce navigateur, l’attribut focusable="false" doit être ajouté sur chaque balise <svg> utilisée pour afficher une image.

<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" focusable="false">[…]</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>.

<svg> informatifs

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

  1. Ajouter une balise (<span>, par exemple) juste après la balise <svg>.
  2. Intégrer le texte de remplacement permettant de rendre explicite l’image SVG dans cette nouvelle balise.
  3. Masquer cette balise en CSS en la rendant invisible ou en la sortant de l’écran, respectivement à l’aide des propriétés CSS « opacity: 0 » ou « position: absolute ».
  4. Ajouter un attribut aria-hidden="true" sur la balise <svg>.

Dans l’exemple de code HTML ci-après, le <svg> indique qu’il s’agit d’une étape de marche :

<p>
  <svg aria-hidden="true" focusable="false">
    [...]
  </svg>  
  <span class="hors-ecran">Marche : </span>
  <span>2 min</span>
  <span>111 m</span>
</p>
.hors-ecran {
   position: absolute;
   left: -999999rem;
}

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é visible) servant de lien ou de bouton est intégré dans le code HTML :

  1. Ajouter un attribut role="img" sur la balise <svg>.
  2. Ajouter une balise <title> après l’ouverture de la balise <svg> et la renseigner avec les informations permettant de rendre le lien ou le bouton explicite.
  3. Ajouter un attribut id sur cette balise <title> et le renseigner avec une valeur unique.
  4. Ajouter un attribut aria-labelledby sur la balise <svg> et renseigner cet attribut avec la même valeur que celle de l’attribut id de la balise <title>.

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

<a href="/">
  <svg role="img" aria-labelledby="icone-svg-accueil" focusable="false">
    <title id="icone-svg-accueil">Accueil</title>
    [...]
   </svg>
</a>

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 […] ».


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 la version actuelle du Référentiel Général d’Accessibilité pour les Administrations (RGAA 3 2017).

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

Aller plus loin

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

  • Par Laurent Bracquart, le 12 juillet 2018 à 17h15.

    À l’heure actuelle, lorsque la balise <svg> est utilisée pour afficher une image vectorielle informative en dehors d’un lien ou d’un bouton, la technique standard pour fournir une alternative textuelle à cette image (balise <title> enfant de l’élément <svg>) n’est pas suffisamment compatible avec les technologies d’assistance pour être recommandée par défaut.

    La technique du texte caché, plus robuste, est donc recommandée ci-dessous jusqu’à meilleure compatibilité de la technique standard avec les technologies d’assistance.

    Répondre

  • Par Laurent Bracquart, le 12 juillet 2018 à 17h15.

    À l’heure actuelle, lorsque la balise <svg> est utilisée pour afficher une image vectorielle informative en dehors d’un lien ou d’un bouton, la technique standard pour fournir une alternative textuelle à cette image (balise <title> enfant de l’élément <svg>) n’est pas suffisamment compatible avec les technologies d’assistance pour être recommandée par défaut.

    La technique du texte caché, plus robuste, est donc recommandée ci-dessous jusqu’à meilleure compatibilité de la technique standard avec les technologies d’assistance.

    Répondre

Ajouter un commentaire

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

Mises à jour

12/07/2018
Mise à jour de la fiche.
16/03/2016
Mise à jour du titre de la fiche.

Haut de page