Safari/Voiceover Anchor Link / Focus Bug

This page describes an anchor link bug (including skipnav links) on iOS while using VoiceOver.

Note: There is JavaScript on this page to fix a different safari/voiceover bug that was preventing focus being sent to a target with content.

Note: View page source to see the code

This is an issue because many sites include a skip link to the main content of the page. These links usually target the main element itself. The first child of the main element is usually an h1 (page title). On landing pages and home pages, the h1 is often visually hidden because it is redundant (matches the site title).

Additionally, links that target empty named anchors will not work. Links like these are frequently found on FAQ like pages.

This bug has been reported in the WebKit tracker.

Example links

  1. Go to target with no content
  2. Go to target with content
  3. Go to target with first child of screen-reader-only content

Steps to reproduce

  1. Turn VoiceOver On
  2. Go to this page using safari on iOS
  3. Click the 'Go to target with no content' link
  4. Click the 'Go to target with content' link
  5. Go to target with first child of screen-reader-only content

Expected results

  1. The 'Go to target with no content' link moves focus to the target
  2. The 'Go to target with content' link moves focus to the target
  3. the 'Go to target with first child of screen-reader-only content' link moves focus to the target

Actual results

  1. The 'Go to target with no content' link DOES NOT move focus to the target (success)
  2. The 'Go to target with content' link moves focus to the target (fail)
  3. the 'Go to target with first child of screen-reader-only content' link DOES NOT move focus to the target (fail)

Example content

example link before target
This is some placeholder content so that the page has to scroll to reach the target.
target with content
test
target with first child of screen reader-only content, followed by visual content. The screen reader-only content uses a .sr-only css pattern to visually hide the content but keep it available to screen readers.
example after target