Balise HTML img: attribut title vs attribut alt?

Question

Je naviguais Amazon et j'ai remarqué que lors de la recherche " 1TB" si vous placez le curseur de la souris sur les étoiles notation image, vous ne voir la partition si vous utilisez IE. Si vous utilisez un autre navigateur, puis le score ne sera pas affiché.

Une note de 3,8 et une note de 4,2 fois apparaissent comme 4 étoiles. Bien sûr, un 3,8 étoiles vs 4,2 étoiles (76% contre 84% score) pourrait faire une différence!

En effet, la méthode standard d'affichage texte est seulement alt lorsque l'utilisateur désactive graphique ou lorsque le navigateur est « lu » (navigateur pour les utilisateurs par exemple ayant une déficience visuelle). IE cependant, il montre le vol stationnaire.

Je pense que si Amazon est de montrer quel que soit le navigateur de l'utilisateur, puis doit être utilisé title en plus <=>. Seriez-vous d'accord?

Answer 1

Je vais pour les deux. Titre affiche une info-bulle agréable dans tous les navigateurs et alt donnera une description lors de la navigation dans un navigateur sans images.

Cela dit, j'aimerais voir des statistiques sur le nombre de « surfeurs » aller là-bas pour un « magasin » pour parcourir les marchandises ont en fait des images désactivées ou si vous utilisez un navigateur qui ne supporte pas les images. Je pense que les jours où 90% de la population est un modem 28k utilise pour se connecter à l'interweb est looooong plus.

Answer 2

Ils sont utilisés pour des choses différentes. L'attribut est utilisé alt à la place de l'image. Si l'image ne peut pas être montré, ou (je crois) dans les lecteurs d'écran.

Le title attribut est représenté en avec l'image, typiquement sous la forme d'une info-bulle de vol stationnaire.

Il ne faut pas être utilisé « au lieu » de l'autre. Chacun doit être utilisé correctement , de faire les choses qu'ils ont été conçus pour faire.

Answer 3

alt et Titre sont des choses différentes, comme déjà mentionné. Alors que le Titre attribut fournira une info-bulle, alt est également un attribut important, car il spécifie le texte à afficher si l'image ne peut pas être affichée. (Et dans certains navigateurs, comme Firefox, vous verrez également ce texte en les charges d'image)

Un autre point que je me sens devrait être faite est que le alt attribut est requis pour valider en tant que document XHTML, alors que le Titre attribut est juste une « option supplémentaire » pour ainsi dire.

Answer 4

C'est parce qu'ils servent des objectifs différents et ils ont tous deux devraient être utilisés non seulement un sur l'autre.

