屏幕阅读器无法在手机中阅读父母的aria标签

Question

我是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标签会被忽略。

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

Answer 1

请参阅“ 2.10实践支持：aria-label，aria-labeledby和aria- describeby ”。

一些要点（重点是我的）：

• 交互式内容元素（例如，链接和包含许多输入类型的表单控件）得到有力的支持aria-labelledby和aria-describedby 。

• 除非被赋予角色，否则不要在<span>或<div>上使用aria-label或aria-labelledby 。

因此，当您在非语义元素（例如<div>）上放置标签时，除非为元素赋予角色，否则可能无法读取标签。 但是，不要仅仅为了读取标签就赋予它角色。 确保该容器的目的确实需要一个角色，该角色应该传达给屏幕阅读器。