问题描述
我需要一些帮助才能使NVDA屏幕阅读器读取我在index.html中编写的数学表达式的自定义描述。数学表达式在句子内。所以看起来非常像这样:
I need some help to make NVDA screen reader read a custom description of a math expression I've written in my index.html. The math expression is inside of a sentence. So it looks pretty much like this:
<div>
some text here...
ε<sub>x</sub> = -200(10<sup>-6</sup>),
ε<sub>y</sub> = 550(10<sup>-6</sup>),
γ<sub>xy</sub> = 150(10<sup>-6</sup>)
some more text here...
<div>
问题在于屏幕阅读器不会读取上标或减号。
The problem is that screen readers do not read the superscripts nor the minus symbols.
要解决此问题,我添加了 aria-labelledby
来添加自定义说明:
To fix this problem I added a aria-labelledby
to add a custom description:
<label id="label">Formula description here</label>
<div>
some text here...
<span aria-labelledby="label">
ε<sub>x</sub> = -200(10<sup>-6</sup>),
...
</span>
<div>
它部分修复了问题(仅限Voice Over / MacOS)。但Windows / NVDA / Firefox不起作用。它只是忽略它。
It partially fixed the problem (only Voice Over/MacOS). But Windows/NVDA/Firefox does not work. It just ignore it.
我尝试使用 aria-label
和 aria-由
描述,但似乎不起作用。
提前致谢。
I've tried using aria-label
and aria-describedby
but seems it does not work.Thanks in advance.
推荐答案
浏览器/屏幕阅读器组合应忽略 aria-label
和/或 aria-labelledby
在< span>
上。您可以在这里看到更多关于哪些元素支持哪些元素的更多信息:
A browser / screen reader combo should ignore aria-label
and/or aria-labelledby
on a <span>
. You can see a bit more about what elements with those attributes are supported in which combinations here: ARIA support by user agent
相反,您最好的选择可能是使用屏幕外技术。首先是CSS可视地隐藏一个东西,但仍然留在屏幕阅读器的页面中:
Instead, your best bet is likely to use an off-screen technique. First the CSS to visually hide a thing but still leave it in the page for screen readers:
.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
然后你可以把你的替代品放到< span class =visual-hidden>
,没有人会看到它。那么你做的不希望屏幕阅读器发言的部分得到 aria-hidden
:
Then you can put your alternative into a <span class="visually-hidden">
and nobody will see it. Then the piece you do not want the screen reader to speak gets an aria-hidden
:
<p>
some text here...
<span class="visually-hidden">Formula description</span>
<span aria-hidden="true">
ε<sub>x</sub> = -200(10<sup>-6</sup>),
...
</span>
<p>
那应该为你做。
这篇关于aria-labelled不使用NVDA / Firefox的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!