为屏幕设置难度图标 reader

Question

我有一个难度等级显示为以下变体的在线课程：

<div class="course-difficulty">
    <label>Difficulty: </label>
    <span class="fas fa-star"></span>
    <span class="fas fa-star"></span>
</div>

为屏幕阅读器添加标签的最佳做法是什么？我可以计算星级，因此标签在逻辑上可以应用于父级 div，例如“难度 2”，或者这应该用于 individual 图标？

Answer 1

有几件事，首先在这里使用 <label> 不太管用。 <label>s 旨在链接到交互式元素（输入）。

如果这是 仅显示（即您不能对难度进行投票）那么答案很简单：

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<!-- option 1 invisible text (screen reader only text) -->
<div class="course-difficulty">
    <p>Difficulty: </p>
    <div aria-hidden="true">
        <span class="fas fa-star"></span>
        <span class="fas fa-star"></span>
    </div>
    <span class="visually-hidden">2 out of 5</span>
</div>

<!-- option 2 aria-label -->
<div class="course-difficulty">
    <p aria-label="Difficulty: 2 out of 5">Difficulty: </p>
    <div aria-hidden="true">
        <span class="fas fa-star"></span>
        <span class="fas fa-star"></span>
    </div>
</div>

这里有两种变体。

在这两个选项中，我们将星星包裹在 aria-hidden div 中，以便在屏幕 reader 中隐藏它们（因为某些屏幕 reader 可能会尝试读取图标）。我们还更改了段落的标签，因为它更有意义。

在第一个选项中，我们使用在视觉上隐藏文本，但使其在屏幕上可用 readers，解释难度（以及有多少“星”）。

在第二个选项中，我们使用 aria-label 覆盖文本以包含难度等级。

我个人更喜欢选项 1，因为它与屏幕 reader / 浏览器组合的兼容性最好，并且适用于纯文本浏览器（某些盲文用户更喜欢使用）。

但是使用 aria-label 没有任何问题，因为它现在可以在 99% 的屏幕上运行 reader / 浏览器组合并且边缘情况很少。

如果系统确实允许投票，那么您将需要使用单选按钮等。如果是这种情况，请告诉我，我可以帮助您。

为屏幕设置难度图标 reader

Setting up difficulty icons for a screen reader

html

accessibility