GSAP splitText wraps characters in divs instead of span?

[nightlock82 1 Likes (Newbie)]

I'm doing a splitText specifically on separate characters on react. The issue is splitText uses divs to separate the characters instead of spans, this becomes a problem for screen-readers. I've tried applying the effect on the container and inline text but the output is still the same. Is there a way to make it into spans? 

 

[Rodrigo 4,827 Likes (Superhero)]

Hi @nightlock82 and welcome to the GreenSock forums!

 

Your can specify the tag in the SplitText config object

 

tag: 

String - by default, SplitText wraps things in <div> elements, but you can define any tag like tag: "span"

 

Happy Tweening!

[GreenSock 17,888 Likes (Superhero)]

Just so you know, the reason SplitText wraps things in <div> instead of <span> by default is because most browsers will not render transforms on elements that have display: inline (which is what spans do). So just be careful about that - if you try animating x/y/rotation/scale, for example, and it’s not working with <span>, that’s why.  

[nightlock82 1 Likes (Newbie)]

@Rodrigo Thank you for that saved me a lot of time.

[nightlock82 1 Likes (Newbie)]

@GreenSock I noticed this happening. Are there any possible workarounds I saw some samples from websites on awwwards for example but I couldn't understand how they were doing this. My main concern with <div>'s is the accessibility, a screen reader would read it on a per-letter basis and that's a real head-scratcher.

[Rodrigo 4,827 Likes (Superhero)]

Hi,

 

I'm not an a11y expert at all, but you could check if the user is on a screen reader and revert the SplitText instance or perhaps never create it? I would try that. Maybe I'm wrong in my consideration, but a text being animated letter by letter is not something super useful on a screen reader, right?

 

Again I know virtually nothing about a11y so I'm just proposing an idea based on zero knowledge and just what I consider kind of useful on the particular scenario of a screen reader.

 

Hopefully this helps.

Happy Tweening!

[GreenSock 17,888 Likes (Superhero)]

I guess you could try setting display: inline-block on the <span> to make them work with transforms. I’m half-conscious in bed with COVID on my iPad, so I can’t verify at the moment, but you could give it a shot.

[Cassie 4,867 Likes (Superhero)]

Quote

My main concern with <div>'s is the accessibility, a screen reader would read it on a per-letter basis and that's a real head-scratcher.

Nah there's tons of ways round this!

 

One route is doubling up content. You visually hide one  so sighted people don't see it, but screenreaders read it out still, then whack aria-hidden on the one that's being split.

 

https://www.a11yproject.com/posts/how-to-hide-content/#:~:text=visually-hidden class is applied,focus indicator had gone to.

<h2 class="visually-hidden">This is a sentence</h2>
<h2 class="split" aria-hidden="true">This is a sentence</h2>

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

 

Another option is using aria hidden on the header and an aria label and role on a containing div

<div role="heading" aria-level="2" aria-label="word">
  <h2 class="title" aria-hidden="true">
    <div>w</div>
    <div>o</div>
    <div>r</div>
    <div>d</div>
  </h2>
</div>

Another one would be to loop round the children that splittext creates and whack aria-hidden on them and an aria label on the text element.

 

I raised this casually with Jack the other day about seeing if we can bake an option in so it's a little easier for people.

 

Either way though, plenty of ways around this!

[Cassie 4,867 Likes (Superhero)]

Here's a demo of the best (but more fiddly) way.

Ideally you'd have an aria label on the text element itself rather than assigning aria attributes to a non semantic element like a div.

So something like this.

I would go for this route with headings, but I'd likely duplicate text for long sections of text like paragraphs.

See the Pen NWMYMQr?editors=1010 by GreenSock (@GreenSock) on CodePen

   

Another route I've gone in the past is adding aria-hidden on split text elements, then calling revert on them once they've animated in and removing the aria-hidden. Like so...

See the Pen poZaJQa?editors=1010 by GreenSock (@GreenSock) on CodePen

Obviously all these routes are worth testing with folks that actually use screenreaders if you have the capacity to do so.

[nightlock82 1 Likes (Newbie)]

Oh, I haven't been on for a bit, thank you folks for the responses. ❤️ Gonna try it out and see this is awesome.