Attribuez à chaque symbole répété son propre élément SVG externe avec un nom accessible, tout en ne réutilisant que le dessin qu’il contient. Ce guide montre comment créer une petite liste de graphiques légendés sur un Mac et séparer la mise en page, les coordonnées SVG et les noms accessibles.

Pour un graphique simple, MDN recommande d’ajouter role="img" et un libellé à l’élément SVG externe afin que les technologies d’assistance puissent le traiter comme une seule image. Le modèle pratique présenté ici utilise un élément enveloppe par occurrence, chacun faisant référence à son propre libellé. Rôle ARIA : img

Où placer le libellé accessible de chaque instance ?

Attribuez le nom à l’élément qui représente l’occurrence concernée. Lorsque plusieurs graphiques distincts réutilisent un même symbole, attribuez à chaque élément svg externe sa propre référence aria-labelledby ou son propre aria-label. Gardez le symbole partagé centré sur la géométrie réutilisable.

Cette approche respecte la distinction entre une définition et ses instances affichées. L’élément SVG use référence des graphiques et affiche le contenu réutilisé au moyen d’un arbre fantôme ; les formes ainsi générées ne sont pas des nœuds enfants ordinaires dans le DOM de la page. Réutiliser un dessin ne crée donc pas dans votre HTML des copies modifiables séparément de son libellé interne. Structure du document — SVG 2

Un titre stocké dans le symbole partagé ne peut pas non plus fournir des textes différents pour différentes occurrences sans autre mécanisme de nommage. Par exemple, le même dessin de tuile neutre peut représenter Exemple Alpha à un endroit et Exemple Bêta à un autre. Ces noms doivent être associés aux deux occurrences, même si leur géométrie est identique.

Choisissez la méthode de nommage en fonction de l’endroit où se trouve déjà le texte utile :

Situation Modèle recommandé
Une légende visible concise nomme le graphique Faites référence à son ID unique avec aria-labelledby sur le SVG externe.
Le graphique a besoin d’un nom, mais n’a pas de légende visible Ajoutez un title unique dans chaque SVG externe et référencez-le avec aria-labelledby, ou utilisez aria-label.
Le graphique ne fait que décorer un texte qui transmet déjà toutes les informations Masquez le SVG aux technologies d’assistance au lieu d’ajouter un nom redondant.
Plusieurs occurrences doivent rester repérables individuellement Évitez de les regrouper dans une seule image role="img" externe.

MDN recommande de référencer le texte visible lorsqu’il peut nommer le SVG. Sa documentation sur le rôle d’image explique également que role="img" présente le contenu comme une seule entité, d’où l’importance de la limite de l’élément enveloppe. L’élément SVG de nom accessible, Rôle ARIA : img

Créer une page complète avec deux instances nommées indépendamment

L’exemple suivant est un document HTML complet qui ne contient que du texte synthétique et un dessin simple composé d’un cercle et d’un carré. Il ne nécessite ni JavaScript, ni sprite externe, ni bibliothèque, ni processus de compilation. Sur votre Mac, enregistrez-le depuis un éditeur de code en texte brut sous le nom symbol-labels.html, puis ouvrez le fichier dans un navigateur de bureau.

