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.

CodePudding user response：

No there is not any convention about this.

By default, an HTML element will use its text content as the accessibility label. If an element has aria-label, the accessible name becomes the string that it's passed in the attribute.

Your code works with the chrome screen reader extension. please take a look at this link for more information.

There is also a chrome extension that helps you with missing ARIA labels, misused ARIA roles, and an incomplete keyboard called ARIA DevTools. here is the link

CodePudding user response：

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.