Is there a rule or setting when Narrator ignore aria-label on element while aria-label's value same as element 's content?

Question

When I set aria-label's value same as button's content, the screen-reader cannot readout aria-label.

<button aria-label="Close"><span>Close</span></button>

But when I change aria-label's value different from button's content, the screen-reader readout the aria-label.

<button aria-label="Close X"><span>Close</span></button>

Is there a rule or setting when Narrator ignore aria-label on element while aria-label's value same as element 's content?

Thanks for your help.

Answer 1

You are talking about the accessible name. An element can only have one accessible name and it's announced by the screen reader when you navigate to that element, along with it's role and value or state, as per WCAG 4.1.2. (It can also have an accessible description.)

The accessible name is calculated using a precedence order defined in "Accessible Name and Description Computation 1.1". It's essentially a big "if then else" statement and when one of the conditions are true, the rest are ignored. The order of precedence (which is a little oversimplified here but you can see the details in the aforementioned link), is:

1. aria-labelledby
2. aria-label
3. <label> element
4. from content
5. from tooltip

In your example, you have two sources of the accessible name, #2 and #4. The aria-label (#2, "Close X") will be found first so the content (#4, "Close") will be ignored.