【问题标题】:What is the benefit to add empty alt=""? and which alt should be used this alt="" or alt=" "?添加空 alt="" 有什么好处?这个alt=""或alt=""应该使用哪个alt?
【发布时间】:2023-04-08 02:05:01
【问题描述】:

添加 null alt="" 有什么好处?是只是为了通过验证还是有更多的理由

应该怎么写?

这样,没有空格

alt=""

或者这个加一个空格

alt=" "

【问题讨论】:

  • Title 应该读作“empty”而不是“null”,因为“null”有时在数据表示中具有特定的非空字符串含义(包括 Javascript,但不包括 HTML);你已经用空引号说明了你的意思。

标签: xhtml accessibility screen-readers


【解决方案1】:

让您的 XHTML 得到验证。 alt 是图像的必需属性。

然而,将其添加为空是程序员懒惰的表现(尽管我承认我也为那些不是网站导航关键的图像(如小装饰元素等)这样做)。

附:如果您有阴影组件、某些装饰元素等装饰元素,您可以将它们添加为 CSS 背景而不是图像,从而避免编写替代文本并保持您的标记清洁非内容内容。

【讨论】:

  • 也许在几十年后验证会变得更加困难并且需要一个非空字符串。这可能是历史上最激动人心的技术军备竞赛。
  • 我不相信它总是懒惰 - 有些图像(间隔,边框等)你真的不想读出,因为它们大多只是装饰和不要对内容做出贡献,因此您必须能够标记那些被读者忽略的内容。不幸的是,这不是我所知道的(还)足够接近的东西,所以欢迎更多的 cmets...
  • 我不同意它是懒惰的。有时描述图像是没有意义的,它纯粹是为了创建一个主题或“图标语言”。例如,假设您有一个导航栏,其中每个导航选项也有一个图标,作为文本的补充,即“家庭图标”主页。在屏幕阅读器中,带有“主页图标”的 alt 听起来比空的 alt 文本更好吗,我认为不是! * 带有替代文字:“主页图标主页” * 空替代文字:“主页”
  • @Murph:我同意。为阴影组件之类的图像添加替代文本是没有意义的。
  • 像阴影组件这样的装饰性图像应该通过 CSS 和 background-image 及其相关项插入,而不是通过标记插入。这样你就可以同时做两件好事。您将设计保留在样式表中,并将无语义代码保留在页面之外。尽管我确实认为“语义就是上帝”运动没有看到 div 和 span 的失败,以及它们产生的固有歧义,但我仍然认为带有 background-image 的 div 比用于样式的 img 标签更好。
【解决方案2】:

其他答案已指出标准中的要求。这是一个实际的例子:

给定空白替代文本,lynx 将呈现:

由于缺少 alt 属性,lynx 将呈现:

文件名.jpg

您不希望内容中散布不相关的文件名。

【讨论】:

  • 添加空 alt 的正确方法是什么?以及屏幕在您的示例中的行为方式
  • IIRC 使用空格是为了避免一些旧软件中的错误。屏幕阅读器的行为不同(取决于哪个屏幕阅读器及其配置方式)。有些会告诉用户那里有一张图片,有些会跳过它,有些可能会让用户获取有关文件名的信息。
  • 你的建议是对的。如果我们使用 alt=" " 那么 IE 在鼠标悬停时会给出空白工具提示
【解决方案3】:

对于没有合适替代文本的图片(即不带有任何语义的图片,例如装饰元素),alt 属性应该为空。空意味着空,不是一个空格(这是一种约定和建议,但很好)。

必须为IMGAREA 元素指定alt 属性。 INPUTAPPLET 元素是可选的。

虽然替代文本可能非常有用,但必须小心处理。作者应遵守以下准则:

  • 在包含用于格式化页面的图像时,不要指定不相关的替代文本,例如,alt="red ball" 不适用于添加红球来装饰标题或段落的图像。在这种情况下,替代文本应该是空字符串 ("")。在任何情况下都建议作者避免使用图像来格式化页面;应改为使用样式表。
  • 不要指定无意义的替代文本(例如,“虚拟文本”)。这不仅会让用户感到沮丧,还会降低必须将文本转换为语音或盲文输出的用户代理的速度。

实施者应查阅可访问性部分以获取有关如何处理省略替代文本情况的信息。

HTML 4 specification. Section 13.8 How to specify alternate text

【讨论】:

  • 是 null alt 仅用于验证吗?
  • 该属性对于img 元素是强制。所以,是的,在某种程度上,这是为了让文档得到验证,同时仍然确保不会为读者引入没有意义的图像的无用混乱。
【解决方案4】:

我也会将此添加为答案(最初是对另一个答案的评论),因为这样做很有意义。

用于设置页面样式的图像(因此没有真正的“alt”用法)应通过 CSS 和 background-image 及其相关项插入,而不是通过标记插入。这样你就可以同时做两件好事。您将设计保留在样式表中,并将无语义代码保留在页面之外。

虽然我确实认为“语义就是上帝”运动没有看到 div 和 span 的失败,以及它们产生的固有歧义,但我仍然认为带有 background-image 的 div 比 img 标签更好样式。

【讨论】:

  • 不要忘记第三种情况:说明内容的图像。它们没有添加任何重要的含义,但它们是内容。 (例如,以可视方式在表格中显示数据的图表,或文章讨论的人的图像。)这些不是设计元素,但它们也不应该有替代文字。
  • 当然应该。 alt 元素描述了图像包含的内容,以便那些无法渲染图像(或使用屏幕阅读器)的人知道那里有什么。 “12215426.jpg”并没有告诉他们任何事情,而“奥巴马打着伞”或“图表详细说明了过去一年的销售额”确实告诉了他们一些事情。 alt 元素应该是图像的标题,或者如果图像实际上有标题,则应该是简化的元素。
  • “奥巴马打着伞”或“详细说明过去一年销售额的图表”并不能告诉他们有用的东西,如果你使用文字也没有意义浏览器。替代文本是替代文本,而不是描述。您需要确保图像旨在传达的信息在文档中,您不需要告诉用户他们看不到的所有内容(尽管有时它很有用,但这就是 longdesc属性是用于)。
  • 描述图片。如果标题是“奥巴马又忙碌了一天与共和党人战斗。”,那就是替代品。但是,如果该标题实际上显示在图片周围的某个位置,则 alt 应该是图片上的内容,即“奥巴马拿着雨伞。”,因为它就是这样。你还打算什么时候使用alt?包含文本的内嵌图像?是的。这也是,但对于必需的东西来说,这是一个非常有限的用途。
  • 我同意大卫的观点,如果你正在阅读一篇关于奥巴马忙碌的一天的文章,并且中间某处出现了“奥巴马打着伞”的文字,那将是一个令人困惑的分心,同时没有添加任何内容.
猜你喜欢
  • 2021-10-20
  • 2014-03-31
  • 2017-11-29
  • 1970-01-01
  • 1970-01-01
  • 2023-01-27
  • 1970-01-01
  • 2011-06-14
  • 2018-09-22
相关资源
最近更新 更多