ARIA 标签是否应该提供上下文？答案

【问题标题】：Should ARIA labels provide context?ARIA 标签是否应该提供上下文？
【发布时间】：2023-03-15 05:00:01
【问题描述】：

我正在开发一个列出一堆 MP3 广播节目的网站。每个程序都有一些不同的选项卡元素：标题链接、标签、选择语言的控件和播放按钮。当用户使用屏幕阅读器浏览内容时，他们会听到类似的声音：

丹的故事

谜题

法语 // 可能有一个标签叫 this

混乱

英语

法语

西班牙语

播放

树屋下

自然

户外

英语

法语

播放

仅从音频中辨别是非常令人困惑的。

所以我的问题是，在您经常使用具有控件的“组件”的情况下，最佳做法是什么。当您在控件上切换时，屏幕阅读器是否应该提供关于它属于哪个组件的上下文？

例如，我应该将播放按钮的 aria-label 设置为 aria-label="Play Under the Treehouse" 之类的东西吗？同样，我是否应该将 aria-labels 添加到将它们描述为标签的标签中，例如 aria-label="Mystery Tag"？

【问题讨论】：

【解决方案1】：

在标签集合中，标题可以很好地完成工作，而不会太冗长：

<h#>Tags</h#>

<p>
Nature, Outdoors, English, French
</p>

理想情况下，如果您有任何内容分组，那么这很自然。您可以设置标题的样式以根据需要将其最小化。

对于播放按钮，这也取决于。如果播放按钮显然是页面上唯一的东西，那么您可能不需要它。如果播放按钮是众多按钮之一，但与事物的标题组合在一起，则您可能不需要它。如果只有播放按钮而没有良好的分组，或者播放按钮切换上下文，那么您可能确实需要标签。

这里的关键是首先要依赖好的内容和 HTML 结构。然后考虑页面的冗长程度（冗长的页面对于屏幕阅读器用户来说很麻烦）。那么，只有当您在标准 HTML 或页面结构中绝对找不到好的方法时，您才可以考虑使用 ARIA。

【讨论】：

【解决方案2】：

您可以在部分之间放置一些仅屏幕阅读器的文本，例如“标签”和“语言”。

只需将一些文本放在屏幕外：

.screenreader-only
{
        position: absolute;
        left: -10000px;
}

您的 aria-label 解决方案可能依赖于 HTML，但屏幕阅读器只会在它是表单控件或实际标签时才倾向于读出它 - 它不会被 <div> 或 <span> 读出

【讨论】：