我如何向屏幕阅读器指示一系列单词中的哪一个是 active/selected？

Question

在网页上，我有一些文字表明某事的难度级别。其中有简单、中等、困难的选择。

显示如下：

指示的难度级别是三者中的"Difficult"。这将在视觉上设置样式，但我担心屏幕阅读器只会阅读 "Level of Difficulty: Easy, Moderate, Difficult," 这对任何人都没有意义。

现在 HTML 很简单，例如：

<div ...>
    <div class="some-field its-inline-too">
        <div class="field-label">Level of Difficulty</div>
        <div class="field-value">
            <span class="difficulty">Easy</span>
            <span class="difficulty">Moderate</span>
            <span class="difficulty active">Difficult</span>
        </div>
    </div>
</div>

我可以使用什么样的 HTML 标签 and/or 样式，这将保持当前的视觉样式，但也会添加一些东西来指示屏幕阅读器发现三个选项中只有一个是实际一个？

Answer 1

使用visually hidden text

HTML

<div ...>
    <div class="some-field its-inline-too">
        <div class="field-label">Level of Difficulty</div>
        <div class="field-value">
            <span class="difficulty">Easy</span>
            <span class="difficulty">Moderate</span>
            <span class="difficulty active">Difficult<span class="visually-hidden"> selected</span></span>
        </div>
    </div>
</div>

CSS

.visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

这会让屏幕 reader 将内容解释为：

level of difficulty
easy moderate difficult selected

我还建议为您的标签使用标题标签或其他类型的标签，并在其中列出困难列表，例如：

<div ...>
    <div class="some-field its-inline-too">
        <h3 class="field-label">Level of Difficulty</h3>
        <ul class="field-value">
            <li class="difficulty">Easy</li>
            <li class="difficulty">Moderate</li>
            <li class="difficulty active">Difficult<span class="visually-hidden"> selected</span></li>
        </ul>
    </div>
</div>

使用语义 HTML 将帮助屏幕 reader 用户更好地理解上下文。

Answer 2

您可以在元素上使用 aria-current="true" 属性。

The aria-current attribute is used when an element within a set of related elements is visually styled to indicate it is the current item in the set.

<div ...>
    <div class="some-field its-inline-too">
        <div class="field-label">Level of Difficulty</div>
        <div class="field-value">
            <span class="difficulty">Easy</span>
            <span class="difficulty">Moderate</span>
            <span class="difficulty" aria-current="true">Difficult</span>
        </div>
    </div>
</div>

See screenreader support

不应与 aria-selected 混淆，后者应用于交互式（可激活）元素。

Answer 3

如果它不是交互式的，我会选择制作 inactive/irrelevant 个元素 aria-hidden。

使用 aria-current=true、aria-selected 或让屏幕说 "selected" 之类的词 reader 以任何方式都可以给人一种元素是交互的印象. 屏幕 reader 用户会认为他可以通过某种方式更改选择，一段时间后注意到实际上他不能，也不会理解，最后可能会认为该站点无法正常工作或无法访问。

让所有单词按顺序显示所有可能的级别可能不会提供太多信息，因此如果只显示当前活动的级别也无妨。如果表示不同级别的不同词不够清楚，最好选择其他词或在另一页中解释什么是级别及其对应的内容，或者用数字代替，例如1/3=简单，2/3=中等，3/3=困难。

当然，如果元素是交互式的，则反过来：永远不要使用 aria-hidden。根据交互元素的类型使用aria-current、aria-selected等，或者百万倍，使用真实的表单元素、按钮、链接等，而不是div/span+ARIA emulated一个。

我如何向屏幕阅读器指示一系列单词中的哪一个是 active/selected？

How can I indicate to screen readers which of a series of words is the active/selected one?

html

css

accessibility

screen-readers