Situation:
- iOS 7.1
- VoiceOver is Enabled
- Hyperlink (
<a href="#content">
) points to: - target element on the page (
<div id="content">page contents</div>
or<a id="content"></a>
) - URL I'm investigating: http://www.yooralla.com.au/whats-on/yooralla-media-awards/yooralla-media-awards-judges-pack
What happens:
- Select and activate the link
- A border appears on the target element (which is halfway down the screen)
- The page scrolls so that the target element is at the top of the screen, but the border stays halfway down the screen.
- The closest element to the border is then selected and bordered, so reading starts halfway down the page instead of at the target element.
Closest reference that I can find to this issue is item 1 here, so maybe it is fixed in iOS 8.
But I'm trying to work out why it's happening and how to avoid it on as many devices possible. I've tried linking both to the main content div
(which fills most of the page), and inserting an empty a
tag, both of which behave the same.
EDIT: I've tried to force the reading position by setting focus or scrolling with JavaScript, but VoiceOver still ignores this and reads from the wrong place.