3

因此，我可以使用 NDVA 屏幕阅读器让我的页面正常工作，但是，在 JAWS 中进行测试时，它会切换到跨度，但不会读取文本。

<span tabindex="0" title="whatever">whatever</span>

更新：

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

  • 回复@discojoe（感谢回复）

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

3 回答 3

2

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

我刚刚尝试过这个并且遇到了同样的问题；虽然我可以通过箭头浏览文档并向我读出一个跨度，但我不能再按标签并读出它。

使用类似的东西

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

工作正常。

使用 tabindex 属性还有其他问题，特别是对于键盘用户。在使用 tabindex 属性的页面上，tab 焦点顺序将首先遍历所有指定 tabindex 的元素，然后按源代码顺序遍历所有没有它的元素。

一个好的一般规则是对所有键盘可访问元素使用 tabindex，或者对它们都不使用，以解决此问题。

我意识到在这种情况下，您可能会使用 tabindex 来仅为该项目提供键盘可访问性，因此如果您使用提到的a href方法，这个问题可能无关紧要，但为了完整起见，我想提一下

于 2011-01-24T10:58:47.737 回答
0

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

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

而已。我用 JAWS 对其进行了测试。

于 2017-06-08T14:08:58.207 回答
0

首先，在这些元素之前阅读“链接”不会以负面的方式影响可访问性，我想说，恰恰相反：你警告用户他/她可以以这种方式点击元素。
在这里，您有几个选择：

  1. 使用相当多的 ARIA：将link角色添加到span元素中，正确编码展开/折叠菜单（具有相应的 ARIA 角色和状态）。
  2. <a href="#"按照@discojoe 的建议使用，但添加（event.preventDefault()在 jQuery 中）或return false;（在 vanilla 中），这样页面就不会重新初始化。

如果您需要更多建议，请发布一些代码或指向您页面的链接。

于 2016-11-24T21:22:25.913 回答