CODEWITHSUNDEEP
htmlcsssafariaccessibilityanchor
ASG
ASG

Reputation: 213

anchor with href not taking focus in Safari even with all accessibility/keyboard settings enabled

I am creating a skip link, but the anchor tag is not taking focus in Safari (works in Chrome). I've enabled all accessibility settings as I've read in other posts:

  1. Safari --> Preferences --> Advanced —> checked the box that says “Press Tab to Highlight Each Item on a Webpage”
  2. Mac System Preferences --> Keyboard --> Shortcuts --> and then clicked “All Controls” at the bottom

I've also tried adding the :hover pseudoclass in addition to the :focus one as suggested here: Accessibility Skip Nav - Skip to Content (Issue in Safari)

Tabbing through the content does not make the skip link appear in Safari even with those changes. It works consistently in Chrome. Here is also a codepen with the issue: https://codepen.io/a-gheorghe-the-vuer/pen/vVJmZw

.card {
  background-color: yellow;
  left: -1000px;
  top: -1000px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
}

.anchor-skip:focus .card {
  left: 0;
  top: 0;
  background-color: yellow;
  height: 20px;
  width: 100px;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
  display: block;
}

.anchor-skip:hover .card {
  left: 0;
  top: 0;
  background-color: yellow;
  height: 20px;
  width: 100px;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
  display: block;
}

.anchor-skip:active .card {
  left: 0;
  top: 0;
  background-color: yellow;
  height: 20px;
  width: 100px;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
  display: block;
}

.button {
  z-index: 1
}

.check {
  height: 30px;
  width: 100px;
  border: 1px solid black;
 }
  
        <a
        class="anchor-skip"
        tabindex="0"
        href="#main"
      >
        <div class="card" tabindex="-1">
          <div class="button">
            <span> Skip to main content</span>   
          </div>
        </div>                
      </a>
      <div> hi </div><div> hi </div><div> hi </div><div> hi </div>
      <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>
      <div> hi </div><div> hi </div><div> hi </div><div> hi </div>
      <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>    
      <div id="main" class="check"> hello </div>
 <div>

Any help would be appreciated. Thanks.

Upvotes: 7

Views: 9593

Answers (3)

Abhishek Kumar
Abhishek Kumar

Reputation: 1040

Your HTML and CSS were not valid, After correcting

Code pen working code

.card {
  background-color: yellow;
  left: -1000px;
  top: -1000px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  border: 0.1rem solid red;
  border-radius: 0.4rem;
  box-shadow: 0 0.2rem 1rem 0 black;
  padding: 3.6rem;
}

.holder:focus .card {
  left: 0;
  top: 0;
  background-color: yellow;
  height: 20px;
  width: 100px;
  border: 0.1rem solid red;
  border-radius: 0.4rem;
  box-shadow: 0 0.2rem 1rem 0 black;
  padding: 3.6rem;
  display: block;
}

.button {
  z-index: 1;
} /*Here ) was used*/

.check {
  height: 30px;
  width: 100px;
  border: 1px solid black;
  background-color: green;
}
<div tabindex="0" class="holder">
  <a class="anchor-skip" tabIndex="0" href="#main">
    <div class="card" tabindex="-1">
      <div class="button">
        <span> Skip to main content</span>
      </div>
    </div>
  </a>
</div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div> hi </div>
<div id="main" class="check"> hello </div>

Upvotes: 0

xirclebox
xirclebox

Reputation: 174

There are a few things going on. The first one is that by default, Safari doesn't use tab navigation. The user has to go into Safari's setting and check the box to turn on tabbed navigation. It's stupid.

The other issue is your markup. Safari doesn't like empty links. Even though you have a div inside the anchor tag, Safari doesn't recognize this as a valid link and therefore ignores it. To correct this issue you'll need to simplify your markup to something like this:

<a class="sr-only sr-only-focusable" href="#main">Skip to main content</a>

Also, by using semantically correct markup, your link will not need a tabindex. When using the "tab" key to navigate, when the link is in focus, set the display parameter to "block" to make it visible.

Good luck.

Upvotes: 9

realShadabSaifi
realShadabSaifi

Reputation: 31

For Skip to main content link:

  • Provide a visually hidden link to the anchor
  • When anchor receives focus, display the same link
  • when user hit the same link then move focus to the target element using javascript focus() function.

Upvotes: 0

Related Questions