Attribut alt ou title pour la balise i
J'utilise font-awesome et affiche leurs polices comme ça:
<i class="icon-lock"></i>
Cela affichera un joli petit symbole de cadenas. Pour que l'utilisateur sache ce que cela signifie exactement, j'ai essayé d'ajouter des attributs tels que title et alt, mais en vain.
Existe-t-il un attribut que je peux utiliser pour la balise <i> qui exécute la même tâche que alt pour les images et le titre pour les liens?
Vous pouvez utiliser l'attribut title sur un élément i, comme n'importe quel élément, par exemple.
<i class="icon-lock" title="This symbolizes your being locked inside"></i>
Que cela aide est une question plus difficile. Les navigateurs affichent généralement la valeur de l'attribut title sous la forme d'une "info-bulle" au passage de la souris, mais pourquoi l'utilisateur passerait-il la souris sur l'icône? Et ces info-bulles sont peu utilisables; les info-bulles CSS fonctionnent souvent mieux.
Les lecteurs d’écran peuvent donner à l’utilisateur un accès facultatif aux attributs title, mais je ne sais pas trop ce qu’ils font avec les éléments dont le contenu est vide.
Vous devriez plutôt utiliser <span> ou quelque chose du genre. Vous pouvez utiliser l'attribut title="" pour donner du texte en survol, si c'est ce que vous recherchez. En ce qui concerne l’accessibilité pour les lecteurs d’écran ou la valeur SEO, vous pouvez ajouter le code CSS suivant:
.icon-lock{
text-indent:-99999px;
}
Et ensuite, écrivez votre balisage comme suit:
<span class="icon-lock">What I want the screen reader to say</span>
Les balises <i> servent à baliser du texte. Vous changez le sens sémantique de cette balise en quelque chose qui n’a rien à voir avec l’italique (et même la balise en italique est une mauvaise idée) .Vous devriez plutôt utiliser SPAN.
Les éléments italiques ne prennent pas en charge les attributs alt, les éléments IMG le font. Si vous voulez un attribut ALT, utilisez une image.
Je pense que le rôle des polices qui agissent comme des images devrait être réservé à role = "img". Ceci peut ensuite être utilisé avec aria-label = "alt-text". Cela fonctionne grâce à l'algorithme de nom accessible ARIA. Voir: Techniques Aria utilisant le rôle Img .