Le « alt » est ce que vous les gars déjà dit, afin que vous puissiez voir ce qui est l'image il est tout au sujet si l'image ne peut pas être affiché (quelle qu'en soit la raison), il permet aussi aux personnes ayant une déficience visuelle de comprendre ce qui est l'image à propos.

L'attribut « title » est le bon de montrer l'info-bulle avec un titre pour l'image.

Answer 5

A mon avis si le texte alt décrit toujours ce qui est visible dans l'image, pour le cas où l'image n'apparaît pas.

  

alt = texte [CS]       Pour les agents utilisateurs qui ne peuvent pas afficher des images, des formes ou des applets, cet attribut spécifie un texte alternatif. La langue du texte alternatif est spécifié par l'attribut lang.

w3.org

Answer 6

Je crois alt est nécessaire pour le strict respect de XHTML.

Comme d'autres l'ont noté, le titre est pour les infobulles (agréable d'avoir), alt est pour l'accessibilité. Rien de mal à utiliser les deux, mais alt doit toujours être là.

Answer 7

Non, je pense que vaut mieux parce que alt le but de cet attribut est de fournir un texte « alternate » dans le cas où l'image ne peut pas être vue (que ce soit que l'image est manquante ou que le navigateur lui-même est incapable de l'afficher).

Answer 8

Les MVCFutures pour ASP.NET MVC a décidé de faire les deux. En fait, si vous fournissez « alt » il crée automatiquement un « titre » avec la même valeur pour vous.

Je n'ai pas le code source à la main, mais une recherche rapide Google se place un test pour elle!

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }

Answer 9

Vous ne devez pas utiliser l'attribut title pour l'élément img. Le raisonnement derrière cela est assez simple:

  

On peut supposer que l'information sous-titre est des informations importantes qui devraient être disponibles à tous les utilisateurs par défaut. Dans ce cas présenter ce contenu sous forme de texte à côté de l'image.

Source: http: //blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1 comprend des conseils généraux sur l'utilisation de l'attribut title:

  

En se fondant sur l'attribut title est actuellement découragée comme nombre d'agents utilisateurs n'exposent pas l'attribut d'une manière accessible, conformément à cette spécification (par exemple, nécessitant un dispositif de pointage comme une souris pour provoquer une infobulle apear, qui exclut Keyboard- seuls les utilisateurs et les utilisateurs tactiles seulement, comme tout le monde avec un téléphone moderne ou tablette).

Source: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

Quand il vient à l'écran accessibilité et différents lecteurs:

• Dents de la mer 10-11: désactivé par défaut
• Window-Eyes 7.02: activée par défaut
• NVDA: non pris en charge (aucune option de soutien)
• VoiceOver: non pris en charge (aucune option de soutien)

Par conséquent, comme Denis Boudreau mettre adéquatement: clairement pas une pratique recommandée .

Answer 10

L'attribut ALT est pour l'utilisateur ayant une déficience visuelle qui utiliserait un lecteur d'écran. Si l'ALT est absente de toute balise d'image, l'URL complète de l'image sera lue. Si les images sont pour une partie de la conception du site, ils devraient encore avoir l'ALT, mais ils peuvent rester vides si l'URL ne doit pas être lu pour chaque partie du site.

Answer 11

attribut ALT

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

Un équivalent texte apporte les avantages suivants à votre site Web et ses visiteurs dans les situations communes 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 afficher des images ou seulement un ensemble restreint de type d'images; certains peuvent être configurés pour ne pas charger des 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é au lieu des images
• certains de vos visiteurs ne peuvent pas voir les images, qu'ils soient aveugles, daltonien, faible prévoyante; 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
• les robots des moteurs de recherche appartiennent aux deux catégories ci-dessus: si vous voulez que votre site soit indexé aussi bien qu'il mérite, utiliser l'attribut alt pour vous assurer qu'ils ne manqueront pas de sections importantes de vos pages
.

Titre Attribut

L'objectif de cette technique est de fournir une aide contextuelle pour les utilisateurs car ils entrent des données dans les formulaires en fournissant les informations d'aide dans un attribut title. L'aide peut inclure des informations de format ou des exemples d'entrée.

Exemple 1: Un menu déroulant qui limite la portée d'une recherche Un formulaire de recherche utilise un menu déroulant pour limiter la portée de la recherche. Le menu déroulant est immédiatement adjacent au champ de texte utilisé pour entrer dans le terme de recherche. La relation entre le champ de recherche et le menu déroulant est clair pour les utilisateurs qui peuvent voir la conception visuelle, qui ne dispose pas de place pour une étiquette visible. L'attribut est utilisé select pour identifier le menu crossorigin. L'attribut peut être decoding parlé par les lecteurs d'écran ou affiché comme un outil de pointe pour les personnes utilisant les agrandisseurs d'écran.

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
    ...
</select> 

Exemple 2: champs d'entrée pour un numéro de téléphone Une page Web contient des commandes pour entrer un numéro de téléphone aux États-Unis, avec trois champs pour l'indicatif régional, l'échange, et quatre derniers chiffres.

<fieldset>
    <legend>Phone number</legend>
    <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
    <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
    <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset> 

Exemple 3: Une fonction de recherche Une page Web contient un champ de texte dans lequel l'utilisateur peut saisir des termes de recherche et un bouton « Recherche » pour effectuer la recherche. L'attribut est utilisé height pour identifier le contrôle de la forme et le bouton est placé juste après le champ de texte afin qu'il soit clair pour l'utilisateur que le champ de texte est le terme de recherche doit être saisi.

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

Exemple 4: Une table de données des contrôles de formulaire Une table de données de formulaire de contrôle a besoin d'associer chaque commande avec les en-têtes de colonne et de rangée pour cette cellule. Sans titre (ou hors écran LABEL), il est difficile pour les utilisateurs non-visuels pour mettre en pause et pour interroger les valeurs correspondantes d'en-tête de ligne / colonne en utilisant leur technologie d'assistance tout par la forme tabulant.

Par exemple, un formulaire d'enquête a quatre têtes de colonne en première ligne: Question, D'accord, Indécis, Pas d'accord. Chaque ligne suivante contient une question et un bouton radio dans chaque cellule correspondant à répondre choix dans les trois colonnes. L'attribut title pour chaque bouton radio est une concaténation du choix de réponse (en-tête de colonne) et le texte de la question (tête de ligne) avec un trait d'union ou deux points comme séparateur.

Img élément

attributs admis mentionnés à . MDN

• importance
• intrinsicsize
• ismap
• referrerpolicy
• src (expérienceal api)
• srcset (api expérimental)
• width
• usemap (api expérimental)
• :hover
• <=>
• <=>
• <=>

Comme vous pouvez le voir attribut est <=> pas autorisé à l'intérieur de l'élément <=>. J'utiliser l'attribut et si <=> nécessite j'utiliser CSS (exemple: la pseudo-classe <=>) au lieu de l'attribut <=>.