I am a screen reader user, and I am annoyed! I repeatedly encounter the same problem on websites. It’s about text splitting up. Let me share my agony with you!
The solution: role=”text”
We had a similar problem on our site with headings, but the solution I used will work for links as well. Let’s look at it.
Here I’ve got an h1-element that looks like this in the code:
<h1>Digital accessibility, <br> for everyone.</h1>
As you can see in the video below, the br-tag causes the screen reader to interpret the title as two separate objects, just like the span did in the previous example. I want it to read the whole heading to me at once.
So to force a screen reader to interpret the heading as one object, I wrapped the text inside the heading in a span and added role=”text”.
<h1> <span role="text">Digital accessibility, <br> for everyone. </span> </h1>
And voilá, here is the result:
Beware! Don’t put role=”text” in the heading-element. This would erase the h1-semantics, so it would not appear as a heading in a screen reader. Every element inside the role=”text” will lose it’s semantics. So you need to add a span within the element and put role=”text” in that span.
Curated by (Lifekludger)
Read full article at Source: Text Splitting Causes Screen Reader Problems – Axess Lab