Trop d'attributs alt d'image en double. Que faire?
J'ai une table. Et comme vous pouvez le voir ci-dessous, il y a beaucoup d'attributs alt en double.
Quel est le meilleur moyen d'éviter cela tout en ayant toujours du code HTML5 valide?
<table id="benefits">
<thead>
<tr>
<th></th>
<th>Unregistered</th>
<th><b>Basic</b></th>
<th><b style="color: #a2cb47">Premium</b></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td class="center">Free</td>
<td class="center">Free</td>
<td class="center"><b>$9.99/mo</b></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Complete ad-free experience</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
<tr>
<td>Unlimited parallel downloads</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
<tr>
<td>Direct downloads</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
<tr>
<td>Maximum file size</td>
<td class="center">100 MB</td>
<td class="center">1 GB</td>
<td class="center">10 GB</td>
</tr>
<tr>
<td>Your files never expire</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
<tr>
<td>Intuitive file manager</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
<tr>
<td>Personal storage</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center">10 GB</td>
<td class="center">1 TB</td>
</tr>
<tr>
<td>Password protect your files</td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
<tr>
<td>No reCAPTCHA codes</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
</tbody>
</table>
Il est parfaitement valide que l'attribut alt soit vide, si les images sont purement décoratives.
Sinon, si vous restituez la même image à plusieurs reprises, il est logique que l'attribut alt soit identique pour tous. Cela ne présente aucun avantage négatif en termes de référencement, et vos images cross/tick ont peu de chances d’être classées dans les recherches d’images de toute façon.
Une autre solution, en particulier si les images sont décoratives, consiste à utiliser les "sprites" CSS, comme le suggère Martijn.
Tout d’abord, tilisez de meilleurs attributs alt.
Sérieusement, "Cross" et "Checkmark" sont des attributs horribles alt. Pour voir pourquoi, essayez d'afficher votre page dans un navigateur en mode texte uniquement. Avec votre code HTML tel qu'il est, vous verrez quelque chose comme:
Unregistered Basic Premium
-------------------------------------------------------------------
Complete ad-free experience Cross Cross Checkmark
Unlimited parallel downloads Cross Cross Checkmark
Direct downloads Cross Cross Checkmark
Maximum file size 100 MB 1 GB 10 GB
Your files never expire Cross Cross Checkmark
Intuitive file manager Cross Cross Checkmark
Personal storage Cross 10 GB 1 TB
Password protect your files Checkmark Checkmark Checkmark
No reCAPTCHA codes Cross Checkmark Checkmark
-------------------------------------------------------------------
Free Free $9.99/mo
C'est affreux, non? Imaginez maintenant que vous êtes aveugle et écoutez cette table vous être lue à haute voix par un lecteur d'écran: "croix ... croix ... coche ... croix ... croix ... coche ..."
Le véritable objectif d'un attribut alt est de servir d'alternative texte à l'image, et non de décrit l'image. Dans ce cas particulier, résoudre ce problème est en fait assez simple: réfléchissez un peu à ce que vos icônes représentent réellement . C'est vrai; l'icône en croix signifie "Non", et la coche signifie "Oui". Alors changez simplement votre HTML en:
<td class="center"><img src="/images/cross.png" alt="No" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Yes" height="15"></td>
et votre tableau a soudainement une bien meilleure apparence en tant que texte:
Unregistered Basic Premium
----------------------------------------------------------------
Complete ad-free experience No No Yes
Unlimited parallel downloads No No Yes
Direct downloads No No Yes
Maximum file size 100 MB 1 GB 10 GB
Your files never expire No No Yes
Intuitive file manager No No Yes
Personal storage No 10 GB 1 TB
Password protect your files Yes Yes Yes
No reCAPTCHA codes No Yes Yes
-----------------------------------------------------------------
Free Free $9.99/mo
Vous pouvez supprimer l'image de la td et l'ajouter simplement à la td. Dans votre exemple, vous n'avez pas réellement besoin de l'image, elle n'a pas de valeur de contenu ni de valeur de référencement. À cause de cela, vous pouvez faire ceci:
<td class="center Crossed" title="Cross"></td>
.Cross{
background: url('/images/cross.png') no-repeat center center;
height: 15px;
}
Cela présente un autre avantage: vous réduisez le nombre d'éléments dans une page, ce qui pourrait le rendre un peu plus rapide. De plus, si vous souhaitez le remplacer par cross2.png, il vous suffit de modifier 1 valeur CSS.
J'ai enlevé l'image, si vous voulez toujours cliquer sur un élément (la td fonctionne bien pour cela), vous pouvez toujours la changer en span avec la class, idem principe.
Remarque: cette astuce peut être effectuée ici, car les images n'ont aucune valeur de référencement. En remplaçant les images, vous supprimez la quantité infime de référencement que l'alt et le titre donnent, ce qui ne peut donc pas être fait pour les images importantes pour le référencement. Vous devez seulement indiquer si vos paquets ont ou non cette fonctionnalité incluse
Hors sujet:
#benefits td{
text-align: center;
}
#benefits td:nth-child(1){
text-align: left;
}
Cela supprimerait la nécessité d'ajouter une classe dans chaque td, nettoyant ainsi votre code.
- Ne fonctionne pas dans IE8 et inférieur.
- Vous devrez peut-être le changer en #benefits tr>td:nth-child(1) pour le nth-child
- Vous pouvez faire la croix de la même manière que le text-align
Il n’ya rien de mal à avoir des balises alt en double car son travail consiste à décrire les images destinées aux lecteurs d’écran et aux utilisateurs dont les images sont désactivées. Donc, si vous avez les images sur la page plusieurs fois, il est probable que vous ayez des balises alt en double - c’est sémantiquement correct.
En disant tout ce que vous pourriez cependant décrire vos images différemment pour chacun, par exemple.
<td>Your files never expire</td>
<td class="center"><img src="/images/cross.png" alt="Cross for files expired 1" height="15"></td>
<td class="center"><img src="/images/cross.png" alt="Cross for files expired 2" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark for files expired" height="15"></td>
En espérant que cela ait du sens, l’essentiel est que les alt-tags servent à décrire les images pour les utilisateurs aveugles qui utilisent des lecteurs d’écran ou ceux dont les images sont désactivées sur leur navigateur, entre autres.