JAWS 屏幕阅读器忽略 SPAN 标签

发布于 2024-10-14 00:40:52 字数 849 浏览 5 评论 0 原文

因此,我能够让我的页面与 NDVA 屏幕阅读器一起正常工作,但是,在 JAWS 中测试时,它会切换到跨度,但不会读取文本。

whatever

更新:

  • 我想要实现的是我有一些元素可以展开/折叠某些元素我正在构建的网站的各个部分。然而,这些功能元素不是链接。

  • 回复@discojoe(感谢您的回复)

  • 添加 TABINDEX="0 " 属性会将 SPAN/DIV 元素按自然顺序插入到选项卡列表中(而默认情况下,它们通常不会添加到选项卡列表中)。这允许屏幕阅读器点击该元素,并且工作得很好。具体来说,我的问题是 JAWS 只会选择该元素,但不会读取它。
  • 我同意,使用 TABINDEX="n" (其中 n > 0)是一件坏事,它会扰乱选项卡列表的自然顺序,但我不会这样做。
  • 另外,您可以使用 TABINDEX="-1" 从选项卡列表中删除默认放置的元素(例如 A 或 INPUT 标记)。
  • 我已经尝试过使用标签,但是,当用户点击此链接上的 Enter(以触发 onclick 事件)时,它会对页面执行一些操作(不是完全重新加载,而是有点重新初始化),从而延迟与该元素关联的动画。我发现这对于普通用户和残疾用户来说都是一种糟糕的体验。
  • 在A标签中使用#标签将hash标签添加到IE中的页面标题中。
  • 此外,使用 A 标签会使屏幕阅读器在每个元素之前/之后读出“LINK”,并且由于它们实际上不是链接,我认为这对可访问性有负面影响。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

_失温 2024-10-21 00:40:52

我首先想知道为什么您使用 span 元素而不是标准的 a href 元素?你想要实现什么?如果您可以提供更多上下文\代码,可能会有所帮助。

我刚刚尝试过这个,但遇到了同样的问题;虽然我可以通过箭头浏览文档并读出跨度,但我无法使用 Tab 键将其读出。

使用类似的东西来代替

<a href="#" onclick="javascript: return false;">Whatever</a> 

效果很好。

使用 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

<a href="#" onclick="javascript: return false;">Whatever</a> 

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

爱的十字路口 2024-10-21 00:40:52

首先,在此类元素之前阅读“链接”不会以负面方式影响可访问性,我想说,这是完全相反的:您警告用户他/她可以这样单击该元素一种方式。
这里你有几个选择:

  1. 使用相当多的 ARIA:将 link 角色添加到 span 元素,正确编码你的展开/折叠菜单(使用相应的 ARIA 角色和州)。
  2. 按照 @discojoe 的建议使用 但添加 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:

  1. Use quite a lot of ARIA: add the link role to your span elements, properly code your expanding/collapsing menus (with corresponding ARIA roles and states).
  2. Use <a href="#" as suggested by @discojoe but add event.preventDefault() (in jQuery) or return false; (in vanilla) so the page would not reinitialize.

If you need more suggestions, please post some code or a link to your page.

橘虞初梦 2024-10-21 00:40:52

使用锚标签进行屏幕阅读简单文本相关的作品。你可以简单地做:-

<a href="javascript:void(0);" title="What you want to be read by jaws></a>

就是这样。我用 JAWS 测试过。

Use anchor tag for screen reading simple text related works. You can simply do :-

<a href="javascript:void(0);" title="What you want to be read by jaws></a>

That's it. I tested it with JAWS.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文