4

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

它看起来像这样：

ASCII艺术

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

4

2 回答 2

4

使用的正确角色是imgwitharia-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, “&lt;cite>fish</cite>“.
  October 1997. ASCII on electrons. 28×8.
 </figcaption>
</figure>
于 2016-03-25T16:35:55.427 回答
2

WAI-ARIA 规范给出了如下定义：hidden

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

所以，在你的情况下，只适用aria-hidden于包含 ascii-art 的元素，这将是令人满意的。

于 2014-03-27T09:11:12.810 回答