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”: