html - 我如何向屏幕阅读器指示一系列单词中的哪一个是事件/选定的？

Question

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

显示如下:

指示的难度级别是三者中的“困难”。这将采用视觉样式，但我担心屏幕阅读器只会阅读“难度级别:简单、中等、困难”，这对任何人都没有意义。

现在 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 标签和/或样式，既可以保持当前的视觉样式，又可以添加一些东西来向屏幕阅读器表明只有一个选择是 < em>实际 三个中的一个？

Answer 1

您可以在元素上使用 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 混淆。