Balise HTML img: attribut title vs attribut alt?

Je parcourais Amazon et j'ai remarqué que lors de la recherche de " 1 To ", si vous passez le curseur de la souris sur l'image de classement par étoiles, vous ne voyez que le score si vous utilisez IE. Si vous utilisez un autre navigateur, le score ne s'affichera pas.

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

En effet, la manière standard d'afficher du alttexte est uniquement lorsque l'utilisateur désactive les graphiques ou lorsque le navigateur est "lu" (par exemple, navigateur pour les utilisateurs malvoyants). IE cependant, le montre en survol.

Donc, je pense que si Amazon doit le montrer quel que soit le navigateur de l'utilisateur, il titledevrait être utilisé en plus de alt. Accepteriez-vous?

J'irais pour les deux. Le titre affichera une belle info-bulle 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" qui se rendent dans un "magasin" pour parcourir des marchandises dont les images sont désactivées ou utilisent un navigateur qui ne prend pas en charge les images. Je pense que l'époque où 90% de la population utilise un modem 28k pour se connecter à InterWeb est révolue.

Ils sont utilisés pour différentes choses. L' altattribut est utilisé à la place de l'image. Si l'image ne peut pas être affichée, et dans les lecteurs d'écran.

L' titleattribut est représentée le long de l'image, typiquement sous la forme d' une info - bulle de vol stationnaire.

L'un ne doit pas être utilisé «à la place» de l'autre. Chacun doit être utilisé correctement , pour faire les choses pour lesquelles ils ont été conçus.

alt et title sont pour des choses différentes, comme déjà mentionné. Alors que l' attribut title 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, tels que Firefox, vous verrez également ce texte pendant le chargement de l'image)

Un autre point qui me semble devoir être fait est que l' attribut alt est nécessaire pour valider en tant que document XHTML, alors que l' attribut title est juste une "option supplémentaire", pour ainsi dire.

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

Le "alt" est pour ce que vous avez déjà dit, donc vous pouvez voir de quoi il s'agit si l'image ne peut pas être affichée (pour une raison quelconque), il permet également aux personnes malvoyantes de comprendre de quoi il s'agit.

L'attribut "title" est le bon pour afficher l'info-bulle avec un titre pour l'image.

À mon avis, le texte alternatif devrait-il toujours décrire ce qui est visible sur l'image, dans le cas où l'image ne serait pas affichée.

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

w3.org

Je pense que alt est requis pour une conformité XHTML stricte.

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

L'attribut ALT est destiné à l'utilisateur malvoyant qui utiliserait un lecteur d'écran. Si l'ALT est manquante dans N'IMPORTE QUELLE balise d'image, l'URL entière de l'image sera lue. Si les images sont pour une partie de la conception du site, elles devraient toujours avoir l'ALT mais elles peuvent être laissées vides afin que l'URL n'ait pas à être lue pour chaque partie du site.

Attribut ALT

L' altattribut est défini dans un ensemble de balises ( à savoir img, areaet éventuellement pour inputet applet) pour vous permettre de fournir un équivalent texte 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.

Attribut de titre

L'objectif de cette technique est de fournir une aide contextuelle aux utilisateurs lorsqu'ils saisissent des données dans des formulaires en fournissant les informations d'aide dans un titleattribut. 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 saisir le terme de recherche. La relation entre le champ de recherche et le menu déroulant est claire pour les utilisateurs qui peuvent voir la conception visuelle, qui n'a pas de place pour une étiquette visible. L' titleattribut est utilisé pour identifier le selectmenu. L' titleattribut peut être prononcé par les lecteurs d'écran ou affiché comme info-bulle pour les personnes utilisant des loupes 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 de saisie pour un numéro de téléphone
Une page Web contient des commandes pour saisir un numéro de téléphone aux États-Unis, avec trois champs pour l'indicatif régional, le central et les 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 entrer des termes de recherche et un bouton intitulé «Rechercher» pour effectuer la recherche. L' titleattribut est utilisé pour identifier le contrôle de formulaire et le bouton est positionné juste après le champ de texte afin qu'il soit clair pour l'utilisateur que le champ de texte est l'endroit où le terme de recherche doit être entré.

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

Exemple 4: une table de données de contrôles de formulaire
Une table de données de contrôles de formulaire doit associer chaque contrôle aux en-têtes de colonne et de ligne de cette cellule. Sans titre (ou ÉTIQUETTE hors écran), il est difficile pour les utilisateurs non visuels de faire une pause et d'interroger les valeurs d'en-tête de ligne / colonne correspondantes en utilisant leur technologie d'assistance tout en parcourant le formulaire.

Par exemple, un formulaire d'enquête a quatre en-têtes de colonne dans la 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 au choix de réponse 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 du texte de la question (en-tête de ligne) avec un tiret ou deux-points comme séparateur.

Élément Img

Attributs autorisés mentionnés dans MDN .

• alt
• crossorigin
• decoding
• height
• importance (API expérimentale)
• intrinsicsize (API expérimentale)
• ismap
• referrerpolicy (API expérimentale)
• src
• srcset
• width
• usemap

Comme vous pouvez le voir, l' titleattribut n'est pas autorisé à l'intérieur de l' imgélément. J'utiliserais l' altattribut et si nécessaire, j'utiliserais CSS (exemple: pseudo classe :hover) au lieu de l' titleattribut.

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

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

Je n'ai pas le code source sous la main mais une recherche rapide sur Google a révélé un cas de test!

    [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);
    }

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 les informations de sous-titres sont des informations importantes qui devraient être disponibles par défaut pour tous les utilisateurs. Si tel est le cas, présentez 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:

Il est actuellement déconseillé de se fier à l'attribut title car de nombreux agents utilisateurs n'exposent pas l'attribut d'une manière accessible comme l'exige cette spécification (par exemple, exiger un dispositif de pointage tel qu'une souris pour faire apparaître une info-bulle, ce qui exclut les utilisateurs uniquement clavier et utilisateurs tactiles, comme toute personne possédant un téléphone ou une tablette moderne).

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

En ce qui concerne l'accessibilité et les différents lecteurs d'écran:

• Jaws 10-11: désactivé par défaut
• Window-Eyes 7.02: activé par défaut
• NVDA: non pris en charge (pas d'options de support)
• VoiceOver: non pris en charge (pas d'options de support)

Donc, comme Denis Boudreau l'a bien dit: ce n'est clairement pas une pratique recommandée .