I'm trying to add accessibility to my web page and I'm not sure how to deal with this badge element. It's something like the number circle you see on your online shopping cart icon. (See example image below)
I couldn't decide what kind of aria role should I assign to it. Or do I even need to assign an aria role for it particularly? Pretty sure it's not "role=button" since there's no click event here.
I handle this sort of case by adding an aria-label which contains a more descriptive explanation of the numeric value. As for the role, I'd go with status. The example on the W3's site actually uses a shopping cart as an example.
<span role="status" aria-label="14 items in your shopping cart">14</span>
I like the distinction drawn between the status and the alert roles.
The status role is a type of live region and a container whose content is advisory information for the user that is not important enough to justify an alert.
More on that on the MDN web docs for ARIA: status role.
Whether you should add role='status' depends on the scenario. The example on the W3's website is an example of a badge that get's a dynamic update because of user interaction (adding an item to the cart). If it is a badge that contains static content then the role is not required. So you add the role because your badge contains a status, not because it is a badge.
Setting role='status' is exactly the same as manually adding aria-live and aria-atomic to the element (https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22), so it's not useful to do both. But if you intend to represent a status I would recommend using the status role, because that's more self explaining when looking a the page source.
