How to get screen reader from reading inline span elements separately?

Question

I have the following paragraph:

<p>Random text that has <span class="font--bold">some bold text</span> and continues on...</p>

I am using the ChromeVox extension to ensure my site is accessible. By the nature of the font type used, I need to use a separate <span class="font--bold"> element to have that text be bold.

My problem is when I navigate to this paragraph using Chromevox, it will focus on and read the text before the <span>, then the text inside the <span>, and then the rest of the paragraph.

Outcome:

• I navigate onto the <p> element.
• Chromevox focuses and reads: "Random text that has".
• I navigate to the next item.
• Chromevox focuses and reads: "some bold text".
• I navigate to the next item.
• Chromevox focuses and reads the remaining text in the <p>.

Desired outcome:

• Navigate onto paragraph element.
• Chromevox focuses entire paragraph, and reads it outloud.

---

There is no issue when this format is used inside header tags (e.g. <h2><span class="font--bold">My</span> title</h2>. Chromevox reads this out as one section.

I've tried adding in role="text" and tabindex="-1" into the <span> element, but that didn't work. Any help would be deeply appreciated. Thank you.

Margoriemargot

Hmm, interesting one. Have you tried role="presentation"? – Forgiving

Sadly, that didn't work. – Margoriemargot

If it's not respecting that or role="none" either than it may be time to heed their disclaimer in their own description for more comprehensive standards compliance; - "For more comprehensive solutions, we recommend the use of full system screen readers like ChromeVox on Chrome OS, VoiceOver on Mac, JAWS, NVDA or Narrator on Windows, etc." – Forgiving

Seems to be a ChromeVox bug, my preferred screen reader (JAWS for Windows) would read it normally. And please, don't overuse the presentation role! – Comminate

Answer 1

role="text" tag

Sometimes the simplest answers are the best, you are looking for role="text"

<p>Random text that has <span class="font--bold" role="text">some bold text</span> and continues on...</p>

Side Note

role="text" will remove all semantic meaning from an element so make sure it is used carefully (i.e. don't use on a h1 tag as it will then change it to behave like any other element)

Contradance