HTML img 标签：标题属性与 alt 属性？

HTML img tag: title attribute vs. alt attribute?

提问by nonopolarity

I was browsing Amazonand 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.

我在浏览Amazon时注意到，在搜​​索“ 1TB”时，如果将鼠标光标悬停在星级评分图像上，则只能在使用 IE 时看到分数。如果您使用的是其他浏览器，则不会显示分数。

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!

3.8 分和 4.2 分都显示为 4 星。当然，3.8 颗星与 4.2 颗星（76% 与 84% 的分数）可能会有所不同！

This is because the standard way of displaying alttext 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.

这是因为显示alt文本的标准方式是仅在用户关闭图形或浏览器被“读出”时（例如，用于视障用户的浏览器）。但是，IE 会在悬停时显示它。

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

所以我觉得如果亚马逊要不管用户的浏览器来展示它，那么title除了alt. 你会同意吗？

采纳答案by scunliffe

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.

我会两个都去。标题将在所有浏览器中显示一个很好的工具提示，当在没有图像的浏览器中浏览时，alt 将给出描述。

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.

也就是说，我很想看看有多少“冲浪者”去“商店”浏览商品实际上关闭了图像或使用了不支持图像的浏览器的一些统计数据。我认为 90% 的人口使用 28k 调制解调器连接互联网的日子已经过去了。

回答by jalf

They are used for different things. The altattribute is used insteadof the image. If the image can't be shown, and in screen readers.

它们用于不同的事情。使用该alt属性代替图像。如果图像无法显示，并在屏幕阅读器中显示。

The titleattribute is shown alongwith the image, typically as a hover tooltip.

该title属性与图像一起显示，通常作为悬停工具提示。

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

不应该使用一个来“代替”另一个。每个都应该被正确使用，去做他们被设计要做的事情。

回答by Danny Battison

altand titleare for different things, as already mentioned. While the titleattribute will provide a tooltip, altis 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 whilethe image loads)

如前所述，alt和title用于不同的事物。虽然title属性会提供一个工具提示，但alt也是一个重要的属性，因为它指定了图像无法显示时要显示的文本。（而在某些浏览器，如Firefox，你还会看到这段文字时加载图像）

Another point that I feel should be made is that the altattribute is requiredto validate as an XHTML document, whereas the titleattribute is just an "extra option," as it were.

我觉得应该说明的另一点是，alt属性需要验证为 XHTML 文档，而title属性只是一个“额外选项”，就像它一样。

回答by rfgamaral

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.

“alt”是针对你们已经说过的内容，因此如果图像无法显示（无论出于何种原因），您可以查看图像的全部内容，它还可以让视障人士了解图像的内容。

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

“title”属性是显示带有图像标题的工具提示的正确属性。

回答by seb

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.

alt = text [CS] 对于不能显示图像、表单或小程序的用户代理，该属性指定替代文本。替代文本的语言由 lang 属性指定。

w3.org

w3.org

回答by Matt Sherman

I believe alt is required for strict XHTML compliance.

我相信 alt 是严格的 XHTML 合规性所必需的。

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

正如其他人所指出的，标题是工具提示（很好），alt 是可访问性。使用两者都没有错，但 alt 应该始终存在。

回答by OneArmedSEO

The ALT attribute is for the visually impaired user that would use a screen reader. If the 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 doesn't have to be read for every part of the site.

ALT 属性适用于将使用屏幕阅读器的视障用户。如果任何图像标签中都缺少 ALT，则将读取图像的整个 url。如果图像是网站设计的一部分，它们仍然应该有 ALT 但它们可以留空，这样就不必为网站的每个部分都读取 url。

回答by Raghav Dinesh

ALT Attribute

ALT属性

The altattribute is defined in a set of tags (namely, img, areaand optionally for inputand applet) to allow you to provide a text equivalent for the object.

的alt属性是在一组标签（即，定义img，area和可选地用于input和applet），以允许你提供一个等效的文本为对象。

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.

• 如今，Web 浏览器可用于各种不同容量的平台；有些根本无法显示图像，或者只能显示一组受限制的图像类型；有些可以配置为不加载图像。如果您的代码在其图像中设置了 alt 属性，大多数浏览器将显示您提供的描述而不是图像
• 您的一些访问者无法看到图像，无论他们是盲人、色盲还是弱视；alt 属性对于那些可以依靠它来很好地了解您页面上的内容的人有很大帮助
• 搜索引擎机器人属于上述两个类别：如果您希望您的网站得到应有的索引，请使用 alt 属性以确保它们不会错过您页面的重要部分。

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 titleattribute. The help may include format information or examples of input.

该技术的目标是通过在title属性中提供帮助信息，为用户在表单中输入数据时提供上下文相关的帮助。帮助可能包括格式信息或输入示例。

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 titleattribute is used to identify the selectmenu. The titleattribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers.

示例 1：限制搜索范围的
下拉菜单 搜索表单使用下拉菜单来限制搜索范围。下拉菜单紧邻用于输入搜索词的文本字段。搜索字段和下拉菜单之间的关系对于可以看到视觉设计的用户来说很清楚，没有可见标签的空间。该title属性用于标识select菜单。该title属性可由屏幕阅读器朗读或显示为使用屏幕放大镜的人的工具提示。

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

示例 2：电话号码的输入字段 一个
网页包含用于输入美国电话号码的控件，包括区号、交换和最后四位数字的三个字段。

<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 FunctionA Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The titleattribute 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.

示例 3：搜索功能一个网页包含一个文本字段，用户可以在其中输入搜索词和一个标记为“搜索”的按钮，用于执行搜索。该title属性用于标识表单控件，按钮位于文本字段之后，以便用户清楚文本字段是应输入搜索词的位置。

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

示例 4：表单控件
的数据表表单控件的数据表需要将每个控件与该单元格的列标题和行标题相关联。如果没有标题（或屏幕外 LABEL），非可视用户在浏览表单时很难使用他们的辅助技术暂停和询问相应的行/列标题值。

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.

MDN 中提到的允许属性。

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

• alt
• crossorigin
• decoding
• height
• importance（实验性api）
• intrinsicsize（实验性api）
• ismap
• referrerpolicy（实验性api）
• src
• srcset
• width
• usemap

As you can see titleattribute is not allowed inside imgelement. I would use altattribute and if requires I would use CSS (Example: pseudo class :hover) instead of titleattribute.

如您所见，元素title内部不允许使用属性img。我会使用alt属性，如果需要，我会使用 CSS（例如：伪类:hover）而不是title属性。

回答by Simon_Weaver

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.

ASP.NET MVC 的 MVCFutures 决定两者都做。事实上，如果您提供“alt”，它会自动为您创建一个具有相同值的“标题”。

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

回答by kexxcream

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

您不应该对 img 元素使用 title 属性。这背后的原因很简单：

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/

来源：http : //blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

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

HTML 5.1包含有关使用 title 属性的一般建议：

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

目前不鼓励依赖 title 属性，因为许多用户代理并没有按照本规范的要求以可访问的方式公开该属性（例如，需要鼠标等指示设备来导致工具提示出现，这排除了仅使用键盘的用户和仅触摸用户，例如任何拥有现代手机或平板电脑的人）。

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

来源：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)

• Jaws 10-11：默认关闭
• Window-Eyes 7.02：默认开启
• NVDA：不支持（无支持选项）
• VoiceOver：不支持（无支持选项）

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

因此，正如丹尼斯·布德罗( Denis Boudreau)充分指出的那样：显然不是推荐的做法。