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

user_7933157 0
Viewed 1180

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.

screen-readers accessibility html
1 Answers

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)

user_27028940
Related