IE error: incorrect focus input

Question

I have a link at the very top of the page called "Skip Navigation" that appears on the screen every time the user presses Tab, and if he press Enter when "Skip Navigation" is in focus, this leads to # Main pages, so that it skips the top navigation and goes directly to the main area. All this works fine in Chrome, Firefox, Safari. The problem appears in IE (I tested both ie9 and ie11).

Script in IE:

“Press” tab - “Skip navigation” appears on the page - pressing Enter - refreshes the C # main page added to url - pressing Tab - “Skip Navigation” is displayed on the page

Does anyone know any solution for IE to make skip navigation and go to the main part of the page? Any help would be greatly appreciated.

#skip a {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#skip a:focus {
  left: auto;
  font-size: 20px;
  position: static;
  width: auto;
  height: auto;
}

nav {
  background: #847577;
  color: white;
  padding: 1em;
  text-align: center;
}

nav a {
  color: white;
}

#main {
  background: #E5E6E4;
  padding: 1em;
}

#main a {
  color: black;
}

<div id="skip"><a href="#main">Skip navigation</a></div>
<nav>
  <a href="/">Home</a>
  <a href="/">About Us</a>
</nav>
<div id="main">
  Main Content On The Page <a href="/">Link</a>
</div>

Run codeHide result

jsfiddle: https://jsfiddle.net/13p0eo43/

Answer 1

I think you have two options if it doesn’t work in the standard way as you describe:

• Focus the first focusable element following #main using the JavaScript.focus () method. The difficulty here is to determine which element should be focused, as this may not always be so simple.
• tabindex = -1 #main focus #main, JavaScript.focus(), . , , , #main shift + tab (- -1).