CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Skip Navigation Links</title> <link rel="shortcut icon" href="/media/favicon.ico"> <link rel="home" href="/"> <link rel="search" href="/search/"> <link rel="alternate" href="https://webaim.org/blog/feed" type="application/rss+xml" title="WebAIM Blog"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y41PF8WV9X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Y41PF8WV9X'); </script> <link href="/styles/main.css" rel="stylesheet" type="text/css"> <link href="/styles/print.css" rel="stylesheet" type="text/css" media="print"> <script src="/media/scripts/jquery.js"></script> <script src="/media/scripts/main.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kameron:400,700' rel='stylesheet' type='text/css'> <link href="/styles/documents.css?ver=2" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">  </head> <body> <div id="headcontainer" class="clearfix" style="background-image: url(/media/banners/articles.jpg)"> <header> <div id="skiptocontent"><a href="#maincontent">skip to main content</a></div> <h2><a href="/"><img src="/media/logo.png" width="315" height="83" alt="WebAIM - Web Accessibility In Mind"></a></h2> <nav> <h2 class="hidden">Main Navigation</h2> <ul> <li><a href="/services/">Services</a></li> <li class="current"><a href="/articles/">Articles</a></li> <li><a href="/resources/">Resources</a></li> <li><a href="/projects/">Projects</a></li> <li><a href="/community/">Community</a></li> </ul> </nav> <div id="search"> <form method="get" role="search" action="/search/" id="sitesearch"> <p class="search"><span><label for="q">Search:</label> <input type="text" name="q" id="q"><input type="image" src="/media/template/search.svg" alt="Submit Search"></span></p> </form> <p class="intro"><a href="/intro">Introduction to Web Accessibility</a></p> <p class="training"><a href="/services/training">WebAIM Training</a></p> </div> </header> </div> <main id="maincontainer" class="clearfix"> <article id="maincontent"> <h1>Skip Navigation Links</h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/articles/">Articles</a> > "Skip Navigation" Links</p> <nav role="navigation"> <h2>Article Contents</h2> <ol> <li><a href="#overview">Overview</a></li> <li><a href="#creating">Creating "Skip Navigation" Links</a> <ol> <li><a href="#visible">Visible skip links</a></li> <li><a href="#hidden">Temporarily hidden skip links</a></li> <li><a href="#wording">Which wording is best?</a></li> <li><a href="#multiple">Multiple skip links are usually unnecessary</a></li> </ol> </li> <li><a href="#other">Other In-page Navigation Options</a> <ul> <li><a href="#wcag">WCAG Conformance</a></li> <li><a href="#headings">Headings and regions</a></li> <li><a href="#altorders">Alternatives to skip navigation Links</a></li> </ul> </li> </ol> </nav> <div class="section" id="overview"> <h2>Overview</h2> <p>On most pages, keyboard and screen reader users must navigate a long list of navigation links and other elements before ever arriving at the main content. This can be particularly difficult for users with some forms of motor disabilities. Consider users with no or limited arm movement who navigate a web page by tapping their heads on a switch or that use a stick in their mouth to press keyboard keys. Requiring users to perform any action numerous times before reaching the main content poses an accessibility barrier.</p> <p>Of course, sighted people who use their mouse do not have any trouble with web pages like this. They can almost immediately scan over the page and identify where the main content is. Skip navigation links are useful to give screen reader and keyboard users the same capability of navigating directly to the main content.</p> </div> <div class="section" id="creating"> <h2>Creating "Skip Navigation" Links</h2> <p>The idea is simple enough: provide a link at the top of the page that, when activated, jumps the user to the beginning of the main content area. <div class="section" id="visible"> <h3>Visible skip links</h3> <p>The easiest method of creating a skip navigation link is to put it at or near the top of the page in regular text. The key is to <strong>make sure the link is one of the first items</strong> that screen readers hear and that keyboard users navigate to using the keyboard (typically by pressing the <span class="keycap">Tab</span> key). Otherwise, users may not realize there is a skip navigation link there and may waste time navigating through extraneous links. The link must also be apparent to be helpful.</p> <div class="example"> <div class="title">Example</div> <p>The link is the first item in the page. The anchor or target for the link (where the link will jump the user to) is the main content region.</p> <div class="code"> <body><br> <a href="#maincontent">Skip to main content</a> <br> ...<br> <strong><main id="maincontent"></strong><br> <h1>Heading</h1><br> <p>This is the first paragraph</p> </div> <p>The target is identified by its <code>id</code> attribute value matching the <code>href</code> value (minus the "#") of the skip link. When the skip link is activated, keyboard focus will go to the <code><main></code> element. Navigation and reading will proceed from this location in the page.</p> <p>Alternatively, you can use a named anchor to identify the target for the link, though named anchors are no longer conforming in HTML5.</p> <div class="code"> <h1><strong><a name="maincontent" id="maincontent"></a></strong> Heading</h1><br> <p>This is the first paragraph</p> </div> </div> </div> <div class="section" id="hidden"> <h3>Temporarily hidden skip links</h3> <p>Many designers worry about the aesthetic impact of visible skip navigation links. They may think these links are unattractive or confusing to users who do not need them, so they may decide to make them invisible. A very small or hidden link does not benefit the audience that most needs skip links—sighted keyboard users. While screen readers have many mechanisms to jump around the page (e.g., headings and regions/landmarks), other keyboard users do not.</p> <p>To address the concerns that a visible skip link can be intrusive, but still create a skip link that is useful for sighted keyboard users, <strong>we recommend creating a link that is hidden until to the user navigates to it with a keyboard</strong>.</p> <p>To be usable by all keyboard users, particularly sighted keyboard users, the link must:</p> <ul> <li>be hidden by default</li> <li>be accessible to keyboard navigation</li> <li>become prominently visible when it is focused</li> <li>properly set focus to the main content area when activated</li> </ul> <p>Probably the most accessible method for visually hiding a skip link is to hide it off screen with CSS, then cause it to be positioned on screen when it receives keyboard focus. Because the link is still part of the accessible content on the page, keyboard and screen reader users can navigate it, and the link will become visible when accessed.</p> <p>Some techniques, such as hiding the skip link with CSS <code>display:none</code> or the <code>hidden</code> attribute, will remove the link from keyboard navigation making it inaccessible to all users. Making the link the same color as the background or fully transparent, sizing the link to 0 pixels, or placing it on a one-pixel transparent image can also pose accessibility issues.</p> <div class="important"> <div class="title">Important</div> <p>Review the article on <a href="/techniques/css/invisiblecontent/">Invisible Content Just for Screen Reader Users</a> for details on using CSS to hide skip links off-screen.</p> </div> <p>One potential issue with this approach is that if the user navigates very quickly using the <span class="keycap">Tab</span> key, the link may be visible on the page for only a fraction of a second and may be overlooked. This can be partially addressed by ensuring that the skip link is very visually distinctive at the top of the page when visible. Additionally, one could use scripting or CSS transitions to cause the link to animate so it remains visible on screen for more time.</p> <div class="note"> <div class="title">Note</div> <p>Navigate the links at the beginning of this page using the <span class="keycap">Tab</span> key to see an example of a hidden skip link that becomes visible on keyboard focus using CSS transitions to make it visually distinctive and persistent on screen for at least a moment.</p> </div> </div> <div class="section" id="wording"> <h3>Which wording is best?</h3> <p>There are multiple ways that the skip link could be worded:</p> <ul> <li>Skip navigation</li> <li>Skip main navigation</li> <li>Skip navigation links</li> <li>Skip to main content</li> <li>Skip to content</li> </ul> <p>Any of these may be sufficient so long as the purpose of the link is clearly described. In general, we prefer "Skip to main content" as it explains where the user is navigating to versus what they are navigating past.</p> </div> <div class="section" id="multiple"> <h3>Multiple skip links are usually unnecessary</h3> <p>What if a page has multiple sections or multiple levels of navigational links? Should developers provide a skip navigation link to each of these sections or to skip over each level of navigational?</p> <p><strong>In most cases, a single skip link is sufficient.</strong> For pages that have very few navigable items preceding the main content, a skip link may not be necessary at all. On the other hand, a very complex page with several repeated elements may necessitate additional skip links. Remember, the purpose of skip navigation links is to make keyboard navigation more efficient. Adding more links increases link-clutter. At what point will you need to add a "Skip the skip links" link?!</p> <p>In-page links elsewhere in a page can also be used to allow users to jump to or jump over other types of page content. The "Article Contents" at the top of this page, for example, includes in-page links to facilitate navigation to major page sections. A skip link could also be used to allow the user to quickly bypass confusing or potentially inaccessible content, such as ASCII art, complex tables, or complex social media feeds.</p> </div> </div> <div class="section" id="other"> <h2>Other In-page Navigation Options</h2> <div class="section" id="wcag"> <h3>WCAG conformance</h3> <p><a href="/standards/wcag/checklist#sc2.4.1">WCAG 2.4.1 (Bypass Blocks - Level A)</a> states, "A mechanism is available to bypass blocks of content that are repeated on multiple Web pages." This does not necessarily require that a skip link be present. Beginning the main content with an <code><h1></code> or using a <code><main></code> region would be a sufficient "mechanism". However because neither of these techniques are highly useful for sighted keyboard users absent a screen reader or specialized software, a skip link is strongly recommended for optimal accessibility on pages with repeated navigation.</p> </div> <div class="section" id="headings"> <h3>Headings and regions</h3> <p>Implementing proper <a href="/techniques/semanticstructure/#headings">heading structures</a> (especially starting the main content with an <code><h1></code>) and <a href="/techniques/semanticstructure/#regions">regions</a> (especially <code><nav></code> and <code><main></code>) is a vital aspect of keyboard accessibility. Unfortunately, browsers do not yet natively support this type of navigation without the use of extensions or a screen reader. Even though skip navigation links are a rather clumsy and obtrusive solution to a real-world problem, they are still often necessary to best meet the needs of all keyboard users.</p> <p>Within web pages and applications, focus management may be necessary to ensure that keyboard focus is set on content elements when they are presented or activated. When a dialog pop-up appears, for example, focus will likely need to be set to it using JavaScript.</p> </div> <div class="section" id="altorders"> <h3>Alternate reading orders</h3> <p>Some web sites use CSS to change page layouts so that the main content is presented before the navigation in the underlying source code (which is what determines the screen reader reading and keyboard navigation order), but it comes after the navigation visually. Because the navigation is encountered first for keyboard and screen reader users, this method may make a skip navigation link unnecessary.</p> <p>When the visual order does not align with the navigation and reading order, sighted keyboard or screen reader users may be confused when what they are seeing or navigating to seemingly jumps around the visual page. These types of layouts are not recommended.</p> </div> </div> </article>  <aside id="articlemeta"> <div id="updated">Last updated: <time datetime="2021-09-22">Sep 22, 2021</time></div> <div id="related"> <h2>Related Resources</h2> <ul> <li><a href="/articles/motor">Motor Disabilities</a></li> <li><a href="/techniques/hypertext/">Links and Hypertext</a></li> <li><a href="/techniques/css/invisiblecontent/">CSS in Action: Invisible Content Just for Screen Reader Users</a></li> <li><a href="/techniques/javascript/">Creating Accessible JavaScript</a></li> <li><a href="/techniques/sitetools/">Site Searches, Indexes, and Site Maps</a></li> </ul> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">©2024 WebAIM</h2> <p id="contact">Institute for Disability Research, Policy, and Practice<br> Utah State University<br> 6807 Old Main Hill<br> Logan, UT 84322-6807<br> <a class="phone" href="tel:4357977024">435.797.7024</a></p> <div id="checkpage"> <h2>Check Your Accessibility</h2> <form action="https://wave.webaim.org/report" novalidate> <label for="waveurl">Web site address:</label> <input type="url" id="waveurl" name="url" title="Web site address"> <input type="submit" value="WAVE"> </form> </div> </div> <div class="footerblock"> <h2 id="blog">From the Blog</h2> <ul><li><a href="/blog/severity-ratings/">Using Severity Ratings to Prioritize Web Accessibility Remediation</a></li><li><a href="/blog/25-tips/">25 Accessibility Tips to Celebrate 25 Years</a></li><li><a href="/blog/celebrating-webaims-25th-anniversary/">Celebrating WebAIM's 25th Anniversary</a></li><li><a href="/blog/introducing-ncademi/">Introducing NCADEMI: The National Center on Accessible Digital Educational Materials & Instruction聽</a></li></ul> </div> <div class="footerblock"> <h2 id="popular">Popular Resources</h2> <ul> <li><a href="/training/virtual">WebAIM Training</a></li> <li><a href="/standards/wcag/checklist">WCAG 2 Checklist</a></li> <li><a href="/newsletter">WebAIM Monthly Newsletter</a></li> <li><a href="/resources/contrastchecker">Color Contrast Checker</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</a></li> <li><a href="http://wave.webaim.org/">WAVE Web Accessibility Evaluation Tool</a></li> </ul> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="/contact">Contact</a></li> <li><a id="footerabout" href="/about">About</a></li> <li><a id="footerrss" href="/community/rss">RSS Feeds</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">Twitter</a></li> <li><a id="footercopyright" href="/copyright">Copyright & Terms of Use</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>