装饰图像或重复信息图像中的可访问性
accessibility in decorative images or repetitive information images
当你写一个 alt 时，你应该记住一些事情。其中一件事建议当 image 内容是 decorative 或包含 repetitive information.
但是使用有什么区别：
<img alt=""
<img aria-hidden="true"
<img role="presentation"
还是一起？
<img alt="" aria-hidden="true" role="presentation" src="…" />
简答：
他们都有不同的目的。图片 alt 属性只对图片元素有效。 aria-hidden 适用于对所有用户隐藏的元素，role=presentation 有点像所有元素的空 alt 属性——不仅仅是图像（但比空图像 alt 支持更少）。
更长的答案：
我建议阅读这些属性的文档以了解应如何使用它们。它们各有不同的用途。
alt 属性:
图像替代文本旨在传达非文本内容的文本替代方案 - 如果图像没有替代文本，屏幕阅读器会认为它纯粹是装饰性的而忽略它。此功能得到广泛支持 - 如果没有得到普遍支持。
aria-隐藏:
aria-hidden，如 w3c 中所定义，适用于 "are not visible or perceivable to any user" 的元素。这意味着如果有视力的用户看不到它，它也应该对访问辅助功能的用户隐藏 API。一个示例用例是，如果用户必须单击一个按钮才能显示一个部分 - 该部分将对所有用户隐藏，并且在其可见性更改时还会切换 'aria-hidden' 属性。应该注意的是，它并不总是以这种方式使用 - 许多人只是用它来隐藏屏幕阅读器，尽管这不是 W3C 中定义的预期目的。资料来源：https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden
角色=演示文稿：
role=presentation 在 w3c 中定义为："An element whose implicit native role semantics will not be mapped to the accessibility API"。这类似于空的替代文本，尽管与 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 的用户产生负面影响屏幕阅读器。
当alt属性设置为空字符串时
The image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.
关于冗余的第二部分很重要，例如：
<h1><img alt="" src="logo.gif" />My company name</h1>
当你必须使用 role=presentation
这是纯装饰图片的情况，这意味着您必须在这种情况下使用alt=""。
您不必为具有空 alt 属性的图像指定 presentation role 属性，因为它是标准浏览器的默认实现：
Allowed ARIA role attribute values:
presentation role only, for an img element whose alt attribute's value is empty (alt=""), otherwise Any role value.
当你不得不使用aria-hidden=true
当您不想向辅助功能 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 应该有一个空的 altimg带空alt有隐式role=presentation
当你写一个 alt 时，你应该记住一些事情。其中一件事建议当 image 内容是 decorative 或包含 repetitive information.
但是使用有什么区别：
<img alt=""
<img aria-hidden="true"
<img role="presentation"
还是一起？
<img alt="" aria-hidden="true" role="presentation" src="…" />
简答：
他们都有不同的目的。图片 alt 属性只对图片元素有效。 aria-hidden 适用于对所有用户隐藏的元素，role=presentation 有点像所有元素的空 alt 属性——不仅仅是图像（但比空图像 alt 支持更少）。
更长的答案：
我建议阅读这些属性的文档以了解应如何使用它们。它们各有不同的用途。
alt 属性:
图像替代文本旨在传达非文本内容的文本替代方案 - 如果图像没有替代文本，屏幕阅读器会认为它纯粹是装饰性的而忽略它。此功能得到广泛支持 - 如果没有得到普遍支持。
aria-隐藏:
aria-hidden，如 w3c 中所定义，适用于 "are not visible or perceivable to any user" 的元素。这意味着如果有视力的用户看不到它，它也应该对访问辅助功能的用户隐藏 API。一个示例用例是，如果用户必须单击一个按钮才能显示一个部分 - 该部分将对所有用户隐藏，并且在其可见性更改时还会切换 'aria-hidden' 属性。应该注意的是，它并不总是以这种方式使用 - 许多人只是用它来隐藏屏幕阅读器，尽管这不是 W3C 中定义的预期目的。资料来源：https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden
角色=演示文稿：
role=presentation 在 w3c 中定义为："An element whose implicit native role semantics will not be mapped to the accessibility API"。这类似于空的替代文本，尽管与 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 的用户产生负面影响屏幕阅读器。
当alt属性设置为空字符串时
The image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.
关于冗余的第二部分很重要，例如：
<h1><img alt="" src="logo.gif" />My company name</h1>
当你必须使用 role=presentation
这是纯装饰图片的情况，这意味着您必须在这种情况下使用alt=""。
您不必为具有空 alt 属性的图像指定 presentation role 属性，因为它是标准浏览器的默认实现：
Allowed ARIA role attribute values:
presentationrole only, for animgelement whosealtattribute's value is empty (alt=""), otherwise Any role value.
当你不得不使用aria-hidden=true
当您不想向辅助功能 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应该有一个空的altimg带空alt有隐式role=presentation