Sam*_*mmy 1 html javascript accessibility wai-aria
<span class="phone" aria-label="phone number 9 4 9 . 5 5 5 . 1 2 3 4">949.555.1234</span>
这会打印页面上的电话号码。单击电话号码将按预期读取咏叹调标签，但是，如果我使用键盘箭头导航到电话号码，它会读取页面上输出的任何文本（“九百四十九期五百”... ) 在这种情况下，并且 aria-label 不受尊重。
使用 ChromeVox
另外值得一提的是，使用箭头键时，span 标签不会获得焦点。IE$("span").focus(function(){ // never gets here })
您能澄清一下“使用键盘导航”的含义吗？
您是否习惯TAB拨打电话号码，然后屏幕阅读器无法读取您的电话号码aria-label？tabindex="0"（你身上没有钥匙<span>，所以我猜你没有使用钥匙TAB。）
或者您是否使用屏幕阅读器键通过键盘进行导航，例如遍历 DOM 的向上/向下键（或更准确地说，遍历可访问性树，这与 DOM 类似）。
如果执行后者，那么如果该元素没有role ，许多浏览器将不会在可访问性树中显示该元素。 元素没有任何语义，因此您还必须添加该属性。这是否是正确的行为是有争议的，因为规范没有具体说明还必须指定角色。 aria-label<span>rolearia-label
有一些关于如何支持 的ARIA 指南aria-label，解释了（某种程度上）为什么aria-label可能会在<span>.
因此，如果您确实想要aria-label阅读，则必须决定赋予该角色什么样的角色<span>。仅凭一小段代码很难判断，但电话号码是否也是其他信息（例如姓名和地址）的一部分？如果是这样，其他信息（名称、地址等）是否显示在列表或表格中，或者只是纯文本？
但是，作为旁注，当您指定 anaria-label来强制屏幕阅读器以某种方式阅读文本时，通常不建议这样做。对于屏幕阅读器用户来说，听到电话号码被读为实数而不是单个数字当然并不理想，但他们已经习惯了，并且如果他们愿意的话，可以一次浏览一个数字。在某些时候，当autocomplete屏幕阅读器更广泛地支持该属性时，希望这个问题能够得到解决。与此同时，当您强制屏幕阅读器显示文本时，可能会对盲文用户产生不利影响。在您的手机示例中，作为盲文用户，我的盲文设备将向我显示“九个空格四个空格九个空格点空格五个空格五个空格五个空格[等等]”。我必须清除很多空格字符的盲文字符。