htmlaccessibilitywai-ariawcagwcag2.0

Do HTML elements like pill/badge need extra Aria-role?

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.

enter image description here

Solution

  • 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.