如何将一组 div 分组以实现可访问性

Question

我需要一些辅助功能方面的帮助：我们如何将一组 div 分组，以便在屏幕 reader 模式下将它们作为一个组读出？

示例：

这里可以看到有两行；我怎样才能读出每一行的所有细节？

Answer 1

一个选项是在父 div 上设置 aria-label 并使用 aria-hidden="true" 隐藏子 div。

根据您的示例图像，aria-label 的格式为：

aria-label="<TIME> <DESCRIPTION> <CITY>"

例如aria-label="10:31am Package left FedEx location Memphis, TN"

屏幕 reader 应该在父 div 上宣布 aria-label 并忽略子 divs。