JAWS屏幕阅读器忽略了SPAN标签。

Question

所以，我已经成功地让我的页面在NDVA屏幕阅读器上正常工作，但是，在JAWS中测试时，它会切换到span标签，但不会读取文本。 <span tabindex="0" title="whatever">whatever</span> 更新：

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

回应@discojoe（感谢您的回应）：添加一个TABINDEX="0"属性将按自然顺序将SPAN/DIV元素插入到制表符列表中（默认情况下，它们通常不会添加到制表符列表中）。这使得屏幕阅读器可以切换到该元素，并且可以正常工作。具体来说，我的问题是JAWS只会切换到该元素，而不会读取它。

我同意，使用TABINDEX="n"（其中n > 0）是一件坏事，会破坏制表符列表的自然顺序，而我没有这样做。

此外，如果默认情况下将其放置在其中的话（例如A或INPUT标记），您可以使用TABINDEX="-1"将元素从制表符列表中删除。

我已经尝试过使用a标签，但是当用户在此链接上按Enter键（以触发onclick事件）时，它会对页面进行某些操作（不完全重新加载，但是有点重新初始化），从而延迟与该元素相关联的动画。我认为这对正常用户和残障用户都是不好的体验。

在A标签中使用#标记会将哈希标记添加到IE中的页面标题中。

此外，使用A标签会使屏幕阅读器在每个元素之前/之后朗读“链接”，而由于它们实际上不是链接，我认为这对可访问性产生了负面影响。

- Roy Rico

Answer 1

我首先想知道为什么你使用了一个span元素而不是标准的a href元素？你想要实现什么效果？如果你能提供更多上下文和代码，可能会有所帮助。

我刚试过这个方法，遇到了同样的问题；虽然我可以通过箭头在文档中浏览并让屏幕阅读器读出一个span元素，但我不能通过tab键定位到它并进行朗读。

可以尝试使用类似以下代码：

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

运作正常。

使用tabindex属性时，键盘用户可能会遇到其他问题。在使用tabindex属性的页面上，tab键焦点顺序首先会通过所有指定tabindex的元素，然后按照源代码顺序遍历所有未指定tabindex的元素。

一个好的通用规则是要么对所有键盘可访问元素使用tabindex，要么不使用，以解决这个问题。

我意识到在这种情况下，您可能只是使用tabindex为这个项目提供键盘可访问性，因此如果您使用了提到的a href方法，则此问题可能不相关，但我想完整地提及它。

- discojoe

---

谢谢，我已经尝试使用<a>标签，但会产生负面影响（在我的问题更新中提到）。 - Roy Rico

你能否使用一个<button>标签，并将其样式设置为去除边框等，来附加脚本吗？这样更符合语义化，因为用户会期望按钮执行操作。 - discojoe

Answer 2

使用锚点标签来阅读与简单文本相关的内容。您可以简单地执行以下操作：

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

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

- Shah-Kodes

Answer 3

首先，在这些元素之前阅读“链接”并不会对可访问性产生负面影响，相反，我认为它是相反的：您警告用户可以以这种方式单击该元素。
这里有几个选项：

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

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

- Andre Polykanine