对于iOS，Safari，VoiceOver，如何让VoiceOver读取文本内容以外的内容？-Java 学习之路

我试图让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恼人地将“按钮”添加到叙述序列的末尾 . 我更喜欢使用像“ Headers ”这样的结构角色，但是VoiceOver只是恢复阅读文本内容而不是阅读隐藏的叙述 .

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

4 回答

7
您可以像这样使用aria-label：
```
1:02a
```
但是，为什么要将tabindex设置为0？对于 Headers ，这不是一个好习惯，因为屏幕阅读器用户可以使用键盘命令在 Headers 之间导航 . 此外，您还需要在 Headers 上设置咏叹调级别以指示它的级别 .

用于此目的的最佳标记是：
```
1:02a
```
Update ：这似乎不再适用于至少某些版本的VoiceOver，它会读取可见内容并忽略aria-label . 看到这个bug - https://bugs.webkit.org/show_bug.cgi?id=160009
回复于 2024-04-28T12:43:43+08:00
1
就我而言，我用于iOS VoiceOver：
```
visible text
```
添加属性role =“text”非常重要，以便VoiceOver读取属性aria-label =“”
回复于 2024-04-28T12:43:43+08:00
1
在这种情况下，您可以使用隐藏屏幕阅读器中的可视文本的模式，并隐藏屏幕阅读器文本以便直观显示 . 像这样：
```
1:02a Dec
1:02 AM December
```
并使用CSS来隐藏 .visually-hidden ，例如：
```
.visually-hidden {
 position: absolute;
 left: -999em;
}
```
不要使用 display:none ，因为它会将元素从发送到辅助功能API中删除 .

作为旁注：如果有的话，请小心使用 role="heading" ，如果是，请使用适当的 aria-leve="#" 数字/级别 .
回复于 2024-04-28T12:43:43+08:00
2
你可以使用abbr html元素 .

例如：
```
<abbr title="HyperText Markup Language">HTML</abbr>
```
回复于 2024-04-28T12:43:43+08:00

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

4 回答

相关问题