Question

我在表示数学公式的页面上有一些内容。此内容位于<span>内，但内部自定义绘制的内容与文本混合。我可以在aria-label的{{1}}属性中添加数学内容的文本描述，但是屏幕阅读器似乎忽略了非表单元素的aria属性。

有没有办法让屏幕阅读器对<span>或<span>内的内容使用替代说明？

我的HTML看起来像这样

<div>

Answer 1

您的

代码

<span aria-label='[TEXT DESCRIPTION]'>
    <svg>[SOME SVG CONTENT]</svg>
    <span>[SOME TEXT CONTENT]</span>
</span>

对我来说有点奇怪。我要做的第一件事就是将外跨度改为<div>。您可能需要向其中添加tabindex="-1"之类的内容。一种更通用的设计方法是在 [一些文本内容] 之前/之后以纯文本显示 [文字描述] ，这个想法是一个有视力障碍的人需要额外的帮助，其他人也可以。

另一种选择可能就像

<div>
  <svg aria-describedby="mathOne">.....</svg>
  <span id="mathOne" class="offScreen">{Description}</span>
  <span>Content</span>
</div>

来自评论：

在视觉上，svg和文本内容可以绝对地重叠或定位，以便从数学公式的角度来理解它。想想随着激进和基数而增长的sqrt符号。

我的观点是不要这样做。 内容<span> 应该是增强内容。让我假装我正在显示二次公式，代码看起来像

<div>
  <svg aria-describedby="mathOne">{Generated Formula}</svg>
  <span id="mathOne" class="offScreen">negative B plus or minus the 
   square root of the radical B squared - 4 a c end radical all over 2 a.</span>
  <span>In basic algebra, the quadratic formula is the solution of 
   the quadratic equation.</span>
</div>

注意：我在5年内没有做过数学和视力障碍的事情，所以可能有更好的方法来写出公式，但你明白了。

Answer 2

您可以尝试将角色属性设置为类似img的内容并设置aria-label，就像这样。

<span role="img" aria-label="This will appear like an image. Nothing will be read from inside, but you can set your own description">
<span>here is some non-screen-readerable stuff</span>
</span>

这是你正在寻找的吗？

P.S。非屏幕可重复使用可能会也可能不会正确使用英语。但我认为这说明了这一点。

希望这有帮助！

混合内容 - 文本和数学

2 个答案: