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

Question

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

我有一个 SVG，它只是一行，所以我不想让屏幕阅读器阅读它。现在，屏幕阅读器在浏览该 SVG 时会读取“图像”。

我尝试了 aria-hidden="true"、role="presentation"、style="speak:none;"、tabindex="-1" 全部加在一起，但都没有用。我用 Mac OSX 10.11.5 Voice Over 进行了测试，它总是会读出“图像”这个词。有没有办法对屏幕阅读器隐藏装饰性的东西？你是怎么处理的？

<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

好吧

• 这似乎是 Mac OSX 10.11.5 上 VoiceOver 的 Firefox 错误 (46.0.1)

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

如果有人知道解决方案/技巧，请纠正我。