为屏幕阅读器隐藏一个纯粹的装饰元素？

Question

这里有人提出了类似的问题建议使用 aria-hidden，这似乎不适用于图像和 SVG。

我有一个 SVG，它只是一行，所以我不想让屏幕 readers 读取它。现在，当走过该 SVG 时，屏幕 reader 显示 "image"。

我尝试了 aria-hidden="true"、role="presentation"、style="speak:none;"、tabindex="-1" 并一起尝试，但 none 有效。我用 Mac OSX 10.11.5 Voice Over 进行了测试，它总是会读出单词 "image"。有没有办法从屏幕 reader 中隐藏装饰物？你是怎么处理的？

<h2 class="copy works__title">
  portfolio
  <svg xmlns="http://www.w3.org/2000/svg" role="presentation" aria-hidden="true" class="zigzag--small">
    <use role="presentation" xlink:href="assets/svg/sprite.svg#zigzag-small"></use>
  </svg>
</h2>

Answer 1

好吧

• 这似乎是一个 Firefox 错误 (46.0.1)，VoiceOver 开启 Mac OSX 10.11.5

我做了很多测试：似乎无法抑制 firefox 中某些元素的读取（至少对于 Mac 上的 VoiceOver）我已经尝试了几件事并且我无法隐藏图像或 svg，除非它们是标签中更强大的上下文的一部分。但在正常情况下，任何带有所有这些花哨标签 aria-hidden="true", role="presentation", style="speak:none;", tabindex="-1" 并删除 alt 标签或将 alt 标签留空的图像都会读出 VoiceOver "image"（即使是 svgs）——盲人可能会觉得被遗漏了……但是它在所有其他浏览器中都可以工作……真为你感到羞耻FF :(

如果有人知道 solution/hack 请指正。

Answer 2

Firefox 存在一个未解决的错误，它本身会收集相关的错误和依赖项。它最后一次看到 activity 是在 2016 年 1 月 20 日，而相关的错误不是最近更新的。

其中一些错误：

对于这种情况，您可能应该包含一个易于访问的名称，告诉用户它是装饰性的。有一篇很棒的文章可能会有所帮助：Tips for Creating Accessible SVG

Answer 3

您可以设置空文本替代。那么浏览器应该认为它是一个纯粹的装饰图像

<svg aria-labelledby="svgtitle1">
     <title id="svgtitle1"></title>
     [other svg code]
</svg>

为屏幕阅读器隐藏一个纯粹的装饰元素？

Hide a purely decorative element for screen readers?

html

svg

screen-readers

voiceover

wai-aria