Search code examples
htmljaws-screen-reader

accessibility test fails: Elements must have their visible text as part of their accessible name

I have a button that has visible text 'Make default', like the following button

< button type="button" aria-label="Click to make this your default card"> Make Default </button>

I want to give accessible name 'Click to make this your default card' using aria-label (to give context for button) Jaws screen reader reading it perfectly. but accessibility test rule (https://www.w3.org/WAI/WCAG21/Techniques/general/G208) fails with following error:

"Serious: Elements must have their visible text as part of their accessible name"

Since accessible name (aria-label) does not containing display name ('Make default') so causing the issue.

But I can not change accessible text to include display text (I have to use accessible text: 'Click to make this your default card', because requirement are like that)

So, is there any way to fix this issue. so that I can have specified accessible text and display name without having above accessibility issue.

I hope, I have explained the problem clearly.

Thanks a lot.

Solution

  • The WCAG standards have these rules in place for a reason. But a workaround is possible using aria-labelledby. Insert your helper text in a hidden label and give the id of that label to aria-labelledby. Like so:

    <button type="button" aria-labelledby="button_message"> Make Default </button>
<label id="button_message" class="hiddenlabel">Click to make this your default card</label>

    Label could be hidden by

    .hiddenlabel {
  display: none;
}

    Note: Visible text should match or be contained in the aria-label. You can maybe modify visible text if this comes up again