Created
May 18, 2021 13:29
-
-
Save nfreear/bee648f10dcaf25f9788139c656758cc to your computer and use it in GitHub Desktop.
Imagining native skip links (after Kitty Giraudel)
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
| <!doctype html> <title> Skip-link test </title> | |
| <meta name="skip-link" value="#content" /> | |
| <link rel="skip-link" href="#content" /> | |
| <nav> | |
| <a href="#">Nav link 1</a> | |
| </nav> | |
| <main id="main"> | |
| <h1> Skip-link test </h1> | |
| <p><a href="https://kittygiraudel.com/2021/03/07/imagining-native-skip-links/" | |
| >Imagining native skip links, by Kitty Giraudel.</a></p> | |
| <p> Hello world! </p> | |
| </main> | |
| <script type="module"> | |
| if (!window.navigator.skipLink) { | |
| const skipLink = document.createElement('a') | |
| skipLink.href = '#main' | |
| skipLink.innerHTML = 'Skip to content' | |
| document.body.prepend(skipLink) | |
| } | |
| </script> | |
| <style> | |
| body { margin: 2rem auto; max-width: 32rem; } | |
| a[ href = '#main' ], | |
| a[ href = '#content' ], | |
| a.skip-link { | |
| background: #000; | |
| border: 0 solid orange; | |
| color: #fff; | |
| display: block; | |
| font: .0001rem sans-serif; | |
| position: absolute; | |
| top: .1rem; | |
| left: .1rem; | |
| margin: 0; | |
| padding: 0; | |
| height: 0; | |
| width: 0; | |
| } | |
| a[ href = '#main' ]:focus, | |
| a[ href = '#content' ]:focus, | |
| a.skip-link:focus { | |
| border-width: .3rem; | |
| font-size: 1.2rem; | |
| padding: .7rem; | |
| height: auto; | |
| width: auto; | |
| transition: all .6s; | |
| } | |
| </style> | |
| <pre> | |
| NDF, 18-May-2021. | |
| </pre> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment