Transition Text - Accessible

@deb

My experience (if I remember correctly) is yes and yes. A couple notes though...

I think that visible objects that are transitioned into view are actually read by a screen reader in Title Manager reading order. That is, a screen reader doesn't have a notion of timing and transitions for visible objects. It just reads them as part of the regular reading order. I'd need to test this again. My objects transition in pretty quickly, so I don't currently have a good test handy to validate this.

For initially hidden text that you reveal by an action, a screen reader will read the text when it is made visible (like via a button click), if it is not reading something else. It uses the aria-live="polite" setting ("polite" meaning it won't interrupt the screen reader). One thing I noticed here, if the text object comes after the button or link in the Title Manager, then the screen reader may read it again if the user is linearly reading the page, because now it is a visible object in the regular reading order. So I've moved my hidden text before the button/link in the Title Manager so that it is only read once - when it is made visible. Hope that makes sense.

I recommend downloading, installing, and playing with the free NVDA screen reader (https://www.nvaccess.org/download/). Using a screen reader is the best way to learn how it works.

Thank you. Your response is very helpful.

I am getting the attached message when I run an accessibility check:

It says that my objects may not be read by a screen reader because they are not initially hidden and are transitioned in.

What version are you using? I can't replicate that error message when running the Accessibility Checker.

That said, I ran a couple of tests that do offer some insight...

1) I had an image Fly in from the Left after 30 seconds. It was not read by the screen reader, either before it appeared or after.

2) I had a text box Fly in from the Left after 30 seconds. It was read by the screen reader only when it appeared onscreen.

So my original assumption was incorrect; the objects are not read in typical Title Manager reading order. (Mine are text objects that transition in quickly, so they do appear in reading order.)

Looking at the code for the page in Browser Developer mode, it appears that both objects that transitioned into the page are initially set to visibility:hidden, which explains why they are not read in Title Manager order. The text objects also have aria-live="polite", which is why they are announced when they appear. But the image does not have aria-live="polite", so it is ignored by the screen reader even when it appears onscreen. I did not test any other objects.

I haven't tested any workarounds, but would suggest a couple of ideas. First, try making the image object initially hidden and see if you can time a "Show" event just before the transition. Second, you could try adding the aria-live="polite" to an image object using jQuery.

And I would suggest submitting a support ticket for this. It would seem that aria-live="polite" should be on any object that is transitioned in if they are being set to "hidden" during publish.