Search code examples
htmlaccessibilityelement

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

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.

Solution

  • 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