屏幕阅读器未在移动设备中读取父母的 aria-label答案

【问题标题】：Screen reader not reading parent's aria-label in mobile屏幕阅读器未在移动设备中读取父母的 aria-label
【发布时间】：2019-02-20 10:48:51
【问题描述】：

我是a11y的新手，有类似这种结构的代码-

<div class="wrapper" aria-label="this is a group of test elements">
   <div aria-hidden="true">test 1</div>
   <div aria-hidden="true">test 2</div>
</div>

MAC chrome 上的行为 - 按 Ctrl+Option+rightArrowKey 将焦点放在包装器上，VoiceOver 显示“这是一组测试元素”

但是，在移动设备上，aria-label 会被忽略。

有什么方法可以聚焦父容器并使屏幕阅读器读取 aria-label？

【问题讨论】：

标签： html accessibility

【解决方案1】：

见“2.10 Practical Support: aria-label, aria-labelledby and aria-describedby”。

几个关键点（强调我的）：

aria-labelledby 和aria-describedby 得到交互式内容元素的强大支持，例如链接和表单控件，包括多种输入类型。
不要在或
上使用 aria-label 或 aria-labelledby 除非它被赋予了角色。
因此，当您在非语义元素（例如

）上放置标签时，除非您为元素指定 role，否则可能无法读取该标签。但是，不要仅仅为了读取标签而赋予它一个角色。确保该容器的用途确实需要一个应该传达给屏幕阅读器的角色。
【讨论】：
- thanks @slugolicious role="text" on wrapper div 解决了我的问题，但它是实现预期结果的理想方式吗？我试图将重点放在包装部分并阅读摘要，同时避免单独阅读其内容（在本例中为 test1 和 test2）。
- role="text" 不是有效角色（请参阅我的回复中的角色链接），虽然它目前在 ios 上受到尊重，但对它的支持可能随时消失这不是记录在案的有效角色。其次，你为什么把重点放在包装上？它不是交互式元素，因此不应将焦点转移到它上。