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

Question

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

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

这是因为仅当用户关闭图形或“读出”浏览器时（例如，针对视力障碍用户的浏览器）才显示替代文本的标准方式。 然而，IE 会在悬停时显示它。

所以我认为如果亚马逊要不管用户的浏览器如何显示它，那么除了alt之外还应该使用title。 你同意吗？

Answer 1

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

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

不应使用其中之一“代替”另一个。 每个都应该被正确使用，以完成它们设计的任务。

Answer 2

我两个都会去。 Title 将在所有浏览器中显示一个漂亮的工具提示，而 alt 将在没有图像的浏览器中浏览时提供描述。

也就是说，我很想知道有多少“冲浪者”去“商店”浏览商品时实际上已关闭图像或正在使用不支持图像的浏览器。 我认为 90% 的人口使用 28k 调制解调器连接到 InterWeb 的日子已经一去不复返了。

Answer 3

正如已经提到的，alt和title用于不同的事情。 虽然 title 属性将提供工具提示，但 alt 也是一个重要的属性，因为它指定在图像无法显示时要显示的文本。 （在某些浏览器中，例如 Firefox，您还会在图像加载时看到此文本。）

我认为应该指出的另一点是 alt 属性是需要作为 XHTML 文档进行验证，而 title 属性只是一个“额外选项”。

Answer 4

这是因为它们有不同的用途，并且它们都应该被使用，而不仅仅是一个替代另一个。

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

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

Answer 5

在我看来，在图像未显示的情况下，替代文本应该始终描述图片中可见的内容。

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

w3.org

Answer 6

我相信 alt 是严格遵守 XHTML 所必需的。

正如其他人所指出的，title 用于工具提示（最好有），alt 用于可访问性。 两者同时使用并没有什么问题，但是 alt 应该始终存在。

Answer 7

ALT 属性

alt属性在一组标签（即 img、area 以及可选的 input 和 applet）中定义，以允许您提供对象的等效文本。

在以下常见情况下，文本等效项可为您的网站及其访问者带来以下好处：

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

标题属性

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

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

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

示例 3：搜索函数
网页包含一个文本字段，用户可以在其中输入搜索词，以及一个标有“搜索”的按钮用于执行搜索。 title 属性用于标识表单控件，按钮位于文本字段的右侧，以便用户清楚文本字段是应输入搜索词的位置。

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

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

例如，调查表单的第一行有四个列标题：问题、同意、未决定、不同意。 接下来的每一行在每个单元格中包含一个问题和一个单选按钮，对应于三列中的答案选择。 每个单选按钮的标题属性都是答案选择（列标题）和问题文本（行标题）的串联，并以连字符或冒号作为分隔符。

Img 元素

允许MDN 中提到的属性。

• alt
• crossorigin
• 解码
• 高度
• 重要性（实验API）
• intrinsicsize （实验性 api）
• ismap
• referrerpolicy （实验性 api）
• src
• srcset
• width
• usemap

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

Answer 8

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

大概标题信息是重要信息，默认情况下应该向所有用户提供。 如果是这样，请将此内容显示为图像旁边的文本。

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

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

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

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

当谈到辅助功能和不同的屏幕阅读器时：

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

因此，如 Denis Boudreau 充分说明了这一点：显然不是推荐的做法。

Answer 9

我总是会同时使用 alt 和 title 属性。 它们各自用于不同的目的：alt用于丢失图像、缓慢图像下载或辅助技术中的图像替换，而title用于翻转交互性和附加图像描述。

此外，在 HTML5 中，您应该开始使用新的 HTML5 picture 元素，该元素封装在 figure 中，并具有完整的 WPA-ARIA 属性，以提高可访问性作为辅助技术、屏幕阅读器等的支持。 因为许多旧版浏览器不支持此元素...但可以优雅地降级...我现在建议对 HTML 中的图像使用以下 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>

上面的代码除了 alt 之外还有许多额外的“好东西”和 title，包括 ARIA 属性、对 WebP 的支持、支持更高分辨率图像的媒体查询以及支持旧图像格式的良好后备模式。 它展示了一个完全装饰的图像示例，该示例使用新技术，同时仍然通过渐进式设计模式支持旧技术。

20 多年来，许多开发人员一直在使用这种模式来处理 IE 和其他问题。 所以这并不是什么新知识。 它刚刚被新开发人员重新发现，而他们并没有费心向过去学习。

请记住...始终支持旧浏览器！

Answer 10

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

Answer 11

不，alt 更好，因为它的目的是在无法查看图像的情况下提供“替代”文本（无论是图像丢失还是浏览器本身无法显示）它）。

Answer 12

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

我手头没有源代码，但快速谷歌搜索找到了它的测试用例！

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