我正在使用Unicode星号符号显示产品评级。iOS VoiceOver不能正确朗读,因此我想在我的上使用aria-label
告诉屏幕阅读器它的含义。
<span aria-label="4.0 stars out of 5, 123 ratings">★★★★☆ 4.0 (123)</span>
无法正常工作。iOS VoiceOver完全忽略我的aria-label
。我做错了什么?我该如何修复?
aria-label
有时会被一些辅助技术忽略,如果您放置在上面的元素没有任何语义意义。<span>没有语义意义。如果您添加了适合于星级的role
,那么它应该可以正确读取。
aria-label
文章:
因此,并非所有元素都可以被赋予可访问名称。不应将
aria-label
或aria-labelledby
用于非交互式元素或内联结构角色,例如代码、术语或强调,也不应用于其语义将不会映射到无障碍API的角色,包括presentation、none和hidden。aria-label
属性仅用于交互式元素。
<span>
元素上的aria-label
没有效果:<span>
是一个没有语义的非交互式元素。<span>
,每个<span>
表达相同的信息,但针对不同的“目标群体”:
<span>
是视觉无屏幕阅读器版本;属性aria-hidden =“true”
将确保它不是可访问性树的一部分,因此不会被屏幕阅读器传达给其用户。<span>
是可访问的屏幕阅读器版本:CSS样式负责视觉上隐藏它。.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>
一种方法是添加role=img
<span aria-label="4.0 stars out of 5, 123 ratings" role="img">★★★★☆ 4.0 (123)</span>