[英]JAWS Screen Reader Repeats Tree Items in FireFox
I have run into an issue with the JAWS screen reader & Firefox. JAWS屏幕阅读器和Firefox出现问题。
I have a tree like the one below. 我有一棵下面的树。 Whenever any of the
<a>
elements gain focus, either by tabbing from the window or from the <button>
, JAWS narrates the element three times . 只要
<a>
元素中的任何一个获得焦点(通过从窗口或<button>
进行制表),JAWS都会对元素进行三次旁白。 As far as i can tell, Firefox is the only browser that does this. 据我所知,Firefox是唯一执行此操作的浏览器。
Is there something wrong with my markup here? 我的标记这里有问题吗?
<nav role="tree">
<ol role="group">
<li role="presentation">
<a href="javascript:void(0)" role="treeitem">Parent Link 1</a>
<ol role="group">
<li role="presentation">
<a href="javascript:void(0)" role="treeitem">Child Link 1</a>
<li role="presentation">
<a href="javascript:void(0)" role="treeitem">Child Link 2</a>
</ol>
<li role="presentation">
<a href="javascript:void(0)" role="treeitem">Parent Link 2</a>
<ol role="group">
<li role="presentation">
<a href="javascript:void(0)" role="treeitem">Child Link 3</a>
<li role="presentation">
<a href="javascript:void(0)" role="treeitem">Child Link 4</a>
</ol>
</ol>
</nav>
<button>Something else to focus on</button>
Many thanks. 非常感谢。
You should at the very least be using aria-owns
to show the relationship between the parent and the child. 您至少应该使用
aria-owns
来显示父母与孩子之间的关系。 Take a look at this example http://oaa-accessibility.org/example/42/ 看一下这个例子http://oaa-accessibility.org/example/42/
Also, it would be better to actually just use the hierarchical list item structure that you already have. 另外,最好只使用已经拥有的分层列表项结构。 See this example: http://oaa-accessibility.org/example/41/
参见以下示例: http : //oaa-accessibility.org/example/41/
If you have done that and still have problems, try it with NVDA instead of JAWS. 如果您这样做仍然有问题,请尝试使用NVDA而不是JAWS进行尝试。 NVDA is more standards compliant than JAWS.
NVDA比JAWS更符合标准。
Once again, i have found the answer after asking the question. 再一次,我在问了问题之后找到了答案。 :(
:(
Evidently, if i move role="tree"
from the outer <nav>
to the first <ol>
, Firefox narrates as expected. 显然,如果我将
role="tree"
从外部<nav>
移至第一个<ol>
,则Firefox将按预期进行旁白。 The markup now looks like this: 标记现在看起来像这样:
<nav>
<ol role="tree">
<li role="presentation">
<a href="javascript:void(0)" role="treeitem">Parent Link 1</a>
<ol role="group">
<li role="presentation">
<a href="javascript:void(0)" role="treeitem">Child Link 1</a>
<li role="presentation">
<a href="javascript:void(0)" role="treeitem">Child Link 2</a>
</ol>
<li role="presentation">
<a href="javascript:void(0)" role="treeitem">Parent Link 2</a>
<ol role="group">
<li role="presentation">
<a href="javascript:void(0)" role="treeitem">Child Link 3</a>
<li role="presentation">
<a href="javascript:void(0)" role="treeitem">Child Link 4</a>
</ol>
</ol>
</nav>
<button>Something else to focus on</button>
This smells like a bug in Firefox to me. 对我来说,这闻起来像Firefox中的错误。 I have opened a bug & will follow an developments.
我已经打开了一个错误 ,并且将关注事态发展。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.