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

Question

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?

Merci!

Answer 1

Des images de fond, assurez-vous permet de présenter les données! En fait, ce qui est souvent recommandé dans les cas présentant des icônes visuelles est plus compact et plus convivial que d'une liste équivalente de texte notices. Toute utilisation de l'image des sprites peuvent bénéficier de cette approche.

Il est assez commun pour hotel listes des icônes pour afficher les commodités. Imaginez une page qui présente une liste de 50 hôtels et chaque hôtel a 10 commodités. Un Sprite CSS, ce serait parfait pour ce genre de chose-une meilleure expérience utilisateur, car son plus rapide. Mais comment voulez-vous mettre en œuvre les balises ALT pour les images. Exemple de site.

La réponse est qu'ils n'utilisent pas l' alt texte à tous, mais au lieu d'utiliser l' title de l'attribut sur la 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 sert beaucoup de le même but que l'attribut alt

Titre

Les valeurs de l'attribut title peut être rendu par les agents utilisateurs dans une variété de façons. Par exemple, les navigateurs visuels fréquemment afficher le titre comme un outil de "pointe" (un court message qui s'affiche lorsque le dispositif de pointage s'arrête sur un objet). Audio les agents utilisateurs peuvent prendre la parole au titre de l'information dans un contexte similaire. Par exemple, la définition de l'attribut sur un lien permet à l'utilisateur d'agents (visuels et non-visuels) pour informer les utilisateurs de la nature de la ressource:

alt

L'attribut alt est définie dans un ensemble de balises (à savoir, img, area et éventuellement pour l'entrée et applet) pour vous permettre de fournir un équivalent textuel pour l'objet.

Un texte équivalent apporte les avantages suivants à votre site web et à ses visiteurs, à la suite de situations courantes:

• de nos jours, les navigateurs Web sont disponibles dans une très grande variété de plates-formes très différentes capacités; certains ne peuvent pas afficher les images ou seulement un ensemble limité de type 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 d'afficher la description que vous avez donné à la place des images
• certains de vos visiteurs ne peuvent pas voir les images, qu'ils soient aveugles, color-blind, basse-voyants; l'attribut alt est d'une grande aide pour les personnes qui peuvent compter sur elle pour avoir une bonne idée de ce qui est sur votre page
• robots des moteurs de recherche font partie des deux catégories ci-dessus: si vous voulez que votre site d'être indexé ainsi qu'elle le mérite, utiliser l'attribut alt pour s'assurer qu'ils ne vont pas manquer d'importantes sections de vos pages.

Answer 2

Je pense que vous devriez lire ce post par Christian Heilmann. Il explique que les images de fond sont SEULEMENT pour l'esthétique et ne doit pas être utilisé pour présenter des données, et sont donc exemptés de la règle que chaque image doit avoir autre texte.

Extrait (l'emphase est mienne):

CSS images d'arrière-plan qui sont, par définition, seulement de la 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 utiliser un élément IMG et lui donner un autre texte dans l'attribut alt.

Je suis d'accord avec lui.

Answer 3

La croyance générale est que vous ne devriez pas utiliser des images de fond pour les choses enrichissantes valeur sémantique, donc il n'y a pas vraiment une bonne façon de stocker alt données avec ces images. La question est de savoir ce que vous allez faire avec alt données? Voulez-vous afficher si l'image ne se charge pas? Avez-vous besoin pour une fonction programmatique sur la page? Vous pouvez stocker les données de manière arbitraire à l'aide de composé propriétés css qui n'ont pas de sens (ce qui pourrait provoquer des erreurs?) OU en ajoutant des images cachées que l'image et la balise alt, et puis quand vous avez besoin d'un fond d'images alt, vous pouvez comparer les chemins de l'image et de gérer les données comme vous le souhaitez à l'aide de certains script personnalisé pour simuler ce dont vous avez besoin. Il n'ya aucun moyen que je connaisse pour faire automatiquement le navigateur poignée de quelques-uns sorte de l'attribut alt pour les images d'arrière-plan.

Answer 4

Cependant, CHAQUE image non appliquée en tant qu'arrière-plan mais en tant qu'élément de balisage DOIT présenter l'attribut de texte alternatif, y compris du texte descriptif ou tout simplement vide (en cas d'images décoratives). Pour les questions d'accessibilité est l'une des règles les plus importantes .

Answer 5

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%;
}