Text Splitting Causes Screen Reader Problems – Axess Lab

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