0

A body of text in a <p> element has a nested <a> element that reads '+MORE'. Clicking that <a> element expands to reveal more text that was previously hidden (simple css and js).

Using Apple's VoiceOver to tab through the links, a thick black border appears around the active element as I tab to each one. When I get to the '+MORE' link mentioned above and click 'Return' to expand the hidden text, the text is then revealed by way of a css transition. But in the process, the link with the black border focus is visually pushed downward in the body, and the problem is that the black border doesn't stay positioned over the link. As the link is pushed down while revealing more text, the black border remains stationary.

Any advice on how to get the black border to stay focused around the same element after it concludes its transition/animation would be great appreciated.

Gray Spectrum
  • 723
  • 2
  • 7
  • 21

1 Answers1

0

I don't think there's a way to control the black border directly from javascript. Could you post some example code? Perhaps there's a way to redesign the CSS to make it line up properly.

Consider, however, that if your user is using VoiceOver, the visual glitch is likely to go unnoticed... :)

TobyRush
  • 654
  • 4
  • 20
  • As I understand, many visually-impaired users combine the assistive reader technology with the visual cues on the page, so I'm afraid there is a possibility that it will get noticed. As far as the CSS is concerned, the elements are doing exactly as 'instructed'. If I could only grab hold of that black border and keep it from transitioning. Thanks for your input! – Gray Spectrum Jun 05 '14 at 15:36