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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: