html - 混合内容 - 文本和数学

Question

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

有没有办法让屏幕阅读器对 <span> 中的内容使用替代描述？或 <div> ？

我的 html 看起来像这样

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

Answer 1

你的代码

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

来自评论:

visually the svg and text content may be overlayed or positioned absolutely so that it makes sense from a math formula perspective. Think sqrt symbol that grows with the radical and radix.

我的意思是不要这样做。 内容 <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 年没有做过数学和视觉障碍方面的工作了，所以可能有更好的方法来写出公式，但你明白了。