Webapp : accessibilité des icônes SVG utilisés dans les liens de pied page

French
, , ,
1

L’idée est de rajouter en pied de page de l’application, les liens sous forme d’icône pour donner accès facilement à la documentation, au forum et au compte twitter.

La solution la plus simple est d’utiliser des images SVG directement embarqué dans le code HTML (pas de requête HTTP supplémentaire, poids supplémentaire dérisoire pour le HTML). Toutefois en terme d’accessibilité beaucoup d’exemples semblent contradictoire…

Actuellement, dans la branche develop j’ai utilisé ce code
qui semblait le plus adapté :

<a class="asqatasun-link-svg"
   href="https://twitter.com/Asqatasun"
   title="Follow us on Twitter"
   aria-label="Follow us on Twitter">
    <svg class="icon_twitter"
         viewBox="0 0 1792 1792"
         xmlns="http://www.w3.org/2000/svg">
        <path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"/>
    </svg>
</a>

Toutefois, cela ne semble pas si simple si l’on regarde les tests effectués avec différentes configurations (navigateur/lecteur d’écran) : svg, liens et lecteurs d’écran - Atalan, le Blog

Où la technique du texte caché semble être la plus robuste.

La question est quelle est la bonne technique pour cacher
du texte qui sera utilisé par les technologies d’assistance ?

cf commentaires
http://www.accede-web.com/notices/html-css-javascript/6-images-icones/6-2-svg-images-vectorielles/

2

solution en utilisant une image vide d’1 px…
efficace ?

<a class="asqatasun-link-svg"
   href="https://twitter.com/Asqatasun"
   title="Follow us on Twitter">
    <img alt="Twitter" src="data:image/gif;base64,R0lGODdhAQABAIAAAP///////ywAAAAAAQABAAACAkQBADs=">
    <svg class="icon_twitter"
         viewBox="0 0 1792 1792"
         xmlns="http://www.w3.org/2000/svg">
        <path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"/>
    </svg>
</a>
3

Et pourquoi pas simplement l’image twitter en base64?
Comme ca, pas d’appel serveur, et pas de double définition de l’image.

koj

4

@koj, dans les 2 exemples de code, il n’y a pas d’appel serveur.
SVG inline = svg embarqué comme du base64 = pas de requête

Les avantages par rapport au base 64 :

  • pas de pixellisation en cas de zoom
  • taille d’affichage modifiable facilement sans refaire l’image
  • poids inférieur du SVG inline par rapport à une image en base 64
    (sauf pour les petites tailles)

PNG, 24x24 = 327 octets et 436 octets en base64
PNG, 32x32 = 470 octets et 628 octets en base64
SVG = 494 octects

<style>
.sr-only {
   position:absolute;
   width:1px;
   height:1px;
   padding:0;
   margin:-1px;
   overflow:hidden;
   clip:rect(0,0,0,0);
   border:0
}
</style>
<a class="asqatasun-link-svg"
   href="https://twitter.com/Asqatasun"
   title="Follow us on Twitter">
    <span class="sr-only">Twitter</span>
    <svg class="icon_twitter"
         viewBox="0 0 1792 1792"
         xmlns="http://www.w3.org/2000/svg">
        <path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"/>
    </svg>
</a>