如何向屏幕阅读器指示一系列单词中哪个是活动/选定的？

Question

如何向屏幕阅读器指示一系列单词中哪个是活动/选定的？

htmlcssaccessibilityscreen-readers

3

在网页上，我有一段文字表示某件事的难度级别。选项包括简单、中等和困难。

它的显示方式如下：

所示难度级别为三个中的“困难”。这将以视觉方式进行样式设置，但我担心屏幕阅读器只会读取“难度级别：容易，中等，困难”，这对任何人都没有意义。

现在的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标签和/或样式来保留当前的视觉样式，同时又添加一些内容，以指示屏幕阅读器只有三个选择中的一个是实际的选择？

- TerranRich

3个回答

1

如果它不具有交互性，我会将无效/不相关的元素设置为aria-hidden。使用aria-current=true、aria-selected或使屏幕阅读器通过任何方式朗读“selected”这样的单词可以给人一种元素是交互式的印象。屏幕阅读器用户会认为他可以以某种方式改变选择，过一段时间后会注意到实际上他不能这样做，无法理解，最终可能会认为该站点无法工作或无法访问。所有单词按顺序显示所有可能的级别可能并没有提供太多信息，因此仅显示当前活动的单词不会造成伤害。如果表示不同级别的不同单词不够清晰，最好选择其他单词或在另一页中解释级别及其对应关系，或者用数字替换，例如1/3=简单，2/3=中等，3/3=困难。

当然，如果元素是交互式的，就要反过来：绝对不要使用aria-hidden。根据交互元素的类型使用aria-current、aria-selected等，或者更好的方法是使用真正的表单元素、按钮、链接等，而不是div/span+ARIA模拟的元素。

- QuentinC

0

使用视觉隐藏文本

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);
}

这将使屏幕阅读器将内容解释为：

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将有助于屏幕阅读器用户更好地理解上下文。

- Godwin

哦，这不是交互式的。纯粹是为了设置特定文章（在Drupal中）的难度级别而指示性的。 - TerranRich

难道你不认为对于一个盲人用户来说，听到“简单中等困难已选择”这样的话语会很困惑吗？我是否可以做更多的事情呢？ - TerranRich

1

这可能会让人感到困惑，但您可以使用可视隐藏和aria-hidden来实现您认为最好的任何体验。您可以将aria-hidden添加到未选中的选项中，并添加文本以指示还有更多选项可用。例如，您可以通过在列表后添加可视隐藏文本使文本读取“难易程度困难、容易和适度也可用”。 - Godwin

我刚刚也发现了 aria-hidden，我可以使用它来隐藏非活动字段的值。 - TerranRich

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam · Accepted Answer

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

aria-current属性用于在一组相关元素中，视觉上对其中一个元素进行样式修饰，以指示它是该组中的当前项。

<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>

查看屏幕阅读器支持

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