[Accessibilité] Images décoratives des réseaux sociaux et autres svg à ignorer pour les lecteurs d'écran

[seinhorn]

ETQ visiteur du blog en situation de handicap
Je souhaite pouvoir accéder aux contenus optimisés pour les outils d'assistance comme les lecteurs d'écran

Contexte

Actuellement les liens vers les Réseaux Sociaux ne sont pas optimisées pour l'accessibilité.

Besoin

Il faudrait permettre aux visiteurs du blog en situation de handicap d'avoir des informations significatives.

Solution

Faire en sorte que les mages décoratives des Réseaux Sociaux (RS) soient ignorées par les lecteurs d'écran mais qu'elles restent accessibles pour l'utilisateur.

1. Icônes SVG sur les pages AUTEUR

ajouter aria-hidden="true" sur les <svg xmlns="http://www.w3.org/2000/svg" [...]>
à faire sur l'ensemble des icônes svg du site

2. Liens de partage RS sur les pages ARTICLE et TUTORIEL

ajouter aria-label="Partager cet article sur [RS]" sur le lien
ajouter role="img" aria-hidden="true" sur l'image

remplacer par exemple :

<a href="https://www.facebook.com/sharer/sharer.php?u=https[...]" target="_blank" rel="noreferrer">
    <svg xmlns="http://www.w3.org/2000/svg" [...]>
        [...]
    </svg>
</a>

par :

<a href="https://www.facebook.com/sharer/sharer.php?u=https[...]" target="_blank" rel="noreferrer"
    aria-label="Partager cet article sur Facebook">
    <svg xmlns="http://www.w3.org/2000/svg" [...] role="img" aria-hidden="true">
        [...]
    </svg>
</a>

=> à faire pour l'ensemble des liens et icônes de partage

3. Liens de partage RS dans le FOOTER

ajouter la class visually-hidden dans les styles du projet (sauf si une classe identique existe déjà)
supprimer aria-label="[...]" sur le lien
ajouter la mention <span class="visually-hidden">[Texte relatif au lien]
ajouter role="img" aria-hidden="true" sur l'image

ajouter les styles suivants :

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ou :

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

remplacer par exemple :

<a href="https://blog.eleven-labs.com/feed.xml" target="_blank" aria-label="RSS" data-rss-link="true">
    <svg xmlns="http://www.w3.org/2000/svg" [...]>
        [...]
    </svg>
</a>
...
<a href="https://www.facebook.com/11Labs" target="_blank" aria-label="Facebook" data-social-link="facebook">
    <svg xmlns="http://www.w3.org/2000/svg" [...]>
        [...]
    </svg>
</a>
...

par :

<a href="https://blog.eleven-labs.com/feed.xml" target="_blank" data-rss-link="true">
    <span class="visually-hidden">Flux RSS du Blog Eleven Labs</span>
    <svg xmlns="http://www.w3.org/2000/svg" [...] role="img" aria-hidden="true">
        [...]
    </svg>
</a>
...
<a href="https://www.facebook.com/11Labs" target="_blank" data-social-link="facebook">
    <span class="visually-hidden">Eleven Labs sur Facebook</span>
    <svg xmlns="http://www.w3.org/2000/svg" [...] role="img" aria-hidden="true">
        [...]
    </svg>
</a>
...

=> à faire pour l'ensemble des liens et icônes

Documentation :
https://docs.google.com/spreadsheets/d/10vwRgRJj07PcW3w1iCc21QxfF6Gshn0s9-P8EGU8BKs/edit?gid=418219487#gid=418219487