问题描述
我正在尝试为我的网页添加可访问性，但我不确定如何处理此徽章元素。它类似于您在在线购物车图标上看到的数字圆圈。 （见下图示例）
我无法决定应该为其分配什么样的aria 角色。或者我什至需要特别为它分配一个咏叹调角色？很确定它不是“role=button”，因为这里没有点击事件。
解决方法
我通过添加一个 aria-label 来处理这种情况，其中包含对数值的更具描述性的解释。至于role，我会选择status。 W3 网站上的 The example 实际上以购物车为例。
<span role="status" aria-label="14 items in your shopping cart">14</span>
我喜欢 status 和 alert 角色之间的区别。
status 角色是一种实时区域和容器，其内容是为用户提供的建议信息，其重要性不足以证明警报的合理性。
关于 here 的更多信息。