121

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

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

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

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

4

12 回答 12

175

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

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

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

于 2009-05-16T13:08:27.443 回答
69

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

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

于 2009-05-16T13:06:16.840 回答
12

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

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

于 2009-05-16T21:46:43.577 回答
7

那是因为它们服务于不同的目的，并且它们都应该被使用，而不仅仅是一个在另一个之上。

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

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

于 2009-05-16T13:09:26.410 回答
6

在我看来，替代文字是否应该始终描述图片中可见的内容，以防图像未显示。

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

w3.org

于 2009-05-16T13:07:55.337 回答
3

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

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

于 2009-05-16T21:37:31.307 回答
3

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

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

图像元素

MDN中提到的允许属性。

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

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

于 2019-02-28T09:32:57.520 回答
2

您不应该对 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充分指出的那样：显然不是推荐的做法。

于 2013-08-15T09:33:25.283 回答
2

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

于 2018-10-01T21:21:12.100 回答
1

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

此外，在 HTML5 中，您应该开始使用包含完整WPA-ARIApicture属性的新 HTML5元素，以获得更好的可访问性，以及对辅助技术、屏幕阅读器等的支持。因为这个元素在许多旧浏览器中不受支持......但是会优雅地降级......我现在推荐以下 HTML 设计模式用于 HTML 中的图像：figure

<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 和其他问题。所以这不是新知识。它刚刚被没有费心从过去学习的新开发人员重新发现。

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

于 2021-02-27T06:06:40.233 回答
0

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

于 2009-05-16T13:02:50.843 回答
0

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

我手头没有源代码，但是通过谷歌快速搜索找到了一个测试用例！

    [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);
    }
于 2009-07-31T01:18:37.033 回答