因此,我能够让我的页面与 NDVA 屏幕阅读器一起正常工作,但是,在 JAWS 中测试时,它会切换到跨度,但不会读取文本。
whatever
更新:
So I was able to get my page working just fine with the NDVA screen reader, however, when testing in JAWS, it tabs to the span, but doesn't read the text.
<span tabindex="0" title="whatever">whatever</span>
UPDATE:
-
What I am trying to achieve is a I have a few elements which expand/collapse certain sections of the site I'm building. These functional elements, however are not links.
-
Reponse to @discojoe (thanks for the response)
- Adding a
TABINDEX="0"
attribute will insert the SPAN/DIV element into tabbing list in natural order (whereas by default, they're usually not added to the tabbing list). This allows screen readers to tab to that element, and is working just fine. Specifically, my problems is JAWS will just tab to that element, it just doesn't read it.
- I agree, using
TABINDEX="n"
(where n > 0) is a bad thing which messes with the natural order of the tabbing list, and I am not doing that.
- Also, you can use
TABINDEX="-1"
to remove an element from the tabbing list if it's placed in there by default (example an A or INPUT tag).
- I have already tried using tags, however, when user hits enter on this link (to trigger the onclick event), it does something (not quite reloading, but kinda re-initializing) to the page which delays the animation associated with that element. I find that to be a bad experience to both normal and disabled users.
- using the # tag in the A tag adds the hash tag to the page title in IE.
- Additionally, using A tags makes the screen reader read out "LINK" before/after each element, and since they're not actually links, I feel this is negative impact on accessibility.
发布评论
评论(3)
我首先想知道为什么您使用 span 元素而不是标准的 a href 元素?你想要实现什么?如果您可以提供更多上下文\代码,可能会有所帮助。
我刚刚尝试过这个,但遇到了同样的问题;虽然我可以通过箭头浏览文档并读出跨度,但我无法使用 Tab 键将其读出。
使用类似的东西来代替
效果很好。
使用 tabindex 属性还存在其他问题,特别是对于键盘用户而言。在使用 tabindex 属性的页面上,tab 焦点顺序将首先遍历所有指定了 tabindex 的元素,然后按照源代码顺序遍历所有没有指定 tabindex 的元素。
一个好的通用规则是要么对所有键盘可访问的元素使用 tabindex,要么不使用 tabindex,以解决此问题。
我意识到在这种情况下,您可能使用 tabindex 只是为这一项提供键盘可访问性,因此如果您使用提到的 a href 方法,这个问题可能无关紧要,但我想提一下完整性
I would first want to know why you are using a span element and not a standard a href element? What is it you are wanting to achieve? It may help if you can provide more context\code.
I've just tried this and am getting the same issue; whilst I can arrow through the document and have a span read out to me, I cannot then tab to it and have it read out.
Using something instead like
works fine.
There are additional problems around using the tabindex attribute, specifally for keyboard users. On a page that users the tabindex attribute, the tab focus order will first of all go through all of the elements with tabindex specified, and then run through all the elements without it, in source code order.
A good general rule is to either use tabindex for all keyboard accessible elements, or for none of them, to get around this problem.
I realise in this case, you are likely using tabindex to just provide keyboard accessibility for this one item, so this issue may be irrelavant if you use the a href approach mentioned, but I wanted to mention it for completeness
首先,在此类元素之前阅读“链接”不会以负面方式影响可访问性,我想说,这是完全相反的:您警告用户他/她可以这样单击该元素一种方式。
这里你有几个选择:
link
角色添加到span
元素,正确编码你的展开/折叠菜单(使用相应的 ARIA 角色和州)。但添加
event.preventDefault()
(在 jQuery 中)或return false;
(原版)因此页面不会重新初始化。如果您需要更多建议,请发布一些代码或指向您页面的链接。
First of all, reading "link" before such elements does not impact accessibility in a negative way, I'd say, it's quite opposite: you warn the user that he/she can click the element in such a manner.
Here you have a couple options:
link
role to yourspan
elements, properly code your expanding/collapsing menus (with corresponding ARIA roles and states).<a href="#"
as suggested by @discojoe but addevent.preventDefault()
(in jQuery) orreturn false;
(in vanilla) so the page would not reinitialize.If you need more suggestions, please post some code or a link to your page.
使用锚标签进行屏幕阅读简单文本相关的作品。你可以简单地做:-
就是这样。我用 JAWS 测试过。
Use anchor tag for screen reading simple text related works. You can simply do :-
That's it. I tested it with JAWS.