HTML-img-tag:title-Attribut vs.alt-Attribut?

StackOverflow https://stackoverflow.com/questions/872389

  •  22-08-2019
  •  | 
  •  

Frage

Ich war surfen Amazon und ich habe bemerkt, dass bei der Suche "1 TB"wenn Sie den Mauszeiger über die Sterne-Bewertung Bild sehen Sie nur den score-Wert, wenn mit IE.Wenn Sie mit einem anderen browser, dann die Partitur nicht sehen können.

Eine Bewertung von 3,8 und eine Bewertung von 4,2 beide zeigen sich als 4 Sterne.Natürlich 3.8 Sternen vs 4.2 Sterne (76% vs 84% score) könnte einen Unterschied machen!

Dies ist, weil die standard-Darstellung, alt text ist nur, wenn der Benutzer schaltet die Grafik, oder, wenn der browser "Auslesen" (e.g-browser für Benutzer mit Sehschwäche).IE jedoch zeigt es auf hover.

Also ich denke, wenn Amazon ist es zu zeigen, unabhängig davon, browser des Nutzers, dann title sollte verwendet werden, zusätzlich zu alt.Würden Sie dem Zustimmen?

War es hilfreich?

Lösung

Ich würde mich für beide.Titel anzeigen einen schönen tooltip in allen Browsern und alt wird geben Sie eine Beschreibung beim Browsen in einem browser, mit keine Bilder.

Das heißt, ich würde gerne sehen, einige Statistiken, wie viele "Surfer" draußen gehen, um "store" durchsuchen waren tatsächlich Bilder, die deaktiviert oder verwenden einen browser, der nicht die Unterstützung von Bildern.Ich denke, die Tage, wo 90% der Bevölkerung ist mit einem 28k-modem zu verbinden, um den InterWeb ist verdammt lang vorbei.

Andere Tipps

Sie sind für verschiedene Dinge verwendet.Die alt Attribut verwendet wird statt des Bildes.Wenn die Bild kann nicht angezeigt werden, oder (ich glaube) in screen-Reader.

Die title Attribut angezeigt wird zusammen mit dem Bild, die in der Regel als hover-tooltip.

Man sollte nicht verwendet werden ", sondern" der andere.Jeder verwendet werden sollte richtig, zu tun, was Sie entworfen wurden zu tun.

alt und Titel sind für verschiedene Dinge, wie bereits erwähnt.Während die Titel Attribut wird eine QuickInfo, alt ist auch ein wichtiges Attribut, denn es gibt text angezeigt werden, wenn das Bild kann nicht angezeigt werden.(Und in manchen Browsern, wie firefox, wirst du auch diesen text sehen während das Bild lädt)

Ein weiterer Punkt, den ich fühlen sollte ist, dass der alt Attribut erforderlich um zu überprüfen, wie ein XHTML-Dokument, in der Erwägung, dass die Titel Attribut ist nur eine zusätzliche option," wie es war.

Das ist, weil Sie unterschiedlichen Zwecken dienen, und Sie beide sollten verwendet werden, nicht nur einen über den anderen.

"Alt" ist für das, was Sie Jungs schon gesagt, so kann man erkennen, was das Bild über alles, wenn das Bild kann nicht angezeigt werden (aus welchem Grund auch immer), es ermöglicht auch Sehbehinderten Menschen zu verstehen, was das Bild über.

Der "title" - Attribut ist der richtige, um zu zeigen, den tooltip mit einem Titel für das Bild.

Meiner Meinung nach sollte der alt-text ist immer beschreiben, was im Bild sichtbar, für den Fall, dass das Bild nicht angezeigt.

alt = text [CS] Für Benutzer-agents, die keine Bilder anzeigen kann, Formen, oder applets, dieses Attribut gibt den alternativen text.Die Sprache der Alternative text wird angegeben durch das Attribut lang.

w3.org

Ich glaube, dass Sie alt ist erforderlich für den strengen XHTML-Konformität.

Wie andere haben darauf hingewiesen, Titel für tooltips (schön zu haben), alt ist für die Zugänglichkeit.Nichts falsch mit der Verwendung beide, aber alt sollte immer dabei sein.

Nein, ich glaube, alt ist besser, denn der Zweck dieses Attributs ist "alternate" text in die Ereignis, dass Sie das Bild nicht anzeigen (sei es, dass das Bild fehlt, oder dass der browser selbst ist unfähig, Anzeige).

Die MVCFutures für ASP.NET MVC beschlossen, beides zu tun.In der Tat, wenn Sie die 'alt' - es wird automatisch ein 'Titel' mit dem gleichen Wert für Sie.

Ich habe nicht den source-code von hand, aber eine schnelle google-Suche zeigte ein test Fall für Sie!

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

Sollten Sie nicht verwenden title-Attribut für das img-element.Die Argumentation dahinter ist Recht einfach:

Vermutlich caption Informationen wichtige Informationen sollten für alle Nutzer standardmäßig.Wenn ja, stellen Sie diese 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 Benutzung des title-Attributs:

Unter Berufung auf das title-Attribut wird derzeit abgeraten, da viele user agents setzen Sie das Attribut in einer leicht zugänglichen Art und Weise, wie dies in der Spezifikation (z.B.das erfordert ein Zeigegerät wie eine Maus zu verursachen, ein tooltip erscheinen, der ausschließt, Tastatur-Benutzer und-touch-Nutzer, wie jeder mit einem modernen Handy oder tablet).

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

