Attribut alt de l'image d'arrière-plan CSS
C’est un problème que je n’ai pas eu à aborder auparavant. J'ai besoin d'utiliser des balises alt sur toutes les images d'un site, y compris celles utilisées par l'attribut CSS background-image.
Autant que je sache, il n'y a pas de propriété CSS comme celle-ci. Quelle est la meilleure façon de le faire s'il vous plaît?
Les images de fond peuvent bien présenter des données! En fait, cela est souvent recommandé lorsque la présentation des icônes visuelles est plus compacte et conviviale qu'une liste équivalente de textes de présentation. Toute utilisation de images-objets peut bénéficier de cette approche.
Il est assez courant que les icônes des listes d'hôtels affichent des équipements. Imaginez une page répertoriant 50 hôtels et chaque hôtel disposant de 10 services. Un Sprite CSS serait parfait pour ce genre de chose - une meilleure expérience utilisateur parce que c'est plus rapide. Mais comment implémenter les balises ALT pour ces images? Exemple de site .
La réponse est qu'ils n'utilisent pas du tout le texte alt , mais utilisent plutôt l'attribut title du div qui le contient.
HTML
<div class="hotwire-fitness" title="Fitness Centre"></div>
CSS
.hotwire-fitness {
float: left;
margin-right: 5px;
background: url(/prostyle/images/new_amenities.png) -71px 0;
width: 21px;
height: 21px;
}
Selon le W3C (voir les liens ci-dessus), l'attribut title sert en grande partie au même objectif que l'attribut alt
Titre
Les valeurs de l'attribut title peuvent être rendues par les agents utilisateurs de différentes manières. Par exemple, les navigateurs visuels affichent fréquemment le titre sous la forme d'une "info-bulle" (un court message qui apparaît lorsque le périphérique de pointage s'interrompt sur un objet). Les agents utilisateurs audio peuvent parler les informations de titre dans un contexte similaire. Par exemple, la définition de l'attribut sur un lien permet aux agents d'utilisateurs (visuels et non visuels) d'informer les utilisateurs de la nature de la ressource liée:
alt
L'attribut alt est défini dans un ensemble de balises (à savoir, img, area et éventuellement pour input et applet) afin de vous permettre de fournir un équivalent textuel à l'objet.
Un équivalent textuel apporte les avantages suivants à votre site Web et à ses visiteurs dans les situations courantes suivantes:
- de nos jours, les navigateurs Web sont disponibles sur une très grande variété de plates-formes avec des capacités très différentes. certains ne peuvent pas afficher d'images du tout ou seulement un ensemble restreint de types d'images; certains peuvent être configurés pour ne pas charger les images. Si votre code contient l'attribut alt défini dans ses images, la plupart de ces navigateurs affichent la description que vous avez donnée à la place des images.
- certains de vos visiteurs ne peuvent pas voir les images, qu’ils soient aveugles, daltoniens, malvoyants; l'attribut alt est d'une grande aide pour les personnes qui peuvent s'y fier pour avoir une bonne idée de ce qu'il y a sur votre page
- les robots des moteurs de recherche appartiennent aux deux catégories ci-dessus: si vous souhaitez que votre site Web soit indexé comme il le mérite, utilisez l'attribut alt pour vous assurer qu'ils ne manqueront pas des sections importantes de vos pages.
Je pense que vous devriez lire cet article de Christian Heilmann. Il explique que les images d'arrière-plan sont SEULEMENT pour l'esthétique et ne doivent pas être utilisées pour présenter des données. Elles sont donc exemptes de la règle selon laquelle chaque image doit avoir un texte alternatif.
Extrait (souligné par moi):
Images de fond CSS qui sont par définition uniquement de valeur esthétique - pas de contenu visuel du document lui-même. Si vous avez besoin de mettre un image dans la page qui a un sens puis utilisez un élément IMG et donnez-le un texte alternatif dans l'attribut alt.
Je suis d'accord avec lui.
Mais, chaque image ne s'applique pas comme arrière-plan mais comme élément de balisage (<img... />) doit présenter l'attribut alt (texte alternatif), y compris un texte descriptif ou tout simplement vide (dans le cas d'images décoratives) ..__ Pour l’accessibilité, c’est l’une des règles les plus importantes.
Comme mentionné précédemment dans les réponses précédentes, il n'y a pas d'attribut alt (pris en charge) pour une balise div uniquement pour la balise img.
La vraie question est pourquoi vous devez ajouter l'attribut alt à toutes les images d'arrière-plan du site? Sur la base de cette réponse, il vous aidera à déterminer l’itinéraire à suivre dans votre approche.
Visual/Textual: Si vous essayez simplement d'ajouter un repli textuel pour l'utilisateur du site, continuez et utilisez l'attribut title. La plupart des navigateurs fournissent une info-bulle visuelle (boîte de message) lorsqu'un utilisateur survole l'image, et si l'image n'est pas chargée pour une raison quelconque, elle se comporte comme un attribut alt présentant du texte en cas d'échec de l'image. Cette technique permet toujours au site d’accélérer les temps de chargement en conservant les images en arrière-plan.
Lecteurs d'écran: Option au milieu de la route, cela varie car conserver techniquement vos images en arrière-plan et utiliser l'approche attribut title devrait fonctionner comme indiqué ci-dessus, "Les agents utilisateurs audio peuvent lire les informations de titre dans un contexte similaire . " Toutefois, cela n’est pas garanti dans tous les cas, même si certains lecteurs peuvent l’ignorer tous ensemble. Vous pouvez donc finir par opter pour cette approche, peut-être même en ajoutant des étiquettes aria pour vous assurer que celles-ci sont capturées, ou bien en remplaçant les arrière-plans par des images réelles pour des raisons de sécurité.
SEO/Moteurs de recherche: Voici le gros, si vous étiez comme moi, vous ajoutiez vos images de fond, tout était bien. Puis, quelques mois plus tard, le client (ou peut-être vous-même) a réalisé que vous manquiez d'un or de premier choix en ne proposant pas d'alternative pour vos images. Gardez à l'esprit que l'attribut title n'a aucun poids sur les moteurs de recherche, d'après mes recherches et comme mentionné dans un article ici: https://www.searchenginejournal.com/how- to-use-link-title-attribut-correctement / . Donc, si vous visez le référencement, vous devez avoir une balise img avec l’attribut alt. Une approche possible consiste simplement à charger de très petites images réelles sur le site avec des attributs alt, de cette façon vous obtenez tout le référencement et vous n'avez pas à réajuster le CSS existant à la place. Toutefois, cela peut entraîner un temps de chargement supplémentaire en fonction de la taille et Google examine en effet le chemin des images lors de l'indexation. En bref, si vous vous rendez sur cette voie, acceptez simplement ce qui doit être fait et incluez les images réelles au lieu d'utiliser des arrière-plans.
Pour y parvenir, la méthode classique consiste à insérer le texte dans le div et à utiliser une technique de remplacement d'image.
<div class"ir background-image">Your alt text</div>
avec background-image étant la classe à laquelle vous attribuez l'image d'arrière-plan et ir pourrait être la classe de remplacement d'image HTML5boilerplates, ci-dessous:
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
La croyance générale est que vous ne devriez pas utiliser d'images d'arrière-plan pour des éléments ayant une valeur sémantique significative, il n'existe donc pas de méthode adéquate pour stocker les données alt avec ces images. La question importante est de savoir ce que vous allez faire avec ces données alt. Voulez-vous qu'il s'affiche si les images ne se chargent pas? En avez-vous besoin pour certaines fonctions de programmation sur la page? Vous pouvez stocker les données de manière arbitraire en utilisant des propriétés CSS constituées qui n'ont aucune signification (peut provoquer des erreurs?) OR en ajoutant des images cachées contenant l'image et la balise alt, puis lorsque vous avez besoin d'une image d'arrière-plan Vous pouvez également comparer les chemins d’image, puis gérer les données comme bon vous semble, à l’aide d’un script personnalisé permettant de simuler ce dont vous avez besoin. Il n’ya aucun moyen, à ma connaissance, de faire que le navigateur gère automatiquement une sorte d’attribut alt pour les images d’arrière-plan.
Voici ma solution à ce type de problème:
Créez une nouvelle classe en CSS et positionnez-la hors écran. Ensuite, placez votre texte alternatif en HTML juste avant la propriété qui appelle votre image d’arrière-plan. Peut être n'importe quelle balise, H1, H2, p, etc.
CSS
<style type="text/css">
.offleft {
margin-left: -9000px;
position: absolute;
}
</style>
HTML
<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image> </div>
Ce que tu veux n'est pas clair pour moi.
Si vous souhaitez qu'une propriété CSS rende la valeur de l'attribut alt, vous recherchez peut-être la fonction de l'attribut CSS par exemple:
IMG:before { content: attr(alt) }
Si vous voulez placer l'attribut alt sur une image d'arrière-plan, alors ... c'est étrange car l'attribut alt est un attribut HTML alors que l'image d'arrière-plan est une propriété CSS. Si vous voulez utiliser l'attribut alt HTML, alors je pense que vous aurez besoin d'un élément HTML correspondant pour l'insérer.
Pourquoi avez-vous "besoin d'utiliser des balises alt sur des images d'arrière-plan": est-ce pour une raison sémantique ou pour une raison à effet visuel (et si oui, quel effet ou quelle raison)?
Cet article du W3C explique ce qu’ils pensent que vous devriez faire https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage
et a des exemples ici http://mars.dequecloud.com/demo/ImgRole.htm
parmi lesquels
<a href="http://www.facebook.com">
<span class="fb_logo" role="img" aria-label="Connect via Facebook">
</span>
</a>
Néanmoins, si, comme dans l'exemple ci-dessus, l'élément contenant l'image d'arrière-plan n'est qu'un conteneur vide, je préfère personnellement y insérer le texte et le masquer à l'aide de CSS; à l'endroit où vous montrez l'image à la place:
<a href="http://www.facebook.com"><span class="fb_logo">
Connect via Facebook
</span></a>
.fb_logo {
height: 37px; width: 37px;
background-image: url('../gfx/logo-facebook.svg');
color:transparent; overflow:hidden; /* hide the text */
}