在一个span标签上使用aria-label

Question

我正在使用Unicode星号符号显示产品评级。iOS VoiceOver不能正确朗读，因此我想在我的上使用aria-label告诉屏幕阅读器它的含义。

<span aria-label="4.0 stars out of 5, 123 ratings">★★★★☆ 4.0 (123)</span>

无法正常工作。iOS VoiceOver完全忽略我的aria-label。我做错了什么？我该如何修复？

- Dan Fabulich

Answer 1

aria-label有时会被一些辅助技术忽略，如果您放置在上面的元素没有任何语义意义。<span>没有语义意义。如果您添加了适合于星级的role，那么它应该可以正确读取。

- slugolicious

---

此外，ARIA标准明确规定禁止命名“通用”角色。 - Andy

Answer 2

引用自mdn web doc的aria-label文章：

并非所有元素都可以被赋予可访问名称。不应将aria-label或aria-labelledby用于非交互式元素或内联结构角色，例如代码、术语或强调，也不应用于其语义将不会映射到无障碍API的角色，包括presentation、none和hidden。 aria-label属性仅用于交互式元素。

因此，<span>元素上的aria-label没有效果：<span>是一个没有语义的非交互式元素。

但是这里有一个解决办法：提供两个<span>，每个<span>表达相同的信息，但针对不同的“目标群体”：

• 一个<span>是视觉无屏幕阅读器版本；属性aria-hidden =“true”将确保它不是可访问性树的一部分，因此不会被屏幕阅读器传达给其用户。
• 一个<span>是可访问的屏幕阅读器版本：CSS样式负责视觉上隐藏它。

重用Bootstrap 5的.visually-hiddenCSS类，您的示例可以这样重写：

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

<span aria-hidden="true">★★★★☆ 4.0 (123)</span>
<span class="visually-hidden">4.0 stars out of 5, 123 ratings</span>

• 从外观上看，这只会呈现“4个黑色Unicode星，1个白色Unicode星，4.0和括号中的123”。
• 对于屏幕阅读器，这只会呈现“5颗星中的4颗，共123个评分”。

- Abdull

---

我认为这里的问题在于搜索引擎可能会索引两个span，而不检查其中一个是否被隐藏。我知道有时他们会检查隐藏的内容，但我认为这不是常态。 - Joel M

Answer 3

一种方法是添加role=img

<span aria-label="4.0 stars out of 5, 123 ratings" role="img">★★★★☆ 4.0 (123)</span>

- Steve Faulkner

---

role="img" 可能看起来不太恰当，但其他如“note”之类的角色无法使用，所以我将使用它。 - xtian

语音提示会读成“……图像”，因此不准确。 - Przemek Marcinkiewicz