在跨度上使用 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

。

我做错了什么？我该如何解决这个问题？

Answer 1

如果您放置的元素没有任何语义，则某些辅助技术有时会忽略

aria-label

。 A 没有语义意义。如果您添加适合您的星星的

role

，那么应该可以正确读取。

Answer 2

引用mdn web doc的

aria-label

文章：

并非所有元素都可以被赋予可访问的名称。 aria-label 和 aria-labelledby 都不应与非交互式元素或内联结构角色（例如代码、术语或强调）一起使用，也不应与语义不会映射到辅助功能 API 的角色一起使用，包括presentation、none 和hidden。 aria-label 属性仅适用于交互元素。

这就是为什么

aria-label

对

<span>

元素没有影响：

<span>

是一个没有语义的非交互式元素。

但是您可以这样做：提供两个

<span>

，每个表达相同的信息，但针对不同的“目标群体”：

• One

  <span>

  是视觉无屏幕阅读器版本；属性

  aria-hidden="true"

  将确保它不会成为 辅助功能树 的一部分，因此屏幕阅读器不会将其传达给用户。
• 其中一个

  <span>

  是可访问的屏幕阅读器版本：CSS样式负责视觉上隐藏它。

重用Bootstrap 5的

.visually-hidden

CSS类，你的示例可以像这样重写：

.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”。
• 对于屏幕阅读器，这将仅呈现“4.0颗星（满分5分，123个评分）”。

Answer 3

一种方法是添加

role=img

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

Answer 4

关于在跨度中使用角色以便能够通过 VoiceOver 宣布 aria-label，我会使用 role=meter 检查Developer Mozzila

中的选项

就您而言： 星级范围从 0 到 5。 使用 role=meter 将使 aria-label 能够由 AT 公布。 并且您可以获得“aria-valuetext”来帮助公告实施

<span 
  role="meter" 
  aria-valuemin="0" 
  aria-valuemax="5" 
  aria-valuenow="4" 
  aria-valuetext="4 stars our of 5" 
  aria-label="on total 123 ratings">
    ★★★★☆ 4.0 (123)
</span>

这是在不使用 aria-valuetext 属性的情况下显示的旁白字幕

这里使用 aria-valuetext 属性