{"id":336902,"date":"2021-03-23T14:32:39","date_gmt":"2021-03-23T21:32:39","guid":{"rendered":"https:\/\/css-tricks.com\/?p=336902"},"modified":"2021-03-23T14:32:41","modified_gmt":"2021-03-23T21:32:41","slug":"imagining-native-skip-links","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/imagining-native-skip-links\/","title":{"rendered":"Imagining native skip links"},"content":{"rendered":"\n<p>I love it when standards evolve from something that a bunch of developers are already doing, and making it easier and foolproof. Kitty Giraudel is <a href=\"https:\/\/kittygiraudel.com\/2021\/03\/07\/imagining-native-skip-links\/\" rel=\"noopener\">onto that here<\/a> with skip links, something that every website should probably have, and that has a whole checklist of things that we can and do screw up:<\/p>\n\n\n\n<blockquote>\n<ul> <li>It should be the first thing to tab into.<\/li> <li>It should be <a href=\"\/2021\/02\/17\/hiding-content-responsibly\/\">hidden carefully<\/a> so it remains focusable.<\/li> <li>When focused, it should become visible.<\/li> <li>Its content should start with \u201cSkip\u201d to be easily recognisable.<\/li> <li>It should lead to the main content of the page.<\/li> <\/ul>\n<\/blockquote>\n\n\n\n<!--more-->\n\n\n\n<p>Doing this natively could solve all those problems and more (like displaying in the correct language for that user). Nice little project for someone to mock up as a browser extension, I&#8217;d say.<\/p>\n\n\n\n<p>Reminds me of the idea of <a href=\"https:\/\/css-tricks.com\/on-the-web-share-api\/\">extending the Web Share API into native HTML<\/a>. It&#8217;s just a good idea. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I love it when standards evolve from something that a bunch of developers are already doing, and making it easier and foolproof. Kitty Giraudel is onto that here with skip links, something that every website should probably have, and that has a whole checklist of things that we can and do screw up: It should [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":273933,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[466,18913],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":304342,"url":"https:\/\/css-tricks.com\/how-to-create-a-skip-to-content-link\/","url_meta":{"origin":336902,"position":0},"title":"How to Create a \u201cSkip to Content\u201d Link","date":"March 17, 2020","format":false,"excerpt":"Skip links are little internal navigation links that help users move around a page. It\u2019s possible you\u2019ve never actually seen one before because they\u2019re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":345154,"url":"https:\/\/css-tricks.com\/a-deep-dive-on-skipping-to-content\/","url_meta":{"origin":336902,"position":1},"title":"A Deep Dive on Skipping to Content","date":"August 3, 2021","format":false,"excerpt":"While most people browsing the web on a computer use a mouse, many rely on their keyboard instead. Theoretically, using a web page with the keyboard should not be a problem \u2014 press the TAB key to move the keyboard focus from one focusable element to the next then press\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-08-03-at-7.34.58-AM.png?fit=1200%2C731&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":332506,"url":"https:\/\/css-tricks.com\/proper-tabbing-to-interactive-elements-in-firefox-on-macos\/","url_meta":{"origin":336902,"position":2},"title":"Proper Tabbing to Interactive Elements in Firefox on macOS","date":"January 14, 2021","format":false,"excerpt":"I just had to debug an issue with focusable elements in Firefox. Someone reported to me that when tabbing to a certain element within a CodePen embed, it shot the scroll position to the top of the page (WTF?!). So, I went to go debug the problem by tabbing through\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/jm..png?fit=1200%2C1099&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352798,"url":"https:\/\/css-tricks.com\/working-with-built-in-graphql-directives\/","url_meta":{"origin":336902,"position":3},"title":"Working With Built-in GraphQL Directives","date":"October 1, 2021","format":false,"excerpt":"Directives are one of GraphQL\u2019s best \u2014 and most unspoken \u2014 features. Let's explore working with GraphQL\u2019s built-in schema and operation directives that all GraphQL spec compliant APIs must implement. They are extremely useful if you are working with a dynamic front-end because you have the control to reduce the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/graphql-directives-traffic-light.webp?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":200249,"url":"https:\/\/css-tricks.com\/more-control-over-text-decoration\/","url_meta":{"origin":336902,"position":4},"title":"More Control over Text Decoration","date":"April 14, 2015","format":false,"excerpt":"Marie Mosley just finished up a revamping of the text-decoration property (and friends) in the Almanac. You're probably aware of this property. For instance, most default browser styles include underlined links by way of text-decoration: underline; - which you can remove with text-decoration: none;. But you may not be aware\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":360423,"url":"https:\/\/css-tricks.com\/sass-default-parameters\/","url_meta":{"origin":336902,"position":5},"title":"A Practical Tip For Using Sass Default Parameters","date":"January 13, 2022","format":false,"excerpt":"Sass offers functions and mixins that accept parameters. You can use Sass default parameters, that is, parameters that have a value even if you don't provide them when the function or mixin is called. Let's focus on mixins here. Here's the syntax of a mixin: @mixin foo($a, $b, $c) {\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/sass-mixins.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/336902"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=336902"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/336902\/revisions"}],"predecessor-version":[{"id":336916,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/336902\/revisions\/336916"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/273933"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=336902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=336902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=336902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}