Question

我正在一个列出一堆MP3广播节目的网站上工作。每个程序都有一些不同的可选项元素：标题链接，标签，选择语言的控件和播放按钮。当用户使用屏幕阅读器对内容进行选项卡时，他们会听到以下内容：

丹的故事

推理

法语//可能有一个名为this
的标签
混乱

英

法

西班牙语

播放

在树屋下

自然

户外

英

法

播放

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

所以我的问题是，在您经常出现的情况下，最佳做法是什么？＃34;组件＆＃34;有控制权。当您选中控件时，屏幕阅读器是否应提供其所属组件的上下文？

例如，我应该将播放按钮的aria标签设置为aria-label="Play Under the Treehouse"吗？同样，我应该将咏叹调标签添加到将其描述为标记的代码中，例如aria-label="Mystery Tag"吗？

Answer 1

你可以在这些部分之间只有一些屏幕阅读器文本，例如＆＃34;标签＆＃34;和＃34;语言＆＃34;。

只是将一些文字放在屏幕上：

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

您的aria-label解决方案可能依赖于HTML，但屏幕阅读器只会在表格控件或实际标签时读取它 - 它不会被读出{{1 }或<div>

Answer 2

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

<h#>Tags</h#>

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

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

对于播放按钮，这也取决于。如果播放按钮显然是页面上的唯一内容，那么您可能不需要它。如果播放按钮是其中之一，但与事物的标题分组，则可能不需要它。如果只有播放按钮且没有好的分组，或者播放按钮改变了上下文，那么你可能需要标签。

这里的关键是首先依靠良好的内容和HTML结构。然后考虑页面的详细程度（详细页面是屏幕阅读器用户的麻烦）。那么，只有当您无法在标准HTML或页面结构中找到好方法时，才能考虑使用ARIA。