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

Question

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

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

标签： htmlaccessibilitywai-ariawcagwcag2.0

Answer 1

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

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

我喜欢区分角色status和alert角色。

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

更多关于这里。