Les deux occurrences font référence à tile-mark, mais leurs éléments SVG externes font référence à des légendes visibles différentes. Cet exemple utilise le modèle de nommage par texte visible documenté par MDN. L’attribut href est le mécanisme de référence SVG actuel ; MDN indique que xlink:href est obsolète. L’élément SVG de nom accessible, Élément SVG use

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Independently labeled SVG instances</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      color: #222;
    }
    .sprite {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .samples {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      max-width: 36rem;
      padding: 0;
      list-style: none;
    }
    .sample {
      padding: 1rem;
      border: 1px solid #777;
    }
    .sample svg {
      display: block;
      width: 5rem;
      height: 5rem;
      margin-bottom: 0.75rem;
    }
    @media (max-width: 30rem) {
      .samples { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <svg class="sprite" xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true">
    <defs>
      <symbol id="tile-mark" viewBox="0 0 48 48">
        <rect x="4" y="4" width="40" height="40" rx="6"
              fill="none" stroke="currentColor" stroke-width="2" />
        <circle cx="24" cy="24" r="9" fill="currentColor" />
      </symbol>
    </defs>
  </svg>

  <h1>Sample tiles</h1>
  <ul class="samples">
    <li class="sample">
      <svg xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 48 48" role="img"
           aria-labelledby="sample-alpha-label">
        <use href="#tile-mark" width="48" height="48"
             aria-hidden="true" />
      </svg>
      <span id="sample-alpha-label">Sample Alpha</span>
    </li>
    <li class="sample">
      <svg xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 48 48" role="img"
           aria-labelledby="sample-beta-label">
        <use href="#tile-mark" width="48" height="48"
             aria-hidden="true" />
      </svg>
      <span id="sample-beta-label">Sample Beta</span>
    </li>
  </ul>
</body>
</html>

Les noms accessibles attendus sont Exemple Alpha et Exemple Bêta. Il s’agit des résultats attendus d’après le balisage, et non de résultats rapportés de tests de navigateur. Le dessin à l’intérieur de chaque élément enveloppe est explicitement masqué aux technologies d’assistance ; l’élément SVG externe nommé reste exposé. Les correspondances d’accessibilité SVG distinguent les descendants masqués de leur parent exposé. Correspondances API d’accessibilité SVG

Pour ajouter une troisième occurrence, réutilisez href="#tile-mark", créez un nouvel ID de légende et mettez à jour le aria-labelledby de cette occurrence pour qu’il corresponde. Gardez la référence au symbole partagée et la référence au libellé propre à l’occurrence.

Les légendes visibles peuvent également être rencontrées séparément lors de la lecture par un lecteur d’écran. Si la tuile n’ajoute aucune information au-delà de sa légende, utilisez plutôt le modèle décoratif : supprimez role="img" et aria-labelledby du SVG externe, puis ajoutez-lui aria-hidden="true". Conservez la légende visible. Les correspondances SVG documentent l’exclusion au moyen de aria-hidden. Correspondances API d’accessibilité SVG

Quel mécanisme du navigateur contrôle chaque partie de la mise en page ?

Cet exemple comporte trois tâches distinctes : disposer les cartes, dessiner le symbole et calculer les noms accessibles. Modifier l’une d’elles ne réalise pas automatiquement les autres.

CSS Grid organise les éléments de liste HTML. Déclarer display: grid transforme les enfants directs du conteneur en éléments de grille ; grid-template-columns définit les colonnes. Ici, la requête média fait passer la liste de deux colonnes à une. Cela modifie la mise en page des cartes. Concepts de base de la disposition en grille

Les coordonnées SVG contrôlent les formes à l’intérieur de chaque graphique. L’attribut viewBox="0 0 48 48" du symbole définit son rectangle de coordonnées, et les dimensions de l’élément use déterminent la taille de la fenêtre d’affichage du symbole référencé. Ces dimensions ne créent pas de colonnes de cartes HTML ni d’espacement pour les légendes. SVG 2 distingue explicitement la mise en page des graphiques réutilisés de celle des boîtes CSS. Structure du document — SVG 2

Le nom accessible associe chaque SVG externe à du texte au moyen de aria-labelledby. Il ne dessine pas de texte, ne positionne pas de légende et ne redimensionne pas un graphique. Les recommandations du W3C sur le nommage décrivent cet attribut comme une référence au contenu utilisé pour calculer le nom accessible. Fournir des noms et descriptions accessibles

Cette séparation fournit une règle de diagnostic utile : inspectez Grid lorsque les cartes sont mal placées, les coordonnées SVG lorsque les dessins sont mal placés et les références de nommage lorsque les libellés sont incorrects. Ajouter x ou y à use déplace les graphiques réutilisés dans l’espace SVG ; cela ne déplace pas la légende HTML. De plus, les dimensions use ne remplacent pas de manière générale la mise à l’échelle de formes référencées quelconques : MDN documente leur effet lorsqu’on référence un SVG ou un symbole doté d’un viewBox. Élément SVG use

Que faire en l’absence de légende visible ?

Utilisez un titre propre à chaque instance lorsque le graphique a besoin d’un nom, mais que la conception ne comporte pas de texte visible adapté. Le fragment suivant remplace le premier SVG visible de l’exemple complet. Il dépend toujours du symbole tile-mark existant :

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48" role="img"
     aria-labelledby="sample-alpha-title">
  <title id="sample-alpha-title">Sample Alpha</title>
  <use href="#tile-mark" width="48" height="48"
       aria-hidden="true" />
</svg>

Pour chaque occurrence supplémentaire, attribuez un ID différent au titre et mettez à jour la référence de son élément parent. MDN décrit title comme un élément de nom accessible SVG et recommande de le placer en premier pour assurer la compatibilité avec SVG 1.1. Le texte du titre n’est pas affiché visiblement dans le dessin, bien que les navigateurs l’affichent généralement sous forme d’infobulle. L’élément SVG de nom accessible

Pour un nom court sans élément de titre, remplacez aria-labelledby par aria-label="Sample Alpha" sur le SVG externe de cette occurrence. Évitez de conserver des attributs de nommage concurrents : le W3C indique que aria-labelledby a la priorité sur aria-label. Une référence résiduelle peut donc empêcher votre nouvelle chaîne de devenir le nom. Fournir des noms et descriptions accessibles

N’essayez pas d’attribuer un titre propre à une occurrence en modifiant un clone généré. SVG 2 spécifie un arbre fantôme d’instance en lecture seule. Le projet de travail actuel des correspondances API d’accessibilité SVG limite également la correspondance des références d’ID ARIA dans les arbres fantômes use. Ce sont des limites documentées ; elles ne prouvent pas que tous les navigateurs se comportent de façon identique. En gardant le libellé sur l’élément enveloppe écrit dans le document, vous évitez de dépendre de la recherche dans les clones. Structure du document — SVG 2, Correspondances API d’accessibilité SVG

Comment vérifier et diagnostiquer le résultat ?

Vérifiez séparément le rendu visuel et les noms accessibles dans le navigateur de votre Mac. Inspectez chaque SVG externe dans les outils d’accessibilité du navigateur, puis vérifiez-le avec VoiceOver. Le W3C recommande expressément de tester avec des technologies d’assistance les noms calculés au moyen de aria-labelledby. Fournir des noms et descriptions accessibles

Utilisez les résultats attendus suivants comme petite liste de vérification :

  1. Les deux dessins apparaissent avec leurs légendes visibles respectives.
  2. Chaque SVG externe a un rôle d’image et le nom correspondant.
  3. La définition du symbole n’apparaît pas comme un graphique supplémentaire porteur de sens.
  4. Le rétrécissement de la fenêtre modifie la disposition des cartes, tandis que chaque graphique conserve son libellé.
  5. La modification de la deuxième légende seulement change uniquement le nom calculé du deuxième graphique.

Si les deux graphiques reçoivent le même nom, comparez d’abord leurs valeurs aria-labelledby. Vérifiez ensuite que chaque ID référencé identifie le texte voulu. Ne supposez pas que la proximité visuelle établit le lien : l’attribut référence explicitement un élément par son ID. Fournir des noms et descriptions accessibles

Si le dessin entier est annoncé comme une seule image alors que vous avez besoin de plusieurs images indépendantes, vérifiez où se trouve role="img". Un rôle d’image unique autour de toute la collection demande aux technologies d’assistance de traiter celle-ci comme une seule entité. Conservez des éléments enveloppes d’image distincts pour les graphiques simples distincts. Rôle ARIA : img

Si vous incorporez réellement un fichier SVG au moyen de l’élément HTML img, utilisez l’attribut alt de cet élément pour chaque occurrence. WHATWG définit alt comme un contenu de remplacement équivalent pour l’image. Le SVG intégré utilise d’autres mécanismes de nommage et ne prend pas en charge alt comme attribut de texte de remplacement. Norme HTML : l’élément img, Introduction au SVG dans HTML

Pour cette tâche de mise en page, conservez une définition de dessin partagée et prenez une décision de nommage pour chaque occurrence. Choisissez l’élément enveloppe en fonction de ce que le lecteur doit rencontrer, associez-le au texte approprié et vérifiez le nom accessible obtenu indépendamment de la mise en page visuelle.

Sources