<span class="phone" aria-label="phone number 9 4 9 . 5 5 5 . 1 2 3 4">949.555.1234</span>
这会在页面上打印出电话号码。单击电话号码将按预期读取aria标签，但是，如果我使用键盘箭头导航至电话号码，它将读取页面上输出的所有文本（“九百四十九期五百” ... ），并且不遵守aria标签。
使用ChromeVox
另外，值得一提的是，使用箭头键时，span标签不能接收焦点。即$("span").focus(function(){ // never gets here })
答案 0 :(得分：2)
您能否阐明“使用键盘导航”的含义？
您是否使用 TAB 来获取电话号码，然后屏幕阅读器无法读取您的aria-label？ （您的tabindex="0"上没有<span>，因此我猜测您使用 TAB 键不是。）
或者您是使用屏幕阅读器键（例如，沿着DOM行走的向上/向下键）（或更准确地说，沿着类似于DOM的可访问性树）通过键盘进行导航。
如果执行后者，那么如果该元素没有role，那么许多浏览器将不在该元素的aria-label中浮出水面。 <span>元素没有任何语义含义，因此您还必须添加role属性。由于aria-label spec并未明确指出也必须指定一个角色，因此这是否正确尚有待商bat。
关于如何支持aria-label的一些问题ARIA guidelines解释了为什么aria-label上的<span>可能会被忽略。
因此，如果您确实希望阅读aria-label，则必须决定赋予<span>的角色。仅用一小段代码很难分辨，但是电话号码是否也包含其他信息（例如名称和地址）？如果是这样，列表或表格中是否显示其他信息（名称，地址等），还是纯文本？
不过，作为一个旁注，当您指定aria-label以强制屏幕阅读器以某种方式阅读文本时，通常不是推荐的做法。对于屏幕阅读器用户来说，将电话号码读为实数而不是一位数字当然不是理想的选择，但是他们已经习惯了，并且可以选择每次浏览一位数字。在某些时候，当屏幕阅读器更广泛地支持autocomplete属性时，则有望解决此问题。同时，当您为屏幕阅读器强制输入文本时，它可能对盲文用户产生不利影响。在您的电话示例中，作为盲文用户，我的盲文设备将向我显示“九空间四空间九空间点空间五空间五空间五空间[etc]”。我必须除掉空格字符中的很多盲文字符。