Accessibility Skip Nav - Skip to Content (Issue in

Question

For accessibility I built a skip nav. It's a basic anchor:

 <div class="skip-nav">
   <a href="#content">Skip to content</a>
 </div>

Linked to the content:

<section id="content">
  <h1>Accessibility Skip Nav Demo</h1>
  <p>Lorem ipsum...</p>
</section>

Pressing tab will reveal the "Skip to content" button based on focus. My CSS:

.skip-nav a {
  display: block;
  z-index: 1;
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  left: 10px;
  top: 35px;
  white-space: nowrap;
  padding: 10px;
  background: #fff;
}

.skip-nav a:focus,
.skip-nav a:active {
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  clip: auto;   
}

It works fine in all browsers except in Safari. In Safari trying to click with the mouse doesn't work. Here is the jsfiddle (please view in Safari to see the issue): https://jsfiddle.net/461huu5g/

Answer 1

So the problem was I didn't have complete coverage. What worked was accounting for hover. So my updated css:

.skip-nav a:focus,
.skip-nav a:active,
.skip-nav a:hover
{
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  clip: auto;   
}

HOWEVER

As Alexander mentioned the clip property is deprecated and therefore might break in the future.

SO A BETTER WAY (USING POSITIONING)

.skip-nav a {
  display: block;
  z-index: 1;
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  /*clip: rect(1px 1px 1px 1px); DEPRECATED*/
  left: -1000px;
  top: -1000px;
  white-space: nowrap;
  padding: 10px;
  background: #fff;
}

.skip-nav a:focus,
.skip-nav a:active,
.skip-nav a:hover {
  position: absolute;
  left: 10px;
  top: 35px;
  height: auto;
  width: auto;
  overflow: hidden;
  /*clip: auto; DEPRECATED*/
}

Answer 2

Don't think you are helping accessibility by focusing only on screen readers and keyboard users.

If you want to provide a "skip link", then make it visible for everyone and not only on focus, like people with disabilities not using a keyboard (touchscreen, eye tracking devices, voice controlled navigation).

Answer 3

This issue appears to be related to the use of the auto keyword to reset the clip property. If you replace clip: auto; with clip: initial; it will work in Safari. So if you wish to support browser that do not support initial, you will probably want both:

clip: auto;
clip: initial;

And initial will override auto in browsers that support initial.

On a side note, clip is deprecated, in favor of clip-path, so you may want to consider similar solutions which do not depend on the clip property, such as the popular position: fixed off-screen with negative positioning.

Answer 4

you have to set the clip css for each browser it's look like your firefox and chrome support it but safari does not so:

-webkit-clip: rect(1px 1px 1px 1px);

try it: https://jsfiddle.net/461huu5g/1/