Un petit excercice pour mettre en pratique les différents points précédemment abordés.

Ce que j’ai fait :

• modifier le code du blog pour afficher les liens de mes différents réseaux sociaux

Aperçu du code

Analyse du code existant et problèmes soulevés

Le code initial du footer se présente ainsi :

<footer class="footer">
  <div class="footer__inner">
    <a href="https://github.com/elbuffeto">
      <i class="svg-icon github"></i>
    </a>

    <a href="https://www.linkedin.com/in/lorianebuffet">
      <i class="svg-icon linkedin"></i>
    </a>

    <a href="https://www.twitter.com/elbuffeto">
      <i class="svg-icon twitter"></i>
    </a>
  </div>
</footer>

Les icônes représentant les réseaux sociaux sont affichés dans la balise <i></i>, en CSS via la propriété background-image.

Ce code pose plusieurs problèmes :

• en naviguant sur le blog avec Talkback, la seule information remontée par le lecteur d’écran au clic sur ces icônes est “lien”. L’utilisateur n’a donc aucune idée de la page vers laquelle ces liens mènent.

• les icônes sont porteuses de sens - car elles représentent les logos des réseaux sociaux et donnent donc une indication sur la destination des liens - mais elles sont affichées via du CSS en image de fond, sans alternative textuelle. La désactivation des styles entraîne donc une perte d’information. De manière générale, l’usage d’image de fond porteuse de sens est déconseillé (voir à ce sujet l’article de Web Accessibility In Mind(lien externe))

• la balise <i></i> a une valeur sémantique bien précise qui ne me semble pas pertinente pour afficher une icône. Selon la documentation de Mozilla :

  L’élément HTML représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l’expression des pensées d’un personnage.

• les différents liens se présentent sous forme de liste, il serait donc intéressant de les baliser comme tel, dans un souci de sémantique et d’accessibilité.

Refonte du code existant

Voici le nouveau code :

<div class="footer__inner">
  <ul class="footer__list social-links">
    <li class="social-links__item">
      <a href="https://github.com/elbuffeto">
        <img src="../images/socials/github.svg" alt="Compte github de Loriane Buffet" class="social-links__icon">
      </a>
    </li>

    <li class="social-links__item">
      <a href="https://www.linkedin.com/in/lorianebuffet">
        <img src="../images/socials/linkedin.svg" alt="Compte linkedin de Loriane Buffet" class="social-links__icon">
      </a>
    </li>

    <li class="social-links__item">
      <a href="https://www.twitter.com/elbuffeto">
        <img src="../images/socials/twitter.svg" alt="Compte twitter de Loriane Buffet" class="social-links__icon">
      </a>
    </li>
  </ul>
</div>

Parmi les changements notables :

• j’ai balisé les liens sous forme de liste
• les icônes ne sont plus générées via une image de fond mais inclues directement dans une balise <img /> comportant une alternative textuelle pour expliciter la destination du lien
• je n’ai pas jugé utile de rajouter une mention “lien externe”, l’intitulé de l’alternative étant suffisamment explicite

Note : Typiquement dans cette situation, l’utilisation d’une police d’icônes aurait été intéressante, surtout pour générer par la suite d’autres icônes en fonction des besoins.