javascript - 使用键盘导航时未读取 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

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

标签： javascripthtmlaccessibilitywai-aria

Answer 1

您能否澄清“使用键盘导航”的含义？

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

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

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

有一些关于如何支持的ARIA 指南aria-label解释（某种程度上）为什么aria-label在<span>.

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

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