如何使用ARIA HTML5从屏幕阅读器和其他AT隐藏ASCII艺术？

Question

我们在网站上添加了一些可爱的ASCII艺术品。我们担心它可能会给屏幕阅读器带来问题所以我考虑添加aria-hidden="true"或role="presentation"，因此屏幕阅读器看不到ASCII艺术。这是正确的方法吗？我没有要测试的屏幕阅读器，看起来像aria-hidden或者角色不能完全隐藏内容。

看起来像这样：

我可以将它作为一个图像来实现，但将它作为实际文本来做是很酷的，这是不能通过CSS选择的。无论如何，将角色作为一个图像让我觉得很奇怪。

Answer 1

The WAI-ARIA Spec给出definition of hidden如下：

  

表示元素对任何用户都不可见或可感知。如果元素或其某个祖先元素的aria-hidden属性设置为true，则该元素仅被视为隐藏在DOM中。

因此，在您的情况下，只需将aria-hidden应用于包含ascii-art的元素即可。

Answer 2

正确使用的角色是img aria-label或aria-laelledby。以下是HTML Living Standard：

的示例

  

这些功能可用于使辅助功能工具以更有用的方式向用户呈现内容。例如，ASCII艺术，实际上是一个图像，似乎是文本，并且在没有适当的注释的情况下最终会被屏幕阅读器呈现为对许多标点符号的非常痛苦的阅读。使用本节中描述的功能，可以使AT跳过ASCII艺术并只读取标题：

<figure role="img" aria-labelledby="fish-caption"> 
 <pre>
 o           .'`/
     '      /  (
   O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.’  ‘. \
        ‘-._  _ .-’       ‘.)
    jgs     `\__\
 </pre>
 <figcaption id="fish-caption">
  Joan G. Stark, “<cite>fish</cite>“.
  October 1997. ASCII on electrons. 28×8.
 </figcaption>
</figure>