屏幕阅读器无法在手机中阅读父母的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标签吗？

Answer 1

请参阅“ 2.10 Practical Support: aria-label, aria-labelledby and aria-describedby”。

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

•   

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

•   

  除非为其赋予角色，否则请勿在或

  上使用aria-label或aria-labelledby。

因此，当您在非语义元素（例如

）上放置标签时，除非为元素赋予role，否则可能无法读取标签。但是，不要仅仅为了读取标签就赋予它角色。确保该容器的目的确实需要将角色传达给屏幕阅读器。