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


110

我正在浏览Amazon,并且发现在搜索“ 1TB ”时,如果将鼠标指针悬停在星级图像上,则仅在使用IE时才能看到分数。如果您使用的是其他浏览器,则分数不会显示。

等级3.8和4.2均为4星。当然,3.8星vs 4.2星(得分分别为76%和84%)可能会有所作为!

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

因此,我认为,无论用户使用何种浏览器,Amazon都要显示它,那么title除了,还应该使用alt。你同意吗?

Answers:


64

我都去。标题将在所有浏览器中显示一个不错的工具提示,而alt将在没有图像的浏览器中进行描述。

就是说,我很想看看去“商店”浏览商品的“购买者”数量的统计数据实际上是关闭了图像,或者正在使用不支持图像的浏览器。我认为90%的人口正在使用28k调制解调器连接到InterWeb的时代已经过去了。


54
当由于带宽原因而压缩图像时,使用alt不仅要显示一些内容。例如,一些为视障人士设计的浏览器将广泛使用alt。
AnthonyWJones

8
...但是:有时无法加载图片;还有盲人的非视觉浏览器;Safari的语音功能可读取页面,包括图像的alt属性;搜索引擎优化; 等等。有很多很好的理由不采用100%的图像显示。
2009年

2
@安东尼,凶恶-同意。有各种各样的hmmm“边缘案例”,其中提供alt非常有帮助(我不建议删除它)-但是,如果有“有意义的信息”以工具提示的形式提供给用户,那么肯定可以成为标题属性-因为这就是它的作用。当我在上面说“边缘情况”时,我认为与Firefox,Chrome,IE,Opera,Safari,Konqueror等相比,使用JAWS或类似产品访问的用户总数所占的百分比非常低
。– scunliffe

ALT标签是SEO友好的。应该和标题一样放置。
HelpNeeder 2015年

如果您有残障并且需要屏幕阅读器,我敢肯定,您将不会被称为“边缘保护套”。
马特·弗莱彻

164

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

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

一个不应被“代替”另一个使用。每个人都应该使用正确,做他们的目的是做的事情。


2
请注意,因为HTML5的alt属性是必需的。在某些国家/地区,如果您为国家机构做项目,则甚至不使用它。jalf所说的标题只是“设计”。
jave.web 2013年

2
而且我不相信-我知道屏幕阅读器会读取alt而不是图像。
jave.web 2013年

4
@ jave.web HTML5规范建议并指出了有关alt属性w3.org/html/wg/drafts/html/master/的很多内容,但是并没有说它是“强制性的”。具体来说,当图像纯粹是装饰时,实际上根本不会期望alt属性值。
scunliffe 2014年

1
@scunliffe在HTML5中未使用alt属性意味着您的HTML5无效。如果图像纯粹是装饰性的-不应将其用作<img>标签-您应改用CSS样式的div;)
jave.web 2014年

5
@ jave.web您正在阅读的规范比指定的更多。他们强烈建议您包含alt属性,但也有例外w3.org/html/wg/drafts/html/master/...并没有硬性执行,你都需要有一个alt属性。规范中没有任何地方表明它是“强制性”或“必需的”。-实际上,它们列出了几种情况,其中没有指定alt属性,或者有意将其留为空白。
scunliffe 2014年

10

如前所述,alttitle用于不同的事物。虽然title属性将提供工具提示,但是alt也是重要的属性,因为它指定了在无法显示图像时要显示的文本。(而在某些浏览器,如Firefox,你还会看到这段文字加载图像)

我觉得应该进行的另一点是,ALT属性是需要以验证为XHTML文档,而标题属性仅仅是一个“额外的选项,”因为它是。


7

那是因为它们有不同的用途,并且两者都不应仅用于一种用途。

“ alt”代表你们已经说过的话,因此,如果由于某些原因而无法显示图像,您可以查看图像的全部内容,还可以使视障人士了解图像的含义。

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


6

在我看来,对于不显示图像的情况,替代文字应始终描述图片中可见的内容。

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

w3.org


3

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

正如其他人指出的那样,标题是为工具提示(很不错),而alt是可访问性。两者都没错,但是alt应该一直存在。


1

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


1

ALT属性

alt属性是在一组标签(即,定义imgarea和可选地用于inputapplet),以允许你提供一个等效的文本为对象。

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

  • 如今,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:表单控件
的数据表表单控件的数据表需要将每个控件与该单元格的列标题和行标题相关联。如果没有标题(或屏幕外的标签),则非可视用户很难在浏览表格时使用其辅助技术来暂停和询问相应的行/列标题值。

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

图元素

MDN中提到的允许的属性。

  • alt
  • crossorigin
  • decoding
  • height
  • importance (实验性API)
  • intrinsicsize (实验性API)
  • ismap
  • referrerpolicy (实验性API)
  • src
  • srcset
  • width
  • usemap

如您所见,元素title内部不允许使用属性img。我会使用alt属性,如果需要的话,我会使用CSS(例如:伪类:hover)代替title属性。


0

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


1
所以我认为您不在乎是3.8星还是4.2星?
极性2009年

0

ASP.NET MVC的MVCFutures决定同时做这两项。实际上,如果您提供“ alt”,它将自动为您创建一个具有相同值的“ title”。

我没有要提供的源代码,但是经过快速的Google搜索就找到了一个测试用例!

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

因此,它的行为就像IE7及以下版本一样,被认为是不良行为。robertnyman.com/2009/05/07/…–
罗宾·多尔蒂

0

您不应该对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:默认情况下处于关闭状态
  • Window-Eyes 7.02:默认情况下处于打开状态
  • NVDA:不支持(不支持选项)
  • VoiceOver:不支持(不支持选项)

因此,正如丹尼斯·布德罗Denis Boudreau)所言:显然不建议这样做

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.