ARIA 标签应该提供上下文吗？

Question

我正在开发一个列出大量 MP3 广播节目的网站。每个程序都有一些不同的 tab-able 元素：标题 link、标签、选择语言的控件和播放按钮。当用户使用屏幕 reader 在内容上切换时，他们会听到如下内容：

Dan's Story

Mystery

French // There might be a tag named this

Mayhem

English

French

Spanish

Play

Under the Treehouse

Nature

Outdoors

English

French

Play

仅从音频中辨别是非常混乱的。

所以我的问题是，在您拥有具有控件的重复“组件”的情况下，最佳做法是什么。当您在控件上切换时，屏幕 reader 是否应提供有关它属于哪个组件的上下文？

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

Answer 1

您可以在部分之间添加一些屏幕 reader 纯文本，例如 "Tags" 和 "Languages"。

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

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

您的 aria-label 解决方案可能取决于 HTML，但屏幕 reader 仅当它是表单控件或实际标签时才倾向于读出它 - 它不会没有读出 <div> 或 <span>

Answer 2

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

<h#>Tags</h#>

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

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

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

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

ARIA 标签应该提供上下文吗？

Should ARIA labels provide context?

accessibility

wai-aria

screen-readers