更新
我正在做一个必须符合508标准的项目。应用程序中有一个部分具有动态元素。
例如,有这样一个html:
<div id="dynamicDiv"></div>
<select id="selectId"></select>
select
的选项从数据库填充到后端。当用户从select
中选择一个选项时,一个元素被填充到dynamicDiv
元素中。在这种情况下,它是一个label
,其中包含选项中的文本,以及一个单击后将从dynamicDiv
中删除label
和button
的button
。
当我用JAWS 16测试这一点时,JAWS似乎在DOM中"迷失"了。焦点仍然放在select
上,但JAWS正在从添加的元素中读取信息。通常,它在label
和添加到dynamicDiv
的button
之间开始读取。当您尝试使用箭头键浏览select
时,JAWS开始读取,就像您在DOM中移动一样。
所有这一切中最奇怪的部分是,select
上仍然有蓝色高亮和点聚焦的边框。如果你能让JAWS读取select
的内容并按enter键,那么select
就会返回工作状态(能够用箭头键浏览select
中的选项),直到你从选项中选择一个新东西。然后JAWS又迷路了。
我试图把重点放在select
上,但这也不起作用。select
看起来仍然有焦点,但JAWS正在读取更新后的dynamicDiv
。我想的是,JAWS从DOM使用的索引没有更新。因此,JAWS认为它在同一个元素(本例中为select
)上,但实际上它指向的是添加到DOM中的新元素。
有人碰到过这个吗?有人知道解决方案吗?
这个区域被Aria Live标签包围了吗?如果是这样的话,这可能就是它"丢失"的原因,因为在dom更新时,JAWS会读取它,但当它真正读取更新的信息时,它似乎会丢失。