HTML – 混合内容 – 文本和数学

概述我在页面上有一些代表数学公式的内容.此内容位于< span>内但它内部的自定义绘制内容与文本混合.我有可以放在< span>中的aria-label属性中的数学内容的文本描述,但是屏幕阅读器似乎忽略了非表单元素的aria属性. 有没有办法让屏幕阅读器使用< span>内的内容的替代描述？或者< div>？ 我的HTML看起来像这样 <span aria-label='[TEXT DESCRIPTI 我在页面上有一些代表数学公式的内容.此内容位于< span>内但它内部的自定义绘制内容与文本混合.我有可以放在< span>中的aria-label属性中的数学内容的文本描述,但是屏幕阅读器似乎忽略了非表单元素的aria属性.

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

我的HTML看起来像这样

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

解决方法 你的代码

<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" >{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" >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年内没有做过数学和视觉障碍的事情,所以可能有更好的方法来写出公式,但你明白了.

总结

以上是内存溢出为你收集整理的HTML – 混合内容 – 文本和数学全部内容，希望文章能够帮你解决HTML – 混合内容 – 文本和数学所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。