Blinking text for screen reader

Question

I am now making my website readable by screen readers.

On website I have some elements that are blinking. Blinking is implemented as changing element's visibility style from visible to hidden by javascript.

<span style="visiblity: visible/hidden;">Foobar</span>

Some of such elements I will have to put in aria-live zone. And at this point there is a problem - the blinking element will be read out loud each time it is blinking. (it is really bad)

What I want:

• to keep the "blinking" for normal users
• screen reader applications should interpret such data as normal text and read it just once

Extra obstacle:

In some cases the blinking text may have a link on it. In this case I need to keep text selectable by TAB and link should be "clickable" for both normal user and user with screen reader.

<a href="my_link" style="visiblity: visible/hidden;">Foobar</a>

Do you have any suggestions how it may be implemented?

I am accepting additional HTML elements and/or change on how blinking is implemented.

Answer 1

Blinking text is an extremely bad idea, and not only for screen reader users. It can draw so much attention to visually impaired people that they can't read anything else on the page. You can also cause severe trouble to users who are epilectic. etc.

So my best answer would be, forget about blinking text altogether. It's simply bad.

To give a more realistic answer in case you are really obliged to implement blinking text because your boss have said so, the simplest would be to play with another CSS property. For example, opacity, color, font-size, clip, positionning. These won't affect screen readers.

More generally, display and visibility properties have effect on screen readers. Sometimes width/height have an effect too. All others have usually no effect.