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



我知道JAWS在默认情况下会忽略<span/>标记。我的团队解决了这个问题。然而,现在,我们有一些使用<span/>标签显示的内容,其中为有视力的用户显示的文本在JAWS读取信息时效果不佳。在我们的具体情况下,它将是国际银行账号,其中可以包含字母。在这种情况下,JAWS尝试将内容作为一个单词来读取,而不是读取单个数字,这会导致可预测的较差输出。

因此,有几个问题:

  1. 考虑到这是一个大页面的一部分,我既没有时间也没有权限重构,有没有办法在我所描述的限制范围内实现这一点
  2. 如果你从头开始写这样的页面,那么制作页面的最佳实践是什么,这样我就可以为只读、非交互式内容提供"替代"文本

如果有帮助的话,我设想的结果是这样的:

<span id="some-label" aria-label="1 2 3 4 5 A">12345A</span>

我们一直无法想出任何技术组合来让JAWS读取:"1 2 3 4 5 A",而不是将"12345A"作为一个单词读取。

技术答案总是一样的,在这里和其他地方已经重复了很多次:如果不分配角色,咏叹调标签将无效

现在,对于更多的用户体验问题,我自己是盲人,我可以告诉你,强迫每个数字单独拼写可能不是一个好主意。

  • 我们习惯于将帐户、电话等号码分组
  • 如果我们想单独拼写每个数字,Jaws有一个功能:快速插入+向上箭头两次。其他屏幕阅读器也有类似的快捷方式
  • 我的母语是法语,而不是英语。虽然我在英语页面上,但我可能想用法语说出数字,因为这对我来说更容易。通过强制标注,你会阻止我听到法语数字
  • 也许最好的论点是:如果你在电话里提供你的账号,你会说什么?你会说"一二三四五"、"一万二千三百二十一"、"十二点三四五",还是别的什么?做这个小练习可能会给你一个很好的标签,但可能会有几个人给你不同的答案

Quentin给出了一个非常好的答案,覆盖了99.9%的所有场景。

然而,也有一些不太熟练的屏幕阅读器用户可能会从逐字逐句的读回中受益。

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

实现逐字逐句宣读的方法如下,但谨慎使用,并考虑到上述情况。

诀窍是使用视觉隐藏类(本例中仅限屏幕阅读器-vh(在每个项目之间添加句号。

确保所有东西都包装得很紧,否则你会因为使用<span>s而留下不需要的空间。

正如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>

相关内容

  • 没有找到相关文章

最新更新