HTML img标签:title属性与alt属性?

问题描述 投票:97回答:11

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

评级为3.8和4.2的评级均显示为4星。当然3.8星与4.2星(76%vs 84%得分)可能会有所不同!

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

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

html accessibility alt
11个回答
60
投票

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

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


0
投票

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


0
投票

ALT Attribute

alt属性在一组标签中定义(即imgarea以及可选的inputapplet),以允许您提供对象的文本等效项。

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

  • 如今,Web浏览器可用于各种各样的平台,具有不同的容量;有些人根本不能显示图像,或者只能显示一组有限的图像;有些可以配置为不加载图像。如果您的代码在其图像中设置了alt属性,则大多数浏览器将显示您给出的描述而不是图像
  • 你的一些访客看不到图像,他们是盲人,色盲,低视; 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属性。


151
投票

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

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

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


10
投票

如上所述,alt和title适用于不同的东西。虽然title属性将提供工具提示,但alt也是一个重要属性,因为它指定了在无法显示图像时要显示的文本。 (在某些浏览器中,例如firefox,你会在图片加载时看到这个文字)

我认为应该做的另一点是,alt属性需要验证为XHTML文档,而title属性只是一个“额外选项”。


7
投票

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

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

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


6
投票

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

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

w3.org


3
投票

我认为alt是严格遵守XHTML所必需的。

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


0
投票

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


0
投票

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

0
投票

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

谈到可访问性和不同的屏幕阅读器:

  • 大白鲨10-11:默认关闭
  • Window-Eyes 7.02:默认打开
  • NVDA:不支持(不支持选项)
  • VoiceOver:不支持(不支持选项)

因此,正如Denis Boudreau充分说明的那样:显然不是推荐的做法。

© www.soinside.com 2019 - 2024. All rights reserved.