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

Question

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

它看起来像这样：

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

Answer 1

正确使用的角色是imgwitharia-label或aria-laelledby。这里\xe2\x80\x99是来自HTML Living Standard的示例：

\n\n

\n

这些功能可用于使辅助工具以更有用的方式向用户呈现内容。例如，ASCII 艺术实际上是图像，但看起来是文本，如果没有适当的注释，屏幕阅读器最终会将其呈现为需要大量标点符号的非常痛苦的阅读。使用本节中描述的功能，可以让 AT 跳过 ASCII 艺术并只阅读标题：

\n\n

<figure role="img" aria-labelledby="fish-caption"> \n <pre>\n o           .\'`/\n     \'      /  (\n   O    .-\'` ` `\'-._      .\')\n      _/ (o)        \'.  .\' /\n      )       )))     ><  <\n      `\\  |_\\      _.\xe2\x80\x99  \xe2\x80\x98. \\\n        \xe2\x80\x98-._  _ .-\xe2\x80\x99       \xe2\x80\x98.)\n    jgs     `\\__\\\n </pre>\n <figcaption id="fish-caption">\n  Joan G. Stark, \xe2\x80\x9c<cite>fish</cite>\xe2\x80\x9c.\n  October 1997. ASCII on electrons. 28\xc3\x978.\n </figcaption>\n</figure>\n

\n

\n