Difference between revisions of "Skip Link"

From Level Access Web Labs
Jump to navigation Jump to search
 
(5 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
<html>
 
<html>
 
<a href="#maincontent" click="document.getElementById('maincontent').focus();">Skip to main content </a>
 
<a href="#maincontent" click="document.getElementById('maincontent').focus();">Skip to main content </a>
<a href="#maincontent">Skip to main content (no set focus)</a>
+
<a href="#maincontent1">Skip to main content (no set focus)</a>
 
<div>This page demonstrates a skip link.</div>
 
<div>This page demonstrates a skip link.</div>
 
<nav>
 
<nav>
Line 12: Line 12:
 
</nav>
 
</nav>
 
<main>
 
<main>
<h1 id="maincontent" tabindex="-1">Main page content</h1>
+
<h1 id="maincontent1" tabindex="-1">Main page content</h1>
 
<p>SSB BART Group provides IT accessibility consulting services.</p>
 
<p>SSB BART Group provides IT accessibility consulting services.</p>
 
</main>
 
</main>
 
</html>
 
</html>
 
[[Category:Techniques]]
 
[[Category:Techniques]]

Latest revision as of 19:21, 6 May 2020

Note: As for 6/4/18 we are unclear if this is still an issue as it appears to be fixed in Chrome and Safari.

An additional setfocus() method is needed for webkit based browsers - demonstrated on 1st link below. Skip to main content Skip to main content (no set focus)

This page demonstrates a skip link.

Main page content

SSB BART Group provides IT accessibility consulting services.