Question

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

评级为3.8，评级为4.2均显示为4星。当然3.8星与4.2星（76％对比84％得分）可能会有所不同！

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

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

Answer 1

它们用于不同的事物。 alt属性使用代替图片。如果图像无法显示，或（我相信）在屏幕阅读器中。

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

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

Answer 2

我会去找他们两个。标题将在所有浏览器中显示一个很好的工具提示，alt将在没有图像的浏览器中进行浏览时提供描述。

那就是说，我很想看到有多少“冲浪者”在那里去“商店”浏览商品的实际情况是关闭图片或使用不支持图片的浏览器。我认为90％的人口使用28k调制解调器连接到InterWeb的日子已经过去了。

Answer 3

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

我认为应该做的另一点是 alt 属性是必需来验证为XHTML文档，而 title 属性这只是一个“额外的选择”。

Answer 4

那是因为它们用于不同的目的，它们不仅应该用于另一个用途。

“alt”适用于你们已经说过的内容，所以如果无法显示图像（无论出于何种原因），你可以看到它的图像是什么，它还可以让视障人士了解图像是什么约。

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

Answer 5

在我看来，如果没有显示图像，alt文本应该始终描述图片中可见的内容。

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

w3.org

Answer 6

我认为严格遵守XHTML需要alt。

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

Answer 7

ALT Attribute

alt属性是在一组标记（即img，area中定义的，还可以选择用于input和applet），以使您能够提供对象的等效文本。

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

您的某些访问者看不见图像，包括盲目，色盲，低视力； alt属性对于可以依靠它来很好地了解页面内容的人们很有帮助
搜索引擎机器人属于上述两个类别：如果您希望对网站进行索引并应有的索引，请使用alt属性，以确保它们不会错过您页面的重要部分。

Title Attribute

该技术的目的是通过在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：表单控件的数据表
表单控件的数据表需要将每个控件与该单元格的列标题和行标题相关联。没有标题（或屏幕外的LABEL），非可视用户很难在浏览表单时使用其辅助技术来暂停和询问相应的行/列标题值。

例如，调查表的第一行具有四个列标题：“问题”，“同意”，“不确定”，“不同意”。接下来的每一行在每个单元格中包含一个问题和一个单选按钮，分别与三列中的答案选择相对应。每个单选按钮的title属性是答案选项（列标题）和问题文本（行标题）的连接，以连字符或冒号作为分隔符。

Img Element

在MDN提及的允许的属性。

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

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

Answer 8

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

Answer 9

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

Answer 10

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

据推测，字幕信息是默认情况下所有用户都应该可以使用的重要信息。如果是这样，则将该内容显示为图像旁边的文本。

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

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

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

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

ALT属性适用于将使用屏幕阅读器的视障用户。如果ANY图片标签中缺少ALT，则将读取图片的整个网址。如果图像是网站设计的一部分，则它们仍应具有ALT，但可以将其保留为空，因此不必在网站的每个部分都读取URL。

Answer 12

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

此外，在 HTML5 中，您应该开始使用包含在具有完整 WPA-ARIA 属性的 picture 中的新 HTML5 figure 元素以获得更好的可访问性，并支持辅助技术、屏幕阅读器等。因为许多旧浏览器不支持此元素...但会优雅地降级...我现在推荐以下 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 和其他问题。所以这不是新知识。它刚刚被没有从过去吸取教训的新开发人员重新发现。

记住...永远支持旧浏览器！

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

12 个答案: