使用键盘导航时未读取 aria-label 属性
aria-label attribute not being read when navigating using keyboard
<span class="phone" aria-label="phone number 9 4 9 . 5 5 5 . 1 2 3 4">949.555.1234</span>
这会在页面上打印出 phone 编号。单击 phone 数字将按预期读取 aria-label，但是，如果我使用键盘箭头导航到 phone 数字，它会读取页面上输出的任何文本（"nine hundred forty-nine period five hundred" ...) 在这种情况下，aria-label 不受尊重。
使用 ChromeVox
另外值得一提的是，使用箭头键时 span 标签不会获得焦点。即 $("span").focus(function(){ // never gets here })
你能解释一下你所说的 "navigating using the keyboard" 是什么意思吗？
您是否正在使用 TAB 获取 phone 号码，然后屏幕 reader 没有读取您的 aria-label？ （你的 <span> 上没有 tabindex="0" 所以我猜你是 而不是 使用 TAB键。)
或者您是否使用屏幕 reader 键通过键盘导航，例如遍历 DOM 的 up/down 键（或者更准确地说，遍历辅助功能树，即类似于 DOM).
如果选择后者，那么许多浏览器 不会 在可访问性树中显示该元素的 aria-label 如果该元素没有 [=24] =] 没有具体说明还必须指定角色。
有一些关于如何支持 aria-label 的 ARIA guidelines 解释了（某种程度上）为什么 <span> 可能会被忽略 <span>。
因此，如果您真的想要 aria-label 阅读，则必须决定赋予 <span> 什么样的角色。仅凭一小段代码很难分辨，但其他信息的 phone 数字部分是否也是如此，例如姓名和地址？如果是，其他信息（姓名、地址等）是否显示在列表或 table 中，还是只是纯文本？
但是，作为旁注，当您指定 aria-label 以强制屏幕 reader 以某种方式阅读文本时，通常 不是 推荐的做法。对于屏幕 reader 用户来说，听到 phone 数字读作实数而不是单个数字当然不是理想的选择，但他们已经习惯了，并且可以一次浏览一个数字，如果他们所以选择。在某些时候，当 autocomplete 属性得到屏幕 reader 更广泛的支持时，希望这个问题能够得到解决。同时，当您强制为屏幕 reader 显示文本时，可能会对盲文用户产生不利影响。在您的 phone 示例中，作为盲文用户，我的盲文设备将显示 "nine space four space nine space dot space five space five space five space [etc]"。我必须清除 space 字符的大量盲文字符。
<span class="phone" aria-label="phone number 9 4 9 . 5 5 5 . 1 2 3 4">949.555.1234</span>
这会在页面上打印出 phone 编号。单击 phone 数字将按预期读取 aria-label，但是，如果我使用键盘箭头导航到 phone 数字，它会读取页面上输出的任何文本（"nine hundred forty-nine period five hundred" ...) 在这种情况下，aria-label 不受尊重。
使用 ChromeVox
另外值得一提的是，使用箭头键时 span 标签不会获得焦点。即 $("span").focus(function(){ // never gets here })
你能解释一下你所说的 "navigating using the keyboard" 是什么意思吗？
您是否正在使用 TAB 获取 phone 号码，然后屏幕 reader 没有读取您的 aria-label？ （你的 <span> 上没有 tabindex="0" 所以我猜你是 而不是 使用 TAB键。)
或者您是否使用屏幕 reader 键通过键盘导航，例如遍历 DOM 的 up/down 键（或者更准确地说，遍历辅助功能树，即类似于 DOM).
如果选择后者，那么许多浏览器 不会 在可访问性树中显示该元素的 aria-label 如果该元素没有 [=24] =] 没有具体说明还必须指定角色。
有一些关于如何支持 aria-label 的 ARIA guidelines 解释了（某种程度上）为什么 <span> 可能会被忽略 <span>。
因此，如果您真的想要 aria-label 阅读，则必须决定赋予 <span> 什么样的角色。仅凭一小段代码很难分辨，但其他信息的 phone 数字部分是否也是如此，例如姓名和地址？如果是，其他信息（姓名、地址等）是否显示在列表或 table 中，还是只是纯文本？
但是，作为旁注，当您指定 aria-label 以强制屏幕 reader 以某种方式阅读文本时，通常 不是 推荐的做法。对于屏幕 reader 用户来说，听到 phone 数字读作实数而不是单个数字当然不是理想的选择，但他们已经习惯了，并且可以一次浏览一个数字，如果他们所以选择。在某些时候，当 autocomplete 属性得到屏幕 reader 更广泛的支持时，希望这个问题能够得到解决。同时，当您强制为屏幕 reader 显示文本时，可能会对盲文用户产生不利影响。在您的 phone 示例中，作为盲文用户，我的盲文设备将显示 "nine space four space nine space dot space five space five space five space [etc]"。我必须清除 space 字符的大量盲文字符。