Garantir l'accessibilité sur les liens d'icônes

... automatiquement avec un petit script côté client

Je dis progressivement adieu aux polices d'icônes dans ce blog au profit des fichiers SVG, que je préfère intégrer à l'aide de background-image afin de rester flexible.

Lors de la modification, j'ai remarqué que même si j'ai parfois fourni des liens uniquement sous forme d'icônes avec un titre, ceux-ci ne jouent aucun rôle en termes d'accessibilité. Les personnes qui dépendent d'un lecteur d'écran ne sont pas encore capables de reconnaître quels sont ces liens.

Où y avait-il deux façons de changer cela : aria-label ou ajouter du texte et le rendre invisible. Le premier n’est fondamentalement qu’une béquille qui n’est même pas entièrement prise en charge par tous les navigateurs et seul le texte invisible est resté. J'ai trouvé une solution adaptée et très efficace sur Stack Overflow de GrahamTheDev :

<a class="my-icon-link" title="My Link">
  <span class="visually-hidden">My Link</span>
</a>

.my-icon-link {
  background-image: url(/images/icons/my-icon.svg);
}

.visually-hidden { 
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
  clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
  white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

Ma tâche était maintenant d'étendre tous les liens d'icônes sans texte dans le code avec le SPAN... ou de trouver un automatisme pour cela, car tous ces liens ont déjà un titre et c'est exactement ce dont il a besoin à transférer vers le texte du lien. Étant donné que l'accessibilité n'est pas altérée lorsque le texte est injecté via JavaScript, j'ai trouvé la solution côté client suivante, qui est intégrée dans le pied de page de chaque page via un script :

function ensureIconLinkText() {
  let linksWithoutText = document.querySelectorAll("a[href^='http']:empty");
  linksWithoutText.forEach(e => {
    if (window.getComputedStyle(e).display !== "none") {
      if (e.title) {
        let eText = document.createElement("span");
        eText.innerText = e.title;
        eText.classList.add("visually-hidden");
        e.append(eText);
      } else {
        console.error("Link without Text and Title: " + e.outerHTML);
      }
    }
  });
}

ensureIconLinkText();

Le code sous forme de texte :
Trouvez toutes les balises A sans texte, parcourez-les et si l'élément n'a pas été intentionnellement masqué et si un titre est défini, créez une nouvelle balise SPAN avec sa valeur de texte et insérez-la dans le lien, sinon affichez une erreur dans le console

Avec cette approche, je peux laisser les liens tels quels et voir dans la console si j'ai oublié un titre quelque part.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!