{"id":139737,"date":"2017-07-05T13:00:41","date_gmt":"2017-07-05T18:00:41","guid":{"rendered":"https:\/\/getflywheel.com\/?p=22885"},"modified":"2023-02-24T13:14:42","modified_gmt":"2023-02-24T19:14:42","slug":"skip-links-wordpress-site-accessibility-how-to","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/","title":{"rendered":"How to Use Skip Links to Make Your WordPress Site More Accessible"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In our <a href=\"https:\/\/wpengine.com\/resources\/an-introduction-to-accessibility-part-1\/\" target=\"_blank\" rel=\"noreferrer noopener\">introduction to accessibility series<\/a>, we talked about the basis for the various Web Content Accessibility Guidelines (WCAG). Now it\u2019s time to take the next step by looking at some of the key guidelines and showing you how to make your site more accessible. Let\u2019s start with bypass blocks, more commonly known as skip links.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a Skip Link?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A skip link is a special link that is hidden on your site until it comes into <code>:focus<\/code> via the tab key or a screen reader. Their purpose is to give alternative technology users (people using keyboards and screen readers) the ability to skip blocks of content. Straight from the standards:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u201cA mechanism is available to bypass blocks of content that are repeated on multiple Web pages.\u201d \u2013 <a href=\"https:\/\/www.w3.org\/WAI\/WCAG20\/quickref\/#navigation-mechanisms-skip\" target=\"_blank\" rel=\"noopener noreferrer\">WCAG Standard 2.4.1 &#8211; Bypass Blocks<\/a><\/strong><\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">2.4.1 is an A-level standard. This means it is covered by <a href=\"https:\/\/www.section508.gov\/\" target=\"_blank\" rel=\"noopener noreferrer\">Section 508<\/a>, and required by law. You <em>need<\/em> to have skip links.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/07\/skip-links-accessibility-desk.jpg\" alt=\"a person works on a laptop at a wooden desk\" class=\"wp-image-23293\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Can you guess what the most common block of content skip links apply to is? If you guessed \u201cthe menu,\u201d you\u2019d be right. Menus appear on just about every page of a site. Sighted users and mouse users tend to scroll right by them because it\u2019s one of those site elements you just expect to be there. But nav menus aren\u2019t the only blocks that need skip links.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A commonly overlooked area for skip links is left-hand sidebars (or right-hand sidebars for sites in right-to-left languages like Arabic). Because of where they tend to fall in semantic order, users will need a way to skip past the regularly repeated sidebar in order to get straight to the content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The same goes for featured post blocks that show up outside of the home page. Some site designs carry featured post sections or sliders over to interior pages. Unless the content of those sections is changing, ie: category or archive pages, there should be a skip link in place.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How do you Add Skip Links?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you know what a skip link is, it\u2019s time to add them to your site. There are a couple ways to solve this problem. The easy way (and for you non-coders, the only way), is to install a plugin. The hard way is to code them into your theme yourself.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using a Plugin<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">One plugin we recommend when it comes to skip links: <a href=\"https:\/\/wordpress.org\/plugins\/wp-accessibility\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Accessibility<\/a> by Joe Dolson. It resolves several accessibility issues, including adding basic skip links for you. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Coding it Yourself<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Your other option is to code skip links yourself. The code itself is fairly simple and only requires some basic HTML and CSS knowledge, but you\u2019ll need to be comfortable with how WordPress themes and templates work before attempting this method. From this point on, we&#8217;ll assume you know how to find the files referenced and how to edit them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019ll start by writing the actual skip links first. This will allow easy copy-and-pasting into the template files. Recalling HTML knowledge, you\u2019ll need to write out an anchor tag. Note that the formatting here is for readability.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;amp;amp;lt;a href=\u201d&#091;don\u2019t fill this in yet]\u201d class=\u201dskip-link\u201d&amp;amp;amp;gt;\nSkip to Main Content\n&amp;amp;amp;lt;\/a&amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019ve left the <code>href<\/code> attribute blank on purpose. This is because we need to define where our skip link will link to. For this example, we\u2019ll use the <code>&lt;main&gt;<\/code> element as our target. Because we can\u2019t link directly to an element without an ID, we\u2019ll need to make sure our <code>&lt;main&gt;<\/code> element has one. Your <code>&lt;main&gt;<\/code> element will likely be found in <code>header.php<\/code>, but not always. Once you\u2019ve located the element, you\u2019ll need to make sure it has an ID. If not, add one like so:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;amp;amp;lt;main id=\u201dmain-content\u201d&amp;amp;amp;gt;\n&#091;a bunch more code below]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The specific value of the ID isn\u2019t important, but you\u2019ll need to remember it. Now you\u2019ll want to update your skip link code with the ID value.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;amp;amp;lt;a href=\u201d#main-content\u201d class=\u201dskip-link\u201d&amp;amp;amp;gt;\nSkip to Main Content\n&amp;amp;amp;lt;\/a&amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you have your skip link built, go back to your <code>header.php<\/code> file or wherever your theme\u2019s opening <code>&lt;body&gt;<\/code> tag is located. The <code>&lt;body&gt;<\/code> tag is essential placement for skip links as they need to be the absolute first thing that comes into <code>:focus<\/code> for keyboard and screen reader users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Just after the <code>&lt;body&gt;<\/code> tag, past your completed HTML. The following shows a more detailed example with multiple skip links. If you want to add multiple links to your site, make sure the IDs are correctly applied.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;amp;amp;lt;body&amp;amp;amp;gt;\n&amp;amp;amp;lt;a href=\u201d#left-sidebar\u201d class=\u201dskip-link\u201d&amp;amp;amp;gt;Skip to Sidebar&amp;amp;amp;lt;\/a&amp;amp;amp;gt;\n&amp;amp;amp;lt;a href=\u201d#featured-posts-block\u201d class=\u201dskip-link\u201d&amp;amp;amp;gt;Skip to Featured Posts&amp;amp;amp;lt;\/a&amp;amp;amp;gt;\n&amp;amp;amp;lt;a href=\u201d#main-content\u201d class=\u201dskip-link\u201d&amp;amp;amp;gt;Skip to Main Content&amp;amp;amp;lt;\/a&amp;amp;amp;gt;\n\n&#091;Header navigation goes here]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now you\u2019ve got skip links in your code, but you\u2019re not done yet! If you load your page now, you\u2019ll see the skip links at the top. Time to add some CSS. The styling of skip links is pretty simple, using the example below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.skip-link\n{\nposition: absolute;\ntop: 0;\nz-index: 9999;\nright: 100%;\npadding: 5px;\npadding: 0.5rem;\nfont-size: 20px;\nfont-size: 2rem;\ncolor: #000;\nbackground: #FFF;\n}\n\n.admin-bar .skip-link\n{\ntop: 32px;\n}\n\n.skip-link:focus\n{\nright: auto;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">What you don\u2019t see is the use of <code>display: none<\/code>. Using it will cause a screen reader to skip the link entirely, defeating the purpose entirely. The hiding is done by placing the text off screen using <code>right: 100%<\/code> and shifting it to <code>right: auto<\/code> on <code>:focus<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With your CSS applied, you\u2019re all set. Your skip links are in place, but hidden. When a keyboard user or screen reader loads up your page at initiates <code>:focus<\/code>, your skip links will let them move right on to the content they came for.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping It Up<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Skip links are a perfect example of an accessibility feature that seems like a lot of work, but really isn\u2019t. All we did on the code side was add a couple lines of HTML and CSS. For the non-technical approach, we installed a plugin. Neither method takes very long, which is important to note since skip links are an A-level standard for WCAG 2.0 (the most current WCAG standards). You are required <b>by law<\/b> to have them on your site. Don\u2019t put yourself at risk; add your skip links today!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In our introduction to accessibility series, we talked about the basis for the various Web Content Accessibility Guidelines (WCAG). Now it\u2019s time to take the next step by looking at some of the key guidelines and showing you how to make your site more accessible. Let\u2019s start with bypass blocks, more commonly known as skip<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":140758,"template":"","resource-topic":[1396],"resource-role":[1397,899],"resource-type":[916],"class_list":["post-139737","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use Skip Links to Make Your WordPress Site More Accessible<\/title>\n<meta name=\"description\" content=\"Skip links are necessary to create truly accessible sites for alternative technology users. Read on to see how to add them to your site!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Skip Links to Make Your WordPress Site More Accessible\" \/>\n<meta property=\"og:description\" content=\"Skip links are necessary to create truly accessible sites for alternative technology users. Read on to see how to add them to your site!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-24T19:14:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/07\/skip-links-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/\",\"name\":\"How to Use Skip Links to Make Your WordPress Site More Accessible\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2017-07-05T18:00:41+00:00\",\"dateModified\":\"2023-02-24T19:14:42+00:00\",\"description\":\"Skip links are necessary to create truly accessible sites for alternative technology users. Read on to see how to add them to your site!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Skip Links to Make Your WordPress Site More Accessible\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Skip Links to Make Your WordPress Site More Accessible","description":"Skip links are necessary to create truly accessible sites for alternative technology users. Read on to see how to add them to your site!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Use Skip Links to Make Your WordPress Site More Accessible","og_description":"Skip links are necessary to create truly accessible sites for alternative technology users. Read on to see how to add them to your site!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-02-24T19:14:42+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/07\/skip-links-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/","name":"How to Use Skip Links to Make Your WordPress Site More Accessible","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2017-07-05T18:00:41+00:00","dateModified":"2023-02-24T19:14:42+00:00","description":"Skip links are necessary to create truly accessible sites for alternative technology users. Read on to see how to add them to your site!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/skip-links-wordpress-site-accessibility-how-to\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Use Skip Links to Make Your WordPress Site More Accessible"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/07\/skip-links-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Site Owner","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/140758"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139737"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139737"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139737"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}