我的页面上有一些表示数学公式的内容。此内容位于 <span> 内，但其中包含自定义绘制的内容与文本混合。我有数学内容的文本描述，可以放在<span> 的aria-label 属性中，但屏幕阅读器似乎忽略了非表单元素的 aria 属性。
有没有办法让屏幕阅读器对<span> 或<div> 中的内容使用替代描述？
我的html是这样的
<span aria-label='[TEXT DESCRIPTION]'>
<svg>[SOME SVG CONTENT]</svg>
<span>[SOME TEXT CONTENT]</span>
</span>
【问题讨论】：
标签： html accessibility screen-readers wai-aria
你的代码
<span aria-label='[TEXT DESCRIPTION]'>
<svg>[SOME SVG CONTENT]</svg>
<span>[SOME TEXT CONTENT]</span>
</span>
对我来说有点奇怪。我要做的第一件事是将外部跨度更改为<div>。您可能需要在其中添加 tabindex="-1" 之类的内容。一种更通用的设计方法是在 [SOME TEXT CONTENT] 之前/之后以纯文本形式添加 [TEXT DESCRIPTION]，这个想法是如果一个有视觉障碍的人需要额外的帮助，那么其他人也可以。
其他选项可能是这样的
<div>
<svg aria-describedby="mathOne">.....</svg>
<span id="mathOne" class="offScreen">{Description}</span>
<span>Content</span>
</div>
来自 cmets：
在视觉上，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 年没有做过关于数学和视力障碍的事情了，所以可能有更好的方法来写出公式，但你明白了。
【讨论】：
<svg> 中显示文本，没有什么可以立即想到的，但通常，如果辅助技术知道如何与 ARIA 交互，他们应该只宣布 mathone <span> 并忽略 <svg>。如果他们想确保<svg> 未被触及，OP 可能 可以将role="presentation" 添加到<svg> 上。这当然有利有弊
您可以尝试将角色属性设置为类似 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>
这就是你要找的吗？
附言非屏幕阅读可能是也可能不是正确使用英语。但我认为它说明了这一点。
希望这会有所帮助！
【讨论】：