HTML img tag: title attribute vs. alt attribute?

I was browsing Amazon and I noticed that when searching "1TB" if you hover the mouse cursor over the stars rating image, you only see the score if using IE. If you are using another browser then the score won't show.

A rating of 3.8 and a rating of 4.2 both show up as 4 stars. Of course a 3.8 stars vs 4.2 stars (76% vs 84% score) could make a difference!

This is because the standard way of displaying alt text is only when the user turns off graphics or when the browser is "read out" (e.g browser for users who are visually impaired). IE however, shows it on hover.

So I think if Amazon is to show it regardless of the user's browser, then title should be used in addition to alt. Would you agree?

113614 次浏览
小开

No, alt is better because its purpose is to provide an "alternate" text in the event that the image cannot be view (whether it be that the image is missing or that the browser itself is incapable of displaying it).

小开
最佳答案

I'd go for both. Title will show a nice tooltip in all browsers and alt will give a description when browsing in a browser with no images.

That said, I'd love to see some stats of how many "surfers" out there going to a "store" to browse merchandise actually have images turned off or are using a browser that doesn't support images. I think the days where 90% of the population is using a 28k modem to connect to the InterWeb is looooong over.

小开

In my opinion should the alt text always describe what is visible in the picture, for the case that the image is not displayed.

alt = text [CS] For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute.

w3.org

小开

They are used for different things. The alt attribute is used instead of the image. If the image can't be shown, and in screen readers.

The title attribute is shown along with the image, typically as a hover tooltip.

One should not be used "instead" of the other. Each should be used properly, to do the things they were designed to do.

小开

That's because they serve different purposes and they both should be used not just one over the other.

The "alt" is for what you guys already said, so you can see what's the image it's all about if the image can't be displayed (for whatever reason), it also allows visually impaired people to understand what's the image about.

The "title" attribute is the correct one to show the tooltip with a title for the image.

小开

I believe alt is required for strict XHTML compliance.

As others have noted, title is for tooltips (nice to have), alt is for accessibility. Nothing wrong with using both of them, but alt should always be there.

小开

alt and title are for different things, as already mentioned. While the title attribute will provide a tooltip, alt is also an important attribute, since it specifies text to be displayed if the image can't be displayed. (And in some browsers, such as firefox, you'll also see this text while the image loads)

Another point that I feel should be made is that the alt attribute is required to validate as an XHTML document, whereas the title attribute is just an "extra option," as it were.

小开

The MVCFutures for ASP.NET MVC decided to do both. In fact if you provide 'alt' it will automatically create a 'title' with the same value for you.

I don't have the source code to hand but a quick google search turned up a test case for it!

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

You should not use title attribute for the img element. The reasoning behind this is quite simple:

Presumably caption information is important information that should be available to all users by default. If so present this content as text next to the image.

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

HTML 5.1 includes general advice on use of the title attribute:

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to apear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

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

When it comes to accessibility and different screen readers:

  • Jaws 10-11: turned off by default
  • Window-Eyes 7.02: turned on by default
  • NVDA: not supported (no support options)
  • VoiceOver: not supported (no support options)

Hence, as Denis Boudreau adequately put it: clearly not a recommended practice.

小开

alt attribute is for visually impaired users that would use a screen reader. If alt is missing from ANY image tag, the entire url for the image will be read. If the images are for part of the design of the site, they should still have the alt but they can be left empty so the url does not have to be read for every part of the site.

小开

ALT Attribute

The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.

A text equivalent brings the following benefits to your web site and its visitors in the following common situations:

  • nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt attribute set in its images, most of these browsers will display the description you gave instead of the images
  • some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what's on your page
  • search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won't miss important sections of your pages.

Title Attribute

The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a title attribute. The help may include format information or examples of input.

Example 1: A pulldown menu that limits the scope of a search
A search form uses a pulldown menu to limit the scope of the search. The pulldown menu is immediately adjacent to the text field used to enter the search term. The relationship between the search field and the pulldown menu is clear to users who can see the visual design, which does not have room for a visible label. The title attribute is used to identify the select menu. The title attribute can be spoken by screen readers or displayed as a tool tip for people using 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>

Example 2: Input fields for a phone number
A Web page contains controls for entering a phone number in the United States, with three fields for area code, exchange, and last four digits.

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

Example 3: A Search Function A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.

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

Example 4: A data table of form controls
A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen LABEL) it is difficult for non-visual users to pause and interrogate for corresponding row/column header values using their assistive technology while tabbing through the form.

For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button is a concatenation of the answer choice (column header) and the text of the question (row header) with a hyphen or colon as a separator.

Img Element

Allowed attributes mentioned at MDN.

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

As you can see title attribute is not allowed inside img element. I would use alt attribute and if requires I would use CSS (Example: pseudo class :hover) instead of title attribute.

小开

I would ALWAYS go with both the alt and the title attributes. They are each used for different purposes: alt for image replacement on missing images, slow image downloads, or in assistive technology, while title is for rollover interactivity and additive image description.

In addition, in HTML5 you should start using the new HTML5 picture element wrapped in figure with full WPA-ARIA attributes for greater accessibility, as well as support of assistive technologies, screen readers, and the like. Because this element is not supported in many older browsers...BUT degrades gracefully...I recommend the following HTML design pattern now for images in HTML:

<figure aria-labelledby="picturecaption2">
<picture id="picture2">
<source srcset="image.webp" type="image/webp" media="(min-width: 800px)" />
<source srcset="image.gif" type="image/gif" />
<img id="image2" style="height:auto;max-width: 100%;" src="image.jpg" width="255" height="200" alt="image:The World Wide Web" title="The World Wide Web" loading="lazy" no-referrer="no-referrer" onerror="this.onerror=null;" />
</picture>
<figcaption id="picturecaption2"><small>"My Cool Picture" [<a href="http://creativecommons.org/licenses/" target="_blank">A License</a>] , via <a href="https://commons.wikimedia.org/wiki/" target="_blank">Wikimedia Commons</a></small></figcaption>
</figure>

The code above has many extra "goodies" beside alt and title, including ARIA attributes, support for WebP, a media query supporting higher resolution imagery, and a nice fallback pattern supporting older image formats. It shows a fully decorated image example that uses new technologies while still supporting old ones with progressive design patterns.

Many developers have been using this pattern now for over 20 years to deal with IE and other issues. So this is not new knowledge. Its just been rediscovered by new developers that didn't bother to learn from the past.

REMEMBER...ALWAYS SUPPORT THE OLD BROWSERS!


提交答案