HTML-IMG-Tag: Titelattribut vs. Alt-Attribut?

Ich habe Amazon durchsucht und festgestellt, dass bei der Suche nach " 1 TB ", wenn Sie den Mauszeiger über das Bewertungsbild der Sterne bewegen, die Punktzahl nur bei Verwendung des IE angezeigt wird. Wenn Sie einen anderen Browser verwenden, wird die Punktzahl nicht angezeigt.

Eine Bewertung von 3,8 und eine Bewertung von 4,2 werden jeweils als 4 Sterne angezeigt. Natürlich könnten 3,8 Sterne gegen 4,2 Sterne (76% gegen 84% Punktzahl) einen Unterschied machen!

Dies liegt daran, dass die Standardmethode zum Anzeigen von altText nur dann ist, wenn der Benutzer Grafiken ausschaltet oder wenn der Browser "vorgelesen" wird (z. B. Browser für Benutzer mit Sehbehinderung). IE zeigt es jedoch beim Schweben.

Ich denke also, wenn Amazon es unabhängig vom Browser des Benutzers anzeigen soll, titlesollte es zusätzlich dazu verwendet werden alt. Würdest du zustimmen?

Ich würde für beide gehen. Der Titel zeigt in allen Browsern einen netten Tooltip und alt gibt eine Beschreibung, wenn Sie in einem Browser ohne Bilder surfen.

Trotzdem würde ich gerne einige Statistiken darüber sehen, wie viele "Surfer" da draußen in ein "Geschäft" gehen, um Waren zu durchsuchen, deren Bilder tatsächlich deaktiviert sind oder die einen Browser verwenden, der keine Bilder unterstützt. Ich denke, die Zeiten, in denen 90% der Bevölkerung ein 28k-Modem verwenden, um eine Verbindung zum InterWeb herzustellen, sind lange vorbei.

Sie werden für verschiedene Dinge verwendet. Das altAttribut wird anstelle des Bildes verwendet. Wenn das Bild nicht angezeigt werden kann, und in Screenreadern.

Das titleAttribut wird zusammen mit dem Bild angezeigt , normalerweise als Hover-Tooltip.

Eines sollte nicht "anstelle" des anderen verwendet werden. Jeder sollte richtig verwendet werden , um die Dinge zu tun, für die er entwickelt wurde.

Alt und Titel sind für verschiedene Dinge, wie bereits erwähnt. Während das title- Attribut einen Tooltip bereitstellt, ist alt auch ein wichtiges Attribut, da es den anzuzeigenden Text angibt, wenn das Bild nicht angezeigt werden kann. (In einigen Browsern wie Firefox wird dieser Text auch angezeigt, während das Bild geladen wird.)

Ein weiterer Punkt, den ich ansprechen sollte, ist, dass das alt- Attribut für die Validierung als XHTML-Dokument erforderlich ist , während das title- Attribut sozusagen nur eine "zusätzliche Option" ist.

Das liegt daran, dass sie unterschiedlichen Zwecken dienen und beide nicht nur übereinander verwendet werden sollten.

Das "Alt" steht für das, was ihr bereits gesagt habt, damit ihr sehen könnt, worum es bei dem Bild geht, wenn das Bild nicht angezeigt werden kann (aus welchem ​​Grund auch immer). Außerdem können sehbehinderte Menschen verstehen, worum es in dem Bild geht.

Das Attribut "title" ist das richtige, um den Tooltip mit einem Titel für das Bild anzuzeigen.

Meiner Meinung nach sollte der Alternativtext immer beschreiben, was auf dem Bild sichtbar ist, falls das Bild nicht angezeigt wird.

alt = text [CS] Für Benutzerprogramme, die keine Bilder, Formulare oder Applets anzeigen können, gibt dieses Attribut alternativen Text an. Die Sprache des alternativen Textes wird durch das lang-Attribut angegeben.

w3.org

Ich glaube, dass alt für eine strikte XHTML-Konformität erforderlich ist.

Wie andere angemerkt haben, ist der Titel für Tooltips (schön zu haben), alt für die Barrierefreiheit. Es ist nichts Falsches daran, beide zu verwenden, aber alt sollte immer da sein.

Das ALT-Attribut gilt für sehbehinderte Benutzer, die einen Bildschirmleser verwenden würden. Wenn die ALT in JEDEM Bild-Tag fehlt, wird die gesamte URL für das Bild gelesen. Wenn die Bilder Teil des Designs der Site sind, sollten sie immer noch die ALT haben, aber sie können leer gelassen werden, damit die URL nicht für jeden Teil der Site gelesen werden muss.

ALT-Attribut

Das altAttribut wird in einem Satz von Tags definiert (nämlich img, areaund gegebenenfalls zum inputund applet) zu ermöglichen, eine Textäquivalent für das Objekt bereitzustellen.

Ein Textäquivalent bietet Ihrer Website und ihren Besuchern in den folgenden häufigen Situationen die folgenden Vorteile:

• Heutzutage sind Webbrowser auf einer Vielzahl von Plattformen mit sehr unterschiedlichen Kapazitäten verfügbar. Einige können überhaupt keine oder nur eingeschränkte Bildtypen anzeigen. Einige können so konfiguriert werden, dass keine Bilder geladen werden. Wenn in Ihrem Code das alt-Attribut in den Bildern festgelegt ist, zeigen die meisten dieser Browser die von Ihnen angegebene Beschreibung anstelle der Bilder an
• Einige Ihrer Besucher können keine Bilder sehen, seien sie blind, farbenblind oder sehbehindert. Das alt-Attribut ist eine große Hilfe für diejenigen, die sich darauf verlassen können, um eine gute Vorstellung davon zu haben, was auf Ihrer Seite steht
• Suchmaschinen-Bots gehören zu den beiden oben genannten Kategorien: Wenn Sie möchten, dass Ihre Website so gut indiziert wird, wie es verdient, verwenden Sie das alt-Attribut, um sicherzustellen, dass wichtige Abschnitte Ihrer Seiten nicht übersehen werden.

