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

<nav class=fakeNav>
  <ul class=fakeNav_lst>
    <li class=fakeNav_li><a class=fakeNav_lnk href>dummy nav link</a></li>
    <li class=fakeNav_li><a class=fakeNav_lnk href>dummy nav link</a></li>
  </ul>
</nav>

<main class=main>

  <!-- tabindex = -1 is required for iOS with JS unavailable -->
  <h1 class=main_h1 id=main_h1>Accessible skip-to-content link for desktop and mobile</h1>
  
  <p class=main_p>Assistive technologies struggle with skip-links on mobile and touch devices.</p>
  
  <p class=main_p>Activating the skip-link anchor (only available via tab key) moves the focus to its <code class="main_code language-html">href</code> which is problematic on iOS and Android devices.</p>

  <p class=main_p>I've written a futherence to this piece to include accessible <a class=fancyLnk rel="me noopener" target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/JjYGdmZ">In-page anchors for desktop &amp; mobile</a> (includes skip-to-content).</p>
  
  <p class=main_p>These solutions correct experienced issues across desktop, iOS and Android.</p>
  
  <h2 class=main_h2>Skip-link to the content heading</h2>
  
  <figure>
    <figcaption>HTML</figcaption>
    <pre><code class=language-markup spellcheck=false contenteditable>&lt;a class=skip_lnk href="#main_title"&gt;Skip to main content&lt;/a&gt;

&lt;!-- Nav, etc --&gt;

&lt;h1 class="main_title" id="main_title" tabindex="-1"&gt;Page heading&lt;/h1&gt;
</code></pre>
  </figure>
  
  <p class=main_p><code class="main_code language-html">tabindex="-1"</code> resolves iOS issues.</p>
  
  <p class=main_p>Note: I'm using the <code class="main_code language-html">h1</code> as the focus point.<br>Wherever possible avoid moving focus onto blocks of content, such as <code class="main_code language-html">main</code>, <strong>especially</strong> if it contains focusable elements: links, inputs, video, etc.</p>

  <figure>
    <figcaption>CSS</figcaption>
    <pre><code class=language-css spellcheck=false contenteditable>.skip_lnk {
  position: absolute;
  padding: .5rem 1rem;
  color: #fff;
  background-color: #000;
  text-decoration: none;
  font-weight: bold;
  z-index: 10;
  transform: translate3d(.125rem, -5rem, 0);
  transition: transform .3s ease-out;
}
.skip_lnk:focus {
  transform: translate3d(.125rem, .125rem, 0);
  outline: #fff solid .125rem;
}
@media print {
  .skip_lnk {
    display: none;
  }
}
</code></pre>
  </figure>
  
  <p class=main_p>JavaScript is required to resolve Android issues.</p>

  <figure>
    <figcaption>JavaScript (ES6)</figcaption>
    <pre><code class=language-javascript spellcheck=false contenteditable>(() => {
  const skip_lnk = document.querySelector('.skip_lnk');
  if (!skip_lnk) return false;
  skip_lnk.addEventListener('click', (e) => {
    e.preventDefault();
    const to_obj = document.getElementById(skip_lnk.href.split('#')[1]);
    if (to_obj) to_obj.focus();
  });
})();
</code></pre>
  </figure>

  <figure>
    <figcaption>JavaScript (ES5) - Google closure compiled 194 bytes</figcaption>
    <pre><code class=language-javascript spellcheck=false contenteditable>(function(){var a=document.querySelector(".skip_lnk");if(!a)return!1;a.addEventListener("click",function(b){b.preventDefault();(b=document.getElementById(a.href.split("#")[1]))&&b.focus()})})();
</code></pre>
  </figure>


  <h2 class=main_h2>Skip-link to a content block</h2>

  <p class=main_p>If you cannot link to the main heading, and have to link to a content block (which may contain focusable elements), then avoid the use of <code class="main_code language-html">tabindex</code> in the HTML.</p>
  <p class=main_p>Instead add and remove it upon demand via JavaScript.</p>

  <figure>
    <figcaption>HTML</figcaption>
    <pre><code class=language-markup spellcheck=false contenteditable>&lt;a class=skip_lnk href="#main"&gt;Skip to main content&lt;/a&gt;

&lt;!-- Nav, etc --&gt;

&lt;main class="main" id="main"&gt;
  &lt;!-- May contain focusable elements --&gt;
&lt;/main&gt;
</code></pre>
  </figure>

  <figure>
    <figcaption>JavaScript (ES6)</figcaption>
    <pre><code class=language-javascript spellcheck=false contenteditable>(_ => {
  const skip_lnk = document.querySelector('.skip_lnk');
  if (!skip_lnk) return false;
  skip_lnk.addEventListener('click', e => {
    e.preventDefault();
    const to_obj = document.getElementById(skip_lnk.href.split('#')[1]);
    if (to_obj) {
      to_obj.setAttribute('tabindex', '-1');
      to_obj.addEventListener('blur', e => {
        to_obj.removeAttribute('tabindex');
      }, {once: true});
      to_obj.focus();
    }
  });
})();
</code></pre>
  </figure>


  <p class=main_p>For improved accessibility, the on-demand addition and removal of <code class="main_code language-html">tabindex</code> should be applied to <strong>all page anchors</strong>, not just skip-to-content links.</p>
  <p class=main_p>I've rewritten this piece to do exactly that in an accessible manner: <a class=fancyLnk rel="me noopener" target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/JjYGdmZ">In-page anchors for desktop &amp; mobile</a></p>

  
  <h2 class=main_h2>Credits</h2>

  <p class=main_p>For a full description of the issue faced on mobile devices, and who it affects, please see the original article by Hampus Sethfors: <a class=fancyLnk rel=noreferrer target=_blank href="https://axesslab.com/skip-links/">Your skip links are broken</a>.<br>The code here replaces the article's jQuery version with vanilla JavaScript and was extended to include on-demand tabindexing.</p>

</main>



<!-- Footer codepen include -->
[[[https://codepen.io/2kool2/pen/mKeeGM]]]