textPlugin & accessibility

[frank_47340]

I tried textPlugin with screenreader (NVDA). It is in a aria-live region. Is not working well because the screenreader starts reading the begin of the sentence multiple times. Each time half the way of a sentence it begins again at the beginning. This is not very user-friendly. I think it is a good idea to warn the users of gsap in the docs?

[OSUblake]

Have you tried using aria-label or aria-hidden?

[frank_47340]

1 hour ago, OSUblake said:

Have you tried using aria-label or aria-hidden?

Thanx for the tip.... How do I combine aria-live with aria-label or aria-hidden? My goal is to inform that the content is changed....

[OSUblake]

Hm... I don't know if aria-live will work with labels. I think live will only read contents.

 

Maybe someone else has come across this situation and can chime in.

[frank_47340]

I think a workaround could be to dynamically add and remove aria-live. Something like

document.getElementById("text").setAttribute("role", "alert");
and
document.getElementById("text").removeAttribute("role", "alert");
together with onComplete

But I doubt if this is a good practice. My point is that it would be very nice when there is a warning in the docs of textPlugin. For now I choose an other type of animation.

 

[Cassie]

I'll do some tests and update the docs.

 

I wouldn't recommend using aria live though, all aria live looks for is that the element's been updated and then reads out the changes, so yep - it would start from the beginning of the sentence each time.

I would recommend different approaches for heading, vs a lot of paragraph text, but what I've done in the past is set the textPlugin div to aria-hidden and create a duplicate visually hidden div with all the text in.