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

Question

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

看起来像这样:

我可以将它作为图像来做，但如果将它作为实际文本来做会很酷，这是无法通过 CSS 选择的。无论如何，将角色作为图像来做对我来说感觉很奇怪。

Answer 1

正确使用的角色是 img 和 aria-label 或 aria-laelledby。这是来自 HTML Living Standard 的示例:

These features can be used to make accessibility tools render content to their users in more useful ways. For example, ASCII art, which is really an image, appears to be text, and in the absence of appropriate annotations would end up being rendered by screen readers as a very painful reading of lots of punctuation. Using the features described in this section, one can instead make the ATs skip the ASCII art and just read the caption:

<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>