Titel Attribut

Ziel dieser Technik ist es, Benutzern bei der Eingabe von Daten in Formularen eine kontextsensitive Hilfe bereitzustellen, indem die Hilfeinformationen in einem titleAttribut bereitgestellt werden. Die Hilfe kann Formatinformationen oder Beispiele für Eingaben enthalten.

Beispiel 1: Ein Pulldown-Menü, das den Umfang einer Suche einschränkt
Ein Suchformular verwendet ein Pulldown-Menü, um den Umfang der Suche einzuschränken. Das Pulldown-Menü befindet sich unmittelbar neben dem Textfeld, in das der Suchbegriff eingegeben wird. Die Beziehung zwischen dem Suchfeld und dem Pulldown-Menü ist Benutzern klar, die das visuelle Design sehen können, das keinen Platz für ein sichtbares Etikett bietet. Das titleAttribut wird verwendet, um das selectMenü zu identifizieren . Das titleAttribut kann von Bildschirmleseprogrammen gesprochen oder als QuickInfo für Benutzer von Bildschirmlupen angezeigt werden.

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

Beispiel 2: Eingabefelder für eine Telefonnummer
Eine Webseite enthält Steuerelemente zur Eingabe einer Telefonnummer in den USA mit drei Feldern für Vorwahl, Vermittlungsstelle und die letzten vier Ziffern.

<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> 

Beispiel 3: Eine Suchfunktion Eine Webseite enthält ein Textfeld, in das der Benutzer Suchbegriffe eingeben kann, und eine Schaltfläche mit der Bezeichnung "Suchen" zur Durchführung der Suche. Das titleAttribut wird verwendet, um das Formularsteuerelement zu identifizieren, und die Schaltfläche wird direkt hinter dem Textfeld positioniert, sodass dem Benutzer klar ist, dass im Textfeld der Suchbegriff eingegeben werden soll.

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

Beispiel 4: Eine Datentabelle mit Formularsteuerelementen
Eine Datentabelle mit Formularsteuerelementen muss jedes Steuerelement den Spalten- und Zeilenüberschriften für diese Zelle zuordnen. Ohne einen Titel (oder ein LABEL außerhalb des Bildschirms) ist es für nicht visuelle Benutzer schwierig, mithilfe ihrer Hilfstechnologie beim Durchblättern des Formulars zu pausieren und nach entsprechenden Zeilen- / Spaltenüberschriftenwerten zu fragen.

Ein Umfrageformular enthält beispielsweise vier Spaltenüberschriften in der ersten Zeile: Frage, Zustimmen, Unentschieden, Nicht zustimmen. Jede folgende Zeile enthält eine Frage und ein Optionsfeld in jeder Zelle, die der Antwortauswahl in den drei Spalten entsprechen. Das title-Attribut für jedes Optionsfeld ist eine Verkettung der Antwortauswahl (Spaltenüberschrift) und des Textes der Frage (Zeilenüberschrift) mit einem Bindestrich oder Doppelpunkt als Trennzeichen.

Img Element

Zulässige Attribute, die bei MDN erwähnt werden .

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

Wie Sie sehen können title, ist das Attribut innerhalb des imgElements nicht zulässig . Ich würde altAttribut verwenden und wenn erforderlich würde ich CSS (Beispiel: Pseudoklasse :hover) anstelle von titleAttribut verwenden.

Nein, ich denke, es altist besser, weil der Zweck dieses Attributs darin besteht, "alternativen" Text bereitzustellen, falls das Bild nicht angezeigt werden kann (sei es, dass das Bild fehlt oder der Browser selbst es nicht anzeigen kann).

Die MVCFutures für ASP.NET MVC haben sich für beides entschieden. Wenn Sie "alt" angeben, wird automatisch ein "Titel" mit demselben Wert für Sie erstellt.

Ich habe den Quellcode nicht zur Hand, aber eine schnelle Google-Suche ergab einen Testfall dafür!

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

Sie sollten das title-Attribut nicht für das img-Element verwenden. Die Gründe dafür sind recht einfach:

Vermutlich sind Untertitelinformationen wichtige Informationen, die standardmäßig allen Benutzern zur Verfügung stehen sollten. Wenn ja, präsentieren Sie diesen Inhalt als Text neben dem Bild.

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

HTML 5.1 enthält allgemeine Hinweise zur Verwendung des title-Attributs:

Es wird derzeit davon abgeraten, sich auf das title-Attribut zu verlassen, da viele Benutzeragenten das Attribut nicht auf zugängliche Weise verfügbar machen, wie dies in dieser Spezifikation gefordert wird (z. B. wenn ein Zeigegerät wie eine Maus erforderlich ist, damit ein Tooltip angezeigt wird, der nur Benutzer mit Tastatur und ausschließt Nur-Touch-Benutzer, z. B. Benutzer mit einem modernen Telefon oder Tablet).

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

Wenn es um Barrierefreiheit und verschiedene Bildschirmlesegeräte geht:

• Backen 10-11: Standardmäßig deaktiviert
• Window-Eyes 7.02: standardmäßig aktiviert
• NVDA: nicht unterstützt (keine Supportoptionen)
• VoiceOver: nicht unterstützt (keine Supportoptionen)

Daher, wie Denis Boudreau es angemessen formulierte: eindeutig keine empfohlene Praxis .