Mac Safari Voiceover cursor does not follow keyboard focus

Question

I have a web application and I use the card layout. Rather than loading the web page, I modify the DOM for every page. The issue on voiceover safari is that on change of view the VO cursor stays on the same position where the link for this page was clicked. Therefore on pressing CMD+Option+A, rather than reading the screen from the top, VO reads from the same position. This was also evident with JAWS on Windows. I tried fixing it by creating an empty Div to the top and setting focus ( Javascript element.focus() ) to the div on page change. This fixes the issue for JAWS but doesnt for Mac Safari VO. The Voiceover cursor does not follow keyboard focus. See Image Please note that all default settings have been set in VO Utility. VO cursor is set to focus keyboard focus checkbox.

The blue line is the hidden div, showing in blue due to keyboard focus. The black rectangle is the VO cursor.

Answer 1

I got this resolved using a delay of 500 to 1000ms. ** Window.setTimeout(moveFocus logic, 1000) ** The delay ensures that the dom has been completely appended before moving keyboard focus to the element. If your site is heavy, that may even require more delay. I verified it across Ipad, Iphone ios8, mac os x 10 and jaws 17.0 on windows 7.

Also note, that moving focus to a hidden div results into unexpected results on different screen readers. Therefore, move focus to the top focusable element of your page. Such as a Heading. In case, you have been using 'aria-live:assertive', on this to be focused element, remove this tag as this will make screen reader read your element content twice.