Last active
May 6, 2022 12:22
-
-
Save jessekanner/a9228433210700babc467d6aaaef9290 to your computer and use it in GitHub Desktop.
Implementation for tabbed Skip Link
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| a.skip-main { | |
| left:-999px; | |
| position:absolute; | |
| top:auto; | |
| width:1px; | |
| height:1px; | |
| overflow:hidden; | |
| z-index:-999; | |
| } | |
| a.skip-main:focus, a.skip-main:active { | |
| color: #fff; | |
| background-color:#000; | |
| left: auto; | |
| top: auto; | |
| width: 30%; | |
| height: auto; | |
| overflow:auto; | |
| margin: 10px 35%; | |
| padding:5px; | |
| border-radius: 15px; | |
| border:4px solid yellow; | |
| text-align:center; | |
| font-size:1.2em; | |
| z-index:999; | |
| } | |
| <a class="skip-main" href="#main">Skip to main content</a> | |
| <h1>Skip to Main Content - Keyboard Accessible</h1> | |
| <ul> | |
| <li><a href="#">Nav Item 1</a></li> | |
| <li><a href="#">Nav Item 2</a></li> | |
| <li><a href="#">Nav Item 3</a></li> | |
| <li><a href="#">Nav Item 4</a></li> | |
| </ul> | |
| <p id="main" tabindex="-1">This is the main content. In this example you will note that the "Skip to main content" link appears when I tab through the page. This allows keyboard-only users, in addition to screen reader users, an easy way to skip repetitive navigation. The key components to implementing this are</p> | |
| <ol> | |
| <li>provide a link at the top of the page that says "skip to main content"</li> | |
| <li>have it link to an internal anchor further down in the page where the main content begins.</li> | |
| <li>use CSS :focus and :activate to make the skip link visible when the user tabs to it</li> | |
| </ol> | |
| <p> | |
| View the <a href="https://www.w3.org/TR/WCAG20-TECHS/G1.html">skip to main content</a> implementation on the W3C’s Web Accessibility Initiative’s homepage. | |
| </p> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment