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

Question

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

但是使用之间的区别是什么：

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

还是一起？

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

Answer 1

简短回答：

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

更长的回答：

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

alt属性：

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

ARIA隐藏：

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

角色介绍=：

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属性设置为空字符串时

来自W3C：

图像是装饰性的或补充内容的其余部分，与文档中的其他信息多余。

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

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

当您必须使用role=presentation

当图像是纯装饰时就是这种情况，这意味着在这种情况下你必须使用alt="" 。

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

允许的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 with role=presentation应该有一个空的alt
• img与空的alt有隐含的role=presentation