装饰图像或重复信息图像的可访问性

Question

当你写一个替代品时，你应该记住一些事情。当图片内容为装饰性或包含重复信息时，其中之一建议使用空的alt=""。

但是使用有什么区别：

<img alt=""
<img aria-hidden="true"
<img role="presentation"

还是一起？

<img alt="" aria-hidden="true" role="presentation" src="…" />

Answer 1

简答：

他们都有不同的目的。图像 alt 属性仅对图像元素有效。 aria-hidden 适用于对所有用户隐藏的元素，并且 role=presentation 有点像所有元素的空 alt 属性 - 不仅仅是图像（但比空图像 alt 支持更少）。

更长的答案：

我建议阅读这些属性的文档以了解应该如何使用它们。它们各有不同的用途。

alt 属性：

图像替代文本旨在传达非文本内容的替代文本 - 如果图像没有替代文本，屏幕阅读器将忽略它，假设它纯粹是装饰性的。此功能得到广泛支持 - 如果不是普遍支持的话。

aria-hidden：

aria-hidden，如 w3c 中所定义，旨在用于“任何用户都看不到或感知不到”的元素。这意味着如果有视力的用户看不到它，它也应该对访问无障碍 API 的用户隐藏。一个示例用例是，如果用户必须单击一个按钮才能显示某个部分 - 该部分将对所有用户隐藏，并且在其可见性更改时也会切换“aria-hidden”属性。应该注意的是，它并不总是以这种方式使用 - 许多人只是用它来隐藏屏幕阅读器，尽管这不是 W3C 中定义的预期目的。来源：https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden

role=presentation：

role=presentation 在 w3c 中定义为：“其隐式本机角色语义不会映射到可访问性 API 的元素”。这类似于空 alt 文本，尽管与 alt 属性不同，它可以用于不应映射到辅助功能 API 的各种其他元素。实际上，它与空 alt 文本做同样的事情，但它不像空 alt 属性那样被广泛支持（来源：https://www.w3.org/WAI/tutorials/images/decorative/）

w3c 定义：https://www.w3.org/TR/wai-aria/roles#presentation

为什么不包括所有 3 个？

回答你的最后一点，不包括所有三个的最大原因是它完全是矫枉过正。如果 alt 属性为空，则屏幕阅读器将已忽略该元素。包含 role=presentation 和 aria-hidden 的一个潜在缺点是，这两者都会从无障碍 API 中移除元素，这可能会对使用非屏幕阅读器工具的 API 的用户产生负面影响。

Answer 2

当alt属性设置为空字符串时

From the W3C:

图像要么是装饰性的，要么是对其余内容的补充，与文档中的其他一些信息是多余的。

关于冗余的第二部分很重要，例如：

<h1><img alt="" src="logo.gif" />My company name</h1>

当你必须使用role=presentation

这种情况是图片纯粹是装饰性的，这意味着您必须在这种情况下使用alt=""。

您不必为具有空 alt 属性的图像指定演示角色属性，因为它是标准浏览器的默认实现：

允许的 ARIA 角色属性值：
仅限presentation 角色，对于 alt 属性值为空 (alt="") 的 img 元素，否则为任何角色值。

当你必须使用aria-hidden=true

当您不想向 Accessibility API 提供信息但想将其提供给标准用户时使用它。

由于视力正常的人可能会使用屏幕阅读器（文盲、弱视等），因此必须谨慎使用。对于img 标签，它仅在alt 不为空时才有用。

对于具有非空alt 属性的img，它将假定您为使用屏幕阅读器的人提供了足够的上下文信息，而alt 信息可能只提供图像上已经可见的信息，而不是有趣的盲人或其他屏幕阅读器用户。

<h1>Come to visit George</h1>
<img alt="Map to reach George" src="map.gif" aria-hidden="true" />
Take the highway A13 direction London.
When you reach London follow A2 highway in direction Liverpool.

我认为这在不引入冗余的情况下对 SEO 更有用。

TL;DR

当您不想向屏幕阅读器提供信息时：

• 如果关注 SEO，请使用非空 alt 和 aria-hidden=true
• 否则使用alt=""
• img 和 role=presentation 应该有一个空的 alt
• img 带有一个空的 alt 有隐含的 role=presentation