What happens with aria-labelledby, aria-label and aria-describedby on static HTML elements? Woe-ARIA: The Surprisingly but Ridiculously Complicated World of aria-label/ledby However, as QuentinC pointed out in the comments, the CSS content property isn't currently supported by all browser/screen reader combinations.Ĭlarify use of aria-label on elements with no role #756 I tested his suggestion with JAWS and NVDA and it announced the 'This text is hidden' text as well as the inner text of the. Here is the example suggested by WebAIM: Īnother option is to use the CSS content property to hide the text that you want spoken by the screen reader, as suggested by slugolicious in a similar question on SO: ĭiv::before

This is fully supported by all browser/screen reader combinations. The fail-safe option would be to use text that is visibly hidden by CSS. It seems that NVDA 2018 did support using aria-label on static elements, but it was later removed because there's yet to be consensus on the aria-label debate. Other screen readers like JAWS will read both the aria-label text and the inner text of the if you add a role like role='navigation' to your static element. Some screen readers (like TalkBack) will ignore the inner text of your if you use aria-label, because it interprets the aria-label as the label for that element and ignores any other text within the element. So, the behaviour you're getting from VoiceOver is not necessarily standard behaviour.

Screen readers are all over the map with respect to interpretting aria-label on non-interactive elements.Īccording to David MacDonald's tests, VoiceOver and TalkBack will read the aria-label text on static elements, but JAWS and NVDA will not unless the static content (like a ) has the role='navigation', role='search', role='main', or role='img'.īy design, aria-label is meant to override the existing text of an element because it is what most screen readers will interpret as the element's label.

Mac accessibility screen reader