12.7 Skip to content link not rendering correctly on mobile devices (M)

skip to content link highlighted as it is not rendering correctly on an iPhone

FIGURE 12.10: skip to content link highlighted as it is not rendering correctly on an iPhone

12.7.1 WCAG 2.4.1 (A) - Mobile, iPad

When viewing the site on Android, iPhone and iPad, the ‘skip to content’ and ‘skip to menu’ links are announced to screen readers, but they are not displayed on the screen when they receive focus. This may cause difficulties for users with motor disabilities who rely on this link to jump straight to the content.

Furthermore, the skip to content link does not function as expected. See Skip navigation links take users to the same location (M) .

12.7.2 Recommendation

In order to pass WCAG 2.4.1 success criteria, the ‘Skip to content’ link needs to be made visible when it receives keyboard focus. This issue could be due to a bug that stops the focus event from being triggered or the link may be visually hidden. Possible fixes could include using CSS to hide the link off-screen until it receives keyboard focus to make it visible to all users. Alternatively, you could use JavaScript to set focus (using JavaScript focus()) to the target element.

After changes have been implemented, ensure that the site is tested across different devices and browsers to confirm this issue has been resolved.

More information on implementing accessible skip to content links on different devices