像药丸/徽章这样的 HTML 元素是否需要额外的 Aria 角色？

Question

我正在尝试为我的网页添加可访问性，但我不确定如何处理此徽章元素。它类似于您在在线购物车图标上看到的数字圆圈。（参见下面的示例图片）

我无法决定应该给它分配什么样的咏叹调角色。或者我是否需要特别为其指定一个咏叹调角色？很确定它不是“role=button”，因为这里没有点击事件。

Answer 1

aria-label我通过添加一个包含对数值更具描述性的解释来处理这种情况。至于role，我会选择status。W3网站上的例子实际上是以购物车为例。

<span role="status" aria-label="14 items in your shopping cart">14</span>

status我喜欢角色和角色之间的区别alert。

状态角色是一种活动区域和容器，其内容是针对用户的咨询信息，其重要性不足以证明警报的合理性。

更多关于ARIA 的 MDN Web 文档：状态角色。