1.3 Focus doesn’t move to the top of the page on iOS devices (H)

1.3.1 WCAG 1.3.1 (A), 2.4.3 (A) - iPad, iPhone

When loading a new page on an iPad, focus remains in the same relative position as the previous interactive element. For example, from the Search Results page, the focus indicator stays on the position of ‘Ikenberry Camploongo’ when loading on to the next page. So, focus begins on the ‘Vulnerabilities’ link on the next page, instead of starting at the skip link at the top of the page.

This is highly problematic for screen reader users with visual impairments. The expected behaviour is that focus shifts to the top of the page and the content is announced from that point. Starting the focus in the middle of the page could cause users to miss out on the preceding content since they may not be aware that it is there.

FIGURE 1.4: Interactive element highlighted on Search Results page

FIGURE 1.5: Focus starts at Vulnerabilities on the next page

1.3.2 Recommendation

Ensure that focus starts at the top of the page.

Focus staying at the position of the previous interactive element is a known problem on iOS devices. While this is an issue that needs to be addressed by Apple, we recommend programmatically moving focus to the skip link or the first heading when a new page loads in.

This can be done by adding tabindex="-1" to the <h1> element, and then programmatically shifting focus there using JavaScript.

The A11y cast episode on Managing Focus explains in detail how to code this.

---