对于iOS,Safari,VoiceOver,如何让VoiceOver读取文本内容以外的内容？

我想让VoiceOver在 HTML span元素中说出除指定文本内容之外的其他内容：

<span tabindex="0" class="myClassName" id="DateLabel" role="heading">1:02a</span>

考虑一下我可能希望VoiceOver说出全文文本的情况.

当我添加aria-label属性时,VoiceOver仍在阅读文本,尽管IE和Chrome等桌面浏览器正在读取aria-label.

当我添加aria-labelledby属性加上隐藏的aria标签元素时,我能够让VoiceOver读取备用旁白,而不是文本内容.但是,我发现这只有在aria-role是按钮或链接等小部件角色时才有效.这很糟糕,因为我不想向用户暗示这是他们可以激活的交互元素. VoiceOver恼人地将“按钮”添加到叙述序列的末尾.我更喜欢使用像“标题”这样的结构角色,但是VoiceOver只是恢复阅读文本内容而不是阅读隐藏的叙述.

请帮忙！我一直在反对这一点,但我根本无法忍受iOS的非标准ARIA实现.我不明白为什么他们必须与桌面浏览器不同,因为它们很简单,但它们在很多地方,我找不到一个好的文档,概述了任何地方的确切行为.

解决方法

您可以像这样使用aria-label：

<span tabindex="0" class="myClassName" id="DateLabel" role="heading" aria-label="1 0 2 am">1:02a</span>

但是,为什么要将tabindex设置为0？对于标题,这不是一个好习惯,因为屏幕阅读器用户可以使用键盘命令在标题之间导航.此外,您还需要在标题上设置咏叹调级别以指示它的级别.

用于此目的的最佳标记是：

<span class="myClassName" id="DateLabel" role="heading"
aria-level="2" aria-label="1 0 2 am">1:02a</span>

更新：这似乎不再适用于至少某些版本的VoiceOver,它将读取可见内容并忽略aria-label.看到这个错误 – https://bugs.webkit.org/show_bug.cgi?id=160009