How do I prevent the screen reader from saying "group" when reading this div tag's text?

Question

On my web page, I have a div (shown below), which has text in it that I want to be read by a screen reader.

HTML

<div tabIndex={0}>
    "text needs to be read"
</div>

I can hear the text is read without even providing the aria-label. However, I heard "text needs to be read group". I would like to know how can I avoid it saying "group"? I did not put a group role for the div tag.

Another example

This is another example that describes the problem much cleaner

<span class="jw-icon jw-icon-inline jw-button-color jw-reset jw-text-live" tabindex="-1" data-clicked="true">Live</span>

Run the above snippet in any browser. It makes the screen readers to announce it as "Live, group". Is there any way to mitigate this behaviour. Expected behaviour should be like the screen readers should read it as "Live"

Answer 1

Lots of things going on here.

First of all, all text on a webpage is available to a screen reader and does not need tabindex="0" to make it available to be read. Screen readers provide lots of shortcut keys to navigate to different types of elements (headings, tables, lists, etc). For elements that don't have a direct navigation key, the screen reader user can use the up/down arrow keys to walk the accessibility tree (similar to the DOM).

Secondly, regarding tabindex="0", it should only be set on interactive elements. The tabindex spec says:

authors should only make elements focusable if they act as interactive controls or widgets. In addition, authors should ensure that these focusable elements have an appropriate ARIA role attribute.

And regarding ARIA roles in the second sentence in the spec quote, if your element does receive focus, if it's not a natively focusable element (such as a <a> or <button> or <input>), then it needs to have an appropriate role so that the screen reader user will know how to interact with it.

And related to this, you mentioned aria-label. The aria-label is only honored on elements that have an appropriate role. See "2.10 Practical Support: aria-label, aria-labelledby and aria-describedby".

So given all that, it's a little difficult to answer your question because your simple example is not specific enough. A <div> without a role should not read as "group". Group is usually role="region" (or <section>). The behavior you're hearing may depend on what browser you're using, what screen reader, how you're navigating in with the screen reader (tab or arrow or quicknav key).