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

Should ARIA labels provide context?

我正在开发一个列出大量 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"?

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

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

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

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

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

<h#>Tags</h#>

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

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

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

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