HTML 图片标签：标题属性对比替代属性？

StackOverflow https://stackoverflow.com/questions/872389

  •  22-08-2019
  •  | 
  •  

题

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

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

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

所以我认为如果亚马逊要无论用户的浏览器如何都显示它，那么 title 还应该使用 alt. 。你同意吗？

有帮助吗？

解决方案

我会去两个。标题会显示在所有浏览器一个很好的提示和alt会给说明在浏览器中完全没有图片浏览时。

这是说，我很乐意看到“冲浪者”多少那里去了“商店”浏览商品居然有图像关闭或正在使用不支持图像浏览器的一些统计数据。我认为其中90％的人口使用28K调制解调器连接到InterWeb的天一长串结束。

其他提示

它们用于不同的事情。所述alt属性用于的而不是图像的即可。如果图像不能显示，或（I相信）在屏幕阅读器。

在title属性示出的沿着与图像，通常作为悬停工具提示。

一个不应该被使用的其它的“而不是”。每个人都应该使用的正常的，做他们的目的是做的事情。

<强> ALT 和标题是不同的东西，如已经提到的。虽然在标题属性将提供一个提示，的 ALT 也是一个重要的属性，因为它指定如果无法显示的图像将被显示的文本。 （而在某些浏览器，如Firefox，你还会看到这段文字的，而的加载图像）

，我觉得应作出另一点是，在 ALT 属性是需要来验证作为XHTML文档，而在标题属性仅仅是一个“额外的选项，”因为它是。

这是因为他们的目的不同，他们都应该并不只是局限于一个比其他。

在“ALT”是什么已经说了你们，所以你可以看到什么是它的全部，如果不能显示图像（无论何种原因），这也让视障人了解什么是图像的图像约。

“标题”属性是正确的显示工具提示与该图像的标题。

在我看来应该alt文本总是描述一下在图片中可见，对于不显示图像的情况。

  

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

w3.org

相信ALT需要严格遵守的XHTML

正如其他人指出，标题为工具提示（最好有），ALT是可访问性。没有错，同时使用，但ALT应该永远在那里。

不，我认为alt更好，因为该属性的目的是提供在事件，图像不能视图“交替”文本（无论它是图像丢失或在浏览器本身是不能显示的它）。

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

您不应该对 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

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

  • 颚 10-11：默认关闭
  • 窗眼7.02：默认开启
  • 英伟达：不支持（无支持选项）
  • 画外音：不支持（无支持选项）

因此，作为 丹尼斯·布德罗 充分地表达： 显然不是推荐的做法.

在ALT属性是，将使用屏幕阅读器的视障用户。如果ALT从任何图像的代码中，对于图像的整个URL将被读取。如果图像是用于网站设计的一部分，他们应该还是有ALT，但这样的URL不必阅读该网站的每一个部分，他们可以留空。

替代属性

这 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 键浏览表单时很难使用辅助技术暂停并询问相应的行/列标题值。

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

图像元素

提及的允许属性 MDN.

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

如你看到的 title 内部不允许有属性 img 元素。我会用 alt 属性，如果需要我会使用CSS（示例：伪类 :hover） 代替 title 属性。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top