Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@sapegin

sapegin/til.md

Created June 25, 2020 16:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sapegin/3e881a76b2d73ae1abf9ff91e1121340 to your computer and use it in GitHub Desktop.
Save sapegin/3e881a76b2d73ae1abf9ff91e1121340 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
til.md

aria-label doesn’t always replaces element’s own text

<span aria-label="pizza"> • </span>

I was sure that a screen reader would just read “pizza” but at least VoiceOver in Chrome reads “pizza, group, bullet”.

Where the “group” comes from? VoiceOver (I don’t know about other screen readers) considers a “group” any piece of text wrapped in an HTML tag, even a span that has no semantic meaning and should be ignored.

Reading of the element’s own text isn’t that clear. The example from MDN with a button works fine — a screen reader reads “close”:

<button aria-label="Close" onclick="myDialog.close()">X</button>

Same with a link, a screen reader reads “dog”:

<a href="/" aria-label="dog">cat</a>

However, for all non-interactive elements a screen reader reads “dog, group, cat”:

<a href="/" aria-label="dog">cat</a>

The WAI-ARIA spec doesn’t say what should happen if there’s any text inside the element.

How to stop VoiceOver saying the word “group” – Chris Worfolk’s Blog Using the aria-label attribute - Accessibility | MDN Accessible Rich Internet Applications (WAI-ARIA) 1.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment