Question

我知道，默认情况下，JAWS将忽略标签。我的团队解决了这个问题。但是，现在，我们有了一些使用标签显示的内容，这些内容对于有视力的用户显示的文本与JAWS读出信息的效果不佳。在我们的特定情况下，它是国际银行帐号，可以包含字母。在这种情况下，JAWS尝试不读取单个数字，而是尝试以单词形式读取内容，从而导致可预测的输出不佳。

所以，有几个问题：

鉴于这是我没有时间也没有重构权限的大页面的一部分，是否有办法使它在我描述的限制范围内工作？
如果您要从头开始编写这样的页面，那么制作页面的最佳实践是什么，以便我能够为只读的非交互式内容提供“替代”文本？

如果有帮助，我期望的结果是这样的：

12345A

我们无法提出将JAWS读为“ 1 2 3 4 5 A”而不是将“ 12345A”读为一个单词的任何技术组合。

Answer 1

技术答案始终是相同的，并且在这里和其他地方已经重复了很多次：如果您也未分配角色，则aria-label无效。

现在，对于更多的用户体验问题，我自己是瞎子，我可以告诉你，将一个咒语逐个从每个数字中逐出可能不是一个好主意。

我们习惯将帐户，电话等号码分组
如果我们要单独从每个数字中提取一个咒语，则下颌具有以下功能：快速两次插入+向上箭头。其他屏幕阅读器也有类似的快捷方式。
我的母语是法语，而不是英语。尽管我在英文页面上，但我可能想用法语说数字，因为这对我来说比较容易。通过强加标签，您可以防止我听到法语数字。
也许是最好的说法：如果要在电话上提供您的帐号，您会说什么？您会说“一二三四五”，“十二个三千三十二一”，“十二个三十四五”吗？进行这种小练习可能会给您打上良好的烙印，但是有几个人可能会给您不同的答案。

Answer 2

昆汀给出了一个很好的答案，涵盖了所有情况的99.9％。

但是，有些不熟练的屏幕阅读器用户可能会从逐字阅读的内容中受益。

这应该是字段上的可选切换。

实现逐个字母读取的方法如下，但请请谨慎使用，并牢记上述情况。

诀窍是使用可视的隐藏类（在此示例中，仅屏幕阅读器-vh）在每个项目之间添加句号。

请确保所有内容都紧紧包装，否则使用会导致不必要的空格。

这样做的好处在于QuentiC所说的-有些人使用另一种语言，ARIA标签并不总是被翻译，下面的例子中的数字应该被翻译。

.vh { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

<div>
A<span class="vh">.</span>1<span class="vh">.</span>C<span class="vh">.</span>
</div>

为<span />提供JAWS的替代文本

2 个答案: