accessibility - 如何对一组 div 进行分组以实现可访问性

Question

我想要一些关于可访问性的帮助：我们如何对一组 div 进行分组，以便在屏幕阅读器模式下将它们作为一个组读出？

例子：

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

标签： accessibilityvoiceoverweb-accessibility

Answer 1

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

根据您的示例图像，aria-label将具有以下格式：

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

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

屏幕阅读器应aria-label在父 div 上宣布并忽略子 div。