Skip to Content Button
+Skip to Content Button
+2019-03-25
-One of the golden rules for testing your website's accessibility is the "keyboard-only" audit. This is where you test navigating through your entire site without the use of a mouse, but instead rely solely on tabbing through your content.
-Unfortunately, one item is normally overlooked during this audit - a "skip to content" context button. Including a "skip to content" navigation item in your project is extremely useful because:
+ +One of the golden rules for testing your website’s accessibility is the “keyboard-only” audit. This is where you test navigating through your entire site without the use of a mouse, but instead rely solely on tabbing through your content.
+ +Unfortunately, one item is normally overlooked during this audit - a “skip to content” context button. Including a “skip to content” navigation item in your project is extremely useful because:
+- speeds up user interaction with the content you want them to see -
- on subsequent pages the user shouldn't need to tab through the entire navigation each time +
- on subsequent pages the user shouldn’t need to tab through the entire navigation each time
The HTML
+ +The HTML
+For the sake of this demo we will assume that we currently have the following navigation setup in our project:
-<nav role="navigation">
- <a href="/">Home</a>
- <a href="/about">About</a>
- <a href="/archive">Archive</a>
- <a href="/atom.xml">RSS</a>
-</nav>
+
+<nav role="navigation">
+ <a href="/">Home</a>
+ <a href="/about">About</a>
+ <a href="/archive">Archive</a>
+ <a href="/atom.xml">RSS</a>
+</nav>
-Now for the easy part - adding our simple content skip link with it's own custom skip-content
class:
-<nav role="navigation">
- <!-- Skip to content button -->
- <a class="skip-content" href="#main">Skip to Content (Press Enter)</a>
- <a href="/">Home</a>
- <a href="/about">About</a>
- <a href="/archive">Archive</a>
- <a href="/atom.xml">RSS</a>
-</nav>
+
+Now for the easy part - adding our simple content skip link with it’s own custom skip-content
class:
+
+<nav role="navigation">
+ <!-- Skip to content button -->
+ <a class="skip-content" href="#main">Skip to Content (Press Enter)</a>
+ <a href="/">Home</a>
+ <a href="/about">About</a>
+ <a href="/archive">Archive</a>
+ <a href="/atom.xml">RSS</a>
+</nav>
-