Wenn es um die Zugänglichkeit und die unterschiedlichen Bildschirm-Leser:

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

Also, wie Denis Boudreau angemessen formulierte es so: klar nicht empfohlen.

Das ALT-Attribut ist für sehbehinderte Benutzer, der eine Bildschirmsprachausgabe.Wenn die ALT ist, fehlt von JEDEM Bild-tag, das gesamte url für das Bild wird gelesen werden.Wenn die Bilder sind zum Teil von der Gestaltung der Website, sollten Sie immer noch die ALT-aber Sie kann leer gelassen werden, damit die url nicht gelesen werden, für jeden Teil der Website.

ALT-Attribut

Die alt Attribut definiert ist, in eine Reihe von tags (nämlich img, area und Optional für input und applet), können Sie bieten ein text-äquivalent für das Objekt.

Einen gleichwertigen text bringt die folgenden Vorteile, um Ihre Website und deren Besucher in die folgende gemeinsame Situationen:

  • heutzutage, Web-Browser sind in einem sehr breiten Spektrum von Plattformen mit sehr unterschiedlichen Kapazitäten;einige keine Bilder anzeigen kann oder nur eine eingeschränkte Menge von Typ von Bildern;einige können so konfiguriert sein, nicht laden von Bildern.Wenn der code muss das alt-Attribut gesetzt, in seine Bilder, die meisten dieser Browser zeigt die Beschreibung, die Sie gab anstelle der Bilder
  • einige deiner Besucher sehen keine Bilder, werden Sie blind, farbenblind, low-weitsichtig;das alt-Attribut ist eine große Hilfe für diejenigen Menschen, die sich darauf verlassen können, eine gute Vorstellung von dem, was auf Ihrer Seite
  • Suchmaschinen-bots gehören zu den zwei oben genannten Kategorien:wenn Sie möchten, dass Ihre website indiziert werden so gut wie Sie es verdient, verwenden das alt-Attribut, um sicherzustellen, dass Sie nicht verpassen wichtige Abschnitte Ihrer Seiten.

Title-Attribut

Das Ziel dieser Technik ist die Bereitstellung von Kontext-sensitive Hilfe für Benutzer geben Sie Daten in Formulare eingeben, indem Sie die Hilfe-Informationen in einer title Attribut.Die helfen können, die format-Informationen oder Beispiele der Eingabe.

Beispiel 1:Ein pulldown-Menü, das die Grenzen der Suchbereich
Ein such-Formular verwendet ein pulldown-Menü, um den Umfang der Suche.Das pulldown-Menü ist direkt neben dem text-Feld, geben Sie den Suchbegriff ein.Die Beziehung zwischen dem Suchfeld und das pulldown-Menü ist den Nutzern klar, wer sehen kann, das visuelle design, die nicht haben Raum für eine sichtbare label.Die title Attribut wird benutzt, um die select Menü.Die title Attribut gesprochen werden kann durch Screenreader oder erscheint als ein tool-Tipp, für Menschen, die mit screen magnifiers.

<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 Telefon-Nummer
Eine Web-Seite enthält Steuerelemente für die Eingabe von einer Telefonnummer in den Vereinigten Staaten, mit drei Felder für PLZ, exchange, 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 Web-Seite enthält ein Textfeld, in dem die Benutzer können geben Sie die Suchbegriffe und eine Schaltfläche "Suchen", die für die Durchführung der Suche.Die title Attribut wird verwendet, um zu identifizieren, die die form Steuern, und die Taste ist-Position direkt nach dem Textfeld, so dass es dem Nutzer bewusst, dass sich das Textfeld, in denen der Suchbegriff eingegeben werden sollten.

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

Beispiel 4:Eine Tabelle mit Daten der Formular-Steuerelemente
Eine Tabelle mit Daten der Formular-Steuerelemente Bedürfnisse zuordnen jede Steuerung mit den Spalten-und Zeilenüberschriften für die Zelle.Ohne Titel (oder off-screen-LABEL), ist es schwer für nicht-visuelle Benutzer anhalten und befragen für entsprechende Zeile/Spalte-header-Werte mit Ihren assistive Technologie, die Sie während tabbing über die form.

Für Beispiel, eine Umfrage hat vier Spaltenüberschriften in der ersten Zeile:Frage Damit Einverstanden, Unentschlossen, Uneinig.Jede folgende Zeile enthält eine Frage und eine radio-Taste in jede Zelle der entsprechenden Antwort-Wahl in die drei Spalten.Das title-Attribut für jeden radio-button ist eine Verkettung von Antwort-Wahl (Spaltenüberschrift) und der text der Frage (Kopfzeile) mit einem Bindestrich oder ein Doppelpunkt als Trennzeichen verwendet werden.

Img-Element

Erlaubt genannten Attribute an MDN.

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

Wie Sie sehen können title Attribut ist nicht erlaubt innen img element.Ich würde verwenden alt Attribut, und wenn nötig, würde ich CSS verwenden (Beispiel:pseudo-Klasse :hover) anstelle von title Attribut.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top