Make VoiceOver on iOS read error messages in the middle of the page after the page loads
VoiceOver on iOS 10 moves focus to the first text node on the page after the page loads, regardless of any other focus movement bound to onload. The following example temporarily hides content from VoiceOver and moves focus to the error container. When the user TABS away from the error container, the previously hidden content is exposed to VoiceOver.
This example uses a lazy hiding approach as follows:
- Use aria-hidden to hide only the previous siblings of the error message container from VoiceOver
- Move focus to the error message container on page load
- When the user TABS away from the error message container, remove aria-hidden from the previous siblings of the error container and set focus to the BODY element.