role="presentation" 或 aria-hidden="true" 用于装饰图像？答案

【问题标题】：role="presentation" or aria-hidden="true" for decorative images?role="presentation" 或 aria-hidden="true" 用于装饰图像？
【发布时间】：2022-01-13 20:17:49
【问题描述】：

alt=""、role="presentation"、CSS bg 图像或 aria-hidden="true" 哪个语义更好，用于隐藏辅助技术的装饰图像？

【问题讨论】：

标签： html image accessibility

【解决方案1】：

最好使用空白alt 文本。

<img src="squiggle.gif" width="20" height="20" alt="" />

对 AT（辅助技术）应忽略的图像在 img 元素上使用空 alt 文本和无标题属性。

^{- source}

【讨论】：

而“空白”是指一个空的替代文本（空字符串），如源代码中所引用的那样。我只是想指出这一点，以防有人看到“空白”并认为十六进制字符 0x32 并使用 " "。然而，与alt="" 一样好的是在 CSS 中具有背景图像。那么你根本不需要处理<img> 标签或alt 属性。

【解决方案2】：

在语义上，正确答案是 aria-hidden=true。 WCAG 1.1.1 规定所有图片都必须有alt文字，纯装饰图片也不例外，但是文字替代必须是void，alt=""，理论上这样就够了，但是某些辅助技术还是可以到达图片和标签的它作为图像，所以它不会再被隐藏了。
您想要隐藏到辅助技术的任何元素都必须是 aria-hidden，当然，在语义上更有意义。

【讨论】：

您能否详细说明哪些辅助技术会识别并将其标记为img，因为看起来across the board it's ignored as expected 带有一个空的alt。