Skip link is not visible on focus

Rule

A method MUST be provided to skip navigation and other page elements that are repeated across web pages.

Background

In contrast to a sighted person's ability to visually skip past repeated content at the top of a page - such as heading graphics and navigation links - people who are blind must read content sequentially with a screen reader, starting at the top of the page. Similarly, mouse users can click directly on an element in the middle of a page, while keyboard users must tab past all links, buttons, form fields, etc. to get to an element further into a page. To help screen reader and keyboard users bypass content repeated across multiple pages, a mechanism is required - such as a skip link, good heading structure, HTML5 sectioning elements, or ARIA landmarks. This allows screen reader and keyboard users to more efficiently get to the main content of a page.

How to Fix

A skip link is provided to skip navigation and other page elements, but the link does not become visible when it receives keyboard focus so sighted keyboard users cannot use it. Fix this issue by using CSS to make the link visible on keyboard focus while still hiding it when the link does not have focus.