Attribut alt de l'image d'arrière-plan CSS

C'est un problème auquel je n'avais pas eu à m'attaquer 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.

Il n'y a pas de propriété CSS comme celle-ci pour autant que je sache, alors quelle est la meilleure façon de le faire s'il vous plaît?

Les images d'arrière-plan peuvent certainement présenter des données! En fait, cela est souvent recommandé lorsque la présentation d'icônes visuelles est plus compacte et conviviale qu'une liste équivalente de textes de présentation. Toute utilisation de sprites d'image peut bénéficier de cette approche.

Il est assez courant que les icônes d'annonces d'hôtels affichent des commodités. Imaginez une page qui répertorie 50 hôtels et chaque hôtel dispose de 10 équipements. Un sprite CSS serait parfait pour ce genre de chose - une meilleure expérience utilisateur car 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 de alttexte, mais utilisent plutôt l' titleattribut sur le div contenant.

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 a en grande partie le même objectif que l'attribut alt

Titre

Les valeurs de l'attribut title peuvent être rendues par les agents utilisateurs de diverses manières. Par exemple, les navigateurs visuels affichent fréquemment le titre comme une «info-bulle» (un court message qui apparaît lorsque le dispositif de pointage s'arrête sur un objet). Les agents utilisateurs audio peuvent prononcer les informations du titre dans un contexte similaire. Par exemple, la définition de l'attribut sur un lien permet aux agents utilisateurs (visuels et non visuels) d'informer les utilisateurs sur 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 l'entrée et l'applet) pour vous permettre de fournir un équivalent textuel pour 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 dans une très grande variété de plates-formes avec des capacités très différentes; certains ne peuvent pas du tout afficher des images ou seulement un ensemble restreint de types d'images; certains peuvent être configurés pour ne pas charger les images. Si votre code a l'attribut alt défini dans ses images, la plupart de ces navigateurs afficheront 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 qui se trouve sur votre page
• Les robots des moteurs de recherche appartiennent aux deux catégories ci-dessus: si vous voulez que votre site Web soit indexé aussi bien qu'il le mérite, utilisez l'attribut alt pour vous assurer qu'ils ne manqueront pas des sections importantes de vos pages.

Dans cet article de Yahoo Developer Network ( lien archivé ), il est suggéré que si vous devez absolument utiliser une image d'arrière-plan au lieu d'un élément img et d'un attribut alt, utilisez les attributs ARIA comme suit:

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

Le cas d'utilisation de l'article décrit comment Flickr a choisi d'utiliser les images d'arrière-plan, car les performances ont été considérablement améliorées sur les appareils mobiles.

Je pense que vous devriez lire cet article de Christian Heilmann. Il explique que les images d'arrière-plan sont UNIQUEMENT pour l'esthétique et ne doivent pas être utilisées pour présenter des données, et sont donc exemptées de la règle selon laquelle chaque image doit avoir un texte alternatif.

Extrait (c'est moi qui souligne):

Images d'arrière-plan CSS qui, par définition, n'ont qu'une valeur esthétique - et non le contenu visuel du document lui-même . Si vous avez besoin de mettre une image dans la page qui a un sens, utilisez un élément IMG et donnez-lui un texte alternatif dans l'attribut alt.

Je suis d'accord avec lui.

Comme mentionné dans d'autres réponses, il n'y a pas d'attribut alt (pris en charge) pour une balise div uniquement pour la balise img.

La vraie question est de savoir 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 la voie à suivre dans votre approche.

Visuel / textuel: Si vous essayez simplement d'ajouter un texte de secours pour l'utilisateur si l'image ne se charge pas, utilisez simplement 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 de la même manière qu'un attribut alt présentant du texte lorsque l'image échoue. Cette technique permet toujours au site d'accélérer les temps de chargement en conservant les images définies sur les arrière-plans.

Lecteurs d'écran: l'option du milieu de la route, cela varie car le fait de conserver techniquement vos images en arrière-plan et d'utiliser l'approche d'attribut de titre devrait fonctionner comme indiqué ci-dessus, "Les agents utilisateurs audio peuvent prononcer les informations du titre dans un contexte similaire." Cependant, il n'est pas garanti que cela fonctionne dans tous les cas, y compris certains lecteurs peuvent tout ignorer. Si vous finissez par opter pour cette approche, vous pouvez également essayer d'ajouter des étiquettes aria pour vous assurer que les lecteurs d'écran les captent.

SEO / Moteurs de recherche: Voici le grand, si vous étiez comme moi, vous avez ajouté vos images de fond, tout était bon. Puis des mois plus tard, le client (ou peut-être vous-même) s'est rendu compte que vous manquiez de l'or du référencement en ne disposant pas d'altérations 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-attribute-correctly /. Donc, si vous visez le référencement, vous aurez besoin d'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 n'avez pas à réajuster le CSS existant en place. Cependant, cela peut entraîner un temps de chargement supplémentaire en fonction de la taille et Google regarde effectivement le chemin des images lors de l'indexation. En bref, si vous suivez cette voie, acceptez simplement ce qui doit être fait et incluez les images réelles au lieu d'utiliser des arrière-plans.

La croyance générale est que vous ne devriez pas utiliser d'images d'arrière-plan pour des choses ayant une valeur sémantique significative, il n'y a donc pas vraiment de moyen approprié de stocker des données alt avec ces images. La question importante est qu'est-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 une fonction programmatique sur la page? Vous pouvez stocker les données de manière arbitraire en utilisant des propriétés css inventées qui n'ont aucune signification (peuvent provoquer des erreurs?) OU en ajoutant des images cachées contenant l'image et la balise alt, puis lorsque vous avez besoin d'images d'arrière-plan alt, vous pouvez comparer l'image puis gérez les données comme vous le souhaitez en utilisant un script personnalisé pour simuler ce dont vous avez besoin. Je ne connais aucun moyen de faire en sorte que le navigateur gère automatiquement une sorte d'attribut alt pour les images d'arrière-plan.

La manière classique d'y parvenir est de placer le texte dans le div et d'utiliser une technique de remplacement d'image.

<div class"ir background-image">Your alt text</div>

avec background-image étant la classe où 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%;
}

Cet article du W3C vous 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>

Pourtant, 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 mettre le texte et le masquer en utilisant 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 */
}

Voici ma solution à ce type de problème:

Créez une nouvelle classe en CSS et positionnez-la hors de l'écran. Ensuite, placez votre texte alternatif en HTML juste avant la propriété qui appelle votre image d'arrière-plan. Peut - être une étiquette, 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>

Je ne sais pas ce que vous voulez.

Si vous voulez qu'une propriété CSS affiche la valeur de l'attribut alt, vous recherchez peut-être la fonction d'attribut CSS par exemple:

IMG:before { content: attr(alt) }

Si vous voulez mettre 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 souhaitez utiliser l'attribut HTML alt, je pense que vous auriez besoin d'un élément HTML correspondant pour le mettre.

Pourquoi avez-vous "besoin d'utiliser des balises alt sur les images d'arrière-plan": est-ce pour une raison sémantique ou pour une raison d'effets visuels (et si oui, alors quel effet ou quelle raison)?

Vous pouvez y parvenir en insérant la altbalise dans l' divendroit où votre image apparaîtra.

Exemple:

<div id="yourImage" alt="nameOfImage"></div>