装饰性图片使用role="presentation"还是aria-hidden="true"？

Question

哪种方法对于从辅助技术中隐藏装饰性图片来说更具语义性，是alt=""、role="presentation"、CSS背景图像还是aria-hidden="true"？

- user 9631883

Answer 1

最好的方法是使用空白的 alt 文本。

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

对于 AT（辅助技术）应该忽略的图像，使用空的 alt 文本和没有 title 属性的 img 元素。

^{- 来源}

- Shannon Young

---

你所说的“blank”是指空的alt文本（空字符串），正如源代码中引用的那样。我只是想指出，以防有人看到“blank”并认为是十六进制字符0x32并使用" "。然而，与alt =“”同样好的方法是在CSS中使用背景图像。这样，您根本不必担心<img>标签或alt属性。 - slugolicious

Answer 2

从语义上讲，正确的答案是aria-hidden=true。WCAG 1.1.1指示所有图像必须有alt文本，纯装饰性的图像不是例外，但文本替代必须为空，即alt=""，理论上应该足够了，但某些辅助技术仍然可以访问该图像并将其标记为图像，因此它将不再被隐藏。
您想要对辅助技术隐藏的任何元素都必须是aria-hidden，当然，从语义上讲更有意义。

- Carlos Izquierdo

---

你能详细说明一下哪些辅助技术会将其识别并标记为“img”吗？因为似乎在整个领域中，它都被忽略了，就像预期的那样（https://www.powermapper.com/tests/screen-readers/labelling/img-null-alt/），其中包含一个空的alt。 - Shannon Young