IE issue: wrong tab focus

Question

I have a link at the very top of the page called "Skip Navigation", that appears on the screen every time user presses Tab, and if he presses Enter while "Skip Navigation" is in focus, it takes him to the #main part of the page, so that he skips top navigation and goes directly into the main area. It all works perfect in Chrome, Firefox, Safari. The issue appears in IE (I tested both ie9 and ie11).

Scenario in IE:

Presses Tab - "Skip Navigation" appears on the page - presses Enter - refreshes the page with #main added into the url - presses Tab - "Skip Navigation" appears on the page

Does anyone know any solution for IE to force skipping navigation and going to the main part of the page? Any help will be highly 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> 

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

Answer 1

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

1. Focus the first focusable element following #main using JavaScript .focus() method. Your difficulty here will be determining which element must be focused, as it might not always be so simple.
2. Set tabindex=-1 on #main and focus #main using JavaScript .focus() method upon clicking on the link. The next time the user press tab, the next focusable element will take focus, and #main can't be focused again when pressing shift+tab (because of the value -1).

Answer 2

Add tabindex="-1" to the div, no need for javascript.

The following is working for me in IE11.

 #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" tabindex="-1"> Main Content On The Page <a href="/">Link</a> </div>