使用键盘导航时未读取 aria-label 属性

Question

<span class="phone" aria-label="phone number 9 4 9 . 5 5 5 . 1 2 3 4">949.555.1234</span>

这会在页面上打印出电话号码。单击电话号码将按预期读取 aria-label，但是，如果我使用键盘箭头导航到电话号码，它会读取页面上输出的任何文本（“949 周期 500”... ) 在这种情况下，不尊重 aria-label。

使用 ChromeVox

另外值得一提的是，span 标签在使用箭头键时不会获得焦点。即$("span").focus(function(){ // never gets here })

Answer 1

您能否阐明“使用键盘导航”的含义？

您是否使用 TAB 获取电话号码，然后屏幕阅读器无法读取您的 aria-label？ （你的<span> 上没有tabindex="0"，所以我猜你没有使用 TAB 键。）

或者您是否使用屏幕阅读器键在键盘上导航，例如遍历 DOM 的向上/向下键（或者更准确地说，遍历类似于 DOM 的可访问性树）。

如果是后者，那么如果该元素没有role，许多浏览器将不会在可访问性树中显示该元素的aria-label。 <span> 元素没有任何语义含义，因此您还必须添加 role 属性。这是否是正确的行为是值得商榷的，因为aria-label spec 并没有明确说明还必须指定角色。

有一些关于如何支持 aria-label 的 ARIA guidelines 解释了（某种程度上）为什么 aria-label 可能会在 <span> 上被忽略。

因此，如果您真的想读取aria-label，您必须决定赋予<span> 什么样的角色。仅凭您的小sn-p代码很难分辨，但电话号码是否也是其他信息的一部分，例如姓名和地址？如果是这样，其他信息（姓名、地址等）是否显示在列表或表格中，还是只是纯文本？

不过，附带说明一下，当您指定 aria-label 以强制屏幕阅读器以某种方式阅读文本时，通常不建议这样做。对于屏幕阅读器用户来说，将电话号码读作实数而不是单个数字当然不是理想的选择，但他们已经习惯了，如果愿意，他们可以一次导航一个数字。在某个时候，当屏幕阅读器更广泛地支持autocomplete 属性时，希望这个问题能够得到解决。同时，当您为屏幕阅读器强制输入文本时，可能会对盲文用户产生不利影响。在您的手机示例中，作为盲文用户，我的盲文设备将显示“九空格四空格九空格点空格五空格五空格五空格[等]”。对于我必须清除的空格字符，有很多盲文字符。