我正在尝试为我的网页添加可访问性，但是不确定如何处理这个标记元素。它类似于您在线购物车图标上看到的数字圆圈。（请参见下面的示例图像）
我无法确定应该为其分配什么类型的aria role，或者是否需要特别为其分配一个aria role。我很确定它不是“role=button”，因为这里没有单击事件。
2个回答
16
我处理这种情况是通过添加一个 aria-label 属性，其中包含数值的更详细说明。至于 role，我会选择 status。W3 网站上的示例实际上以购物车为例。
<span role="status" aria-label="14 items in your shopping cart">14</span>
我喜欢区分status和alert角色之间的差别。
状态（status）角色是一种活动区域（live region），是一个容器，其内容是为用户提供咨询信息的，如果信息不重要到足以正当化警报（alert），则使用此角色。
更多信息请参见MDN网页文档：状态（status）角色。
- Andy Hoffman
1
1
是否应该添加role='status'取决于具体情况。W3网站上的示例是一个徽章，由于用户互动（将物品添加到购物车），会进行动态更新。如果徽章包含静态内容，则不需要使用角色。因此，您添加角色是因为徽章包含了状态，而不仅仅是因为它是一个徽章。
设置role='status'与手动添加aria-live和aria-atomic到元素完全相同（参考https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22），因此同时使用两者并没有意义。但如果您想要表示状态，我建议使用状态角色，因为这在查看页面源代码时更加自解释。
- Geronimos
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
aria-atomic和aria-live，并将值分别设置为true和polite。这只是需要考虑的另一件事情。要了解有关aria-live的更多信息，请参阅：其他现场区域属性。 - Rick Stanley