2

I have a link which is normally hidden but is revealed for users using keyboard navigation. This link jumps them past the header menus etc into the main page content. This is a similar example:

http://codepen.io/AtlantaJones/full/Dfvix

<body>


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

<header>
    <nav role="navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

<div id="content" role="main">
    <h1>Main Content Starts Here</h1>
  <p>This is a basic example of "Skip Navigation" or "Skip to Content" links. This represents the version that <em>most</em> tutorials use, which actually doesn't really do what it's supposed to.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, voluptatibus, sed error mollitia nostrum minima illum nam aliquam doloremque nulla nesciunt dicta ut aliquid iusto dolorum veniam ea. Illum, ex. <a href="#">Link One.</a></p>

    <h2>Subhead Here</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, minus ad dolores error natus non eos deleniti numquam vero voluptates iste impedit quaerat cupiditate nisi ipsa reiciendis illum minima assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, repellendus ipsam quis sed deserunt soluta ullam modi a dolores odio harum aliquam impedit quisquam commodi consequatur quos suscipit pariatur recusandae. <a href="#">Link Two.</a></p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, minus ad dolores error natus non eos deleniti numquam vero voluptates iste impedit quaerat cupiditate nisi ipsa reiciendis illum minima assumenda <a href="#">Link Three.</a>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, repellendus ipsam quis sed deserunt soluta ullam modi a dolores odio harum aliquam impedit quisquam commodi consequatur quos suscipit pariatur recusandae.</p>

</div>

</body>

This is a very common design pattern however it doenst work well on Chrome. If you are using the keyboard for navigation and press enter on this link then you are scrolled down the page, however your focus hasn't changed. This means that the next time you press tab your focus switched to the next link after "Skip to content" which scrolls you back up the page again! On Firefox however it behaves as I would expect and your focus is moved to the main content area.

The example in the link doesn't have very much content but if you make your browser very narrow you can simulate the experience of a site with more content and have the experience I'm talking about.

How / is this problem normally solved? Im surprised that such a common design pattern appears to have quite a major UX issue in for the very users that it's designed to serve if they are using a very popular browser.

closed as off-topic by Benny Skogberg Sep 30 '15 at 7:17

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Benny Skogberg
If this question can be reworded to fit the rules in the help center, please edit the question.

  • This is great UX. It's for blind people who use scanners instead of screens. The text written on the screen gets told to them by text to voice. The Link is important to them because they don't want to scroll thru your whole mainmenu but rather skip to the important part of your website - the content – BlueWizard Sep 12 '15 at 20:19
  • 1
    In which browser did you test this? – unor Sep 13 '15 at 11:43
  • @JonasDralle Ive updated my answer. The issue im describing occurs in Chrome but not Firefox. – Evanss Sep 14 '15 at 9:22
  • This talks about and appears to address my issues bignerdranch.com/blog/web-accessibility-skip-navigation-links – Evanss Sep 14 '15 at 10:03
  • This is a common and popular discussion in the Chrome feature request board. However, it's an implementation question and not a UX question. I suggest you look at the feature request board and ask the question on a FE dev site. – Andrew Martin Sep 30 '15 at 6:02