feat(badge): a badge with some meaningful information should not have the aria-hidden=true attribute

[GregoireLgt]

Feature Description

For accessibility purposes,

When you have a badge which communicates some meaningful information such as a number or something else, it should not have the aria-hidden=true attribute

So is it possible to create in the API a new "matBadgeAriaHidden" directive to set it manually according to the relevance of the badge content?

Use Case

No response

[zarend]

Hello @GregoireLgt,

The badge has an matBadgeDescription Input, which provides an aria-description. Does that work for your use case?

-Zach

[GregoireLgt]

Hi @zarend,

I think this should do the trick.

However it's still weird that the aria-hidden attribute is set at true and can't be changed as you can see below (from the first example at https://v14.material.angular.io/components/badge/overview)

Corresponding badge code with aria-hidden true :

That makes the content of the badge unreadable by assistive technologies since aria-hidden is true.

As stated on MDN :
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden

So the solution is using an aria-describedby attribute to describe the content of the badge via the matBadgeDescription input if i am correct?

In the example, the badge is communicating meaningful info (a number which could be anything depending on the context of your app), so i was wondering if just setting aria-hidden to false is more clean maybe in terms of accessibility?

Regards

[GregoireLgt]

@zarend i tried the matBadgeDescription input but i was not able to make my assistive technology read the matBadgeDescription. I also tried adding another element with the sr-only class in order to describe what's inside the badge but it was the same. That would be really helpful to change the aria-hidden attribute.

Regards

[zarend]

Hello @GregoireLgt ,

Thank you for following up with this. Which assistive technology are you using?

-Zach

[GregoireLgt]

@zarend i use NVDA : https://www.nvaccess.org/download/

Regards,
-Gregoire

[epstarr]

Commenting here after finding this thread through Google. Our company's application was flagged for this same error while using a matBadge during an accessibility audit. Our implementation is to show the user how many errors exist on a form. Seeing how this would be deemed important information for the user to gather through a screenreader, we'd have to drop our usage of the badge until this (hopefully) gets addressed

[zarend]

Hello folks,

The matBadgeDescription is working better right now on interactive elements rather than static content. I believe the intention is that the matBadgeDescription is supposed to be read for both static and interactive elements, and developers shouldn't need to change the aria-hidden.

Here's a few work-arounds to try:

• Change the element that hosts the matBadgeDescription to a <button/> or some other interactive element
• Add content inside the badge with cdk-visually-hidden class to announce description

  <span matBadge="4" matBadgeOverlap="false" class="demo-section">
   Text with a badge
   <span class="cdk-visually-hidden">4 notifications</span>
 </span>

Hope that helps in the meantime before this gets addressed.

-Zach

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}