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，它总是会读出“image”这个词。有没有办法隐藏屏幕阅读器中的装饰物？你是如何处理的？

<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 bug （46.0.1）

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

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

Answer 2

Firefox存在一个漏洞，它本身会收集相关的漏洞和依赖项。它最后一次见到2016年1月20日的活动，而相关的错误最近没有更新。

其中一些错误：

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

Answer 3

您可以设置空文字替代方案。然后浏览器应该认为它是一个纯粹的装饰图像

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

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

3 个答案: