CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users</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>CSS in Action<br><span class="subtitle">Invisible Content Just for Screen Reader Users</span></h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/articles/">Articles</a> > CSS in Action: Invisible Content Just for Screen Reader Users</p> <nav role="navigation"> <h2>Article Contents</h2> <ol> <li><a href="#intro">Introduction</a></li> <li><a href="#techniques">Techniques for hiding text</a></li> <li><a href="#examples">Examples</a> <ol> <li><a href="#cues">Instructional cues and indicators</a></li> <li><a href="#skipnavlinks">"Skip" links</a></li> </ol> </li> </ol> </nav> <div class="section" id="intro"> <h2>Introduction</h2> <p><span class="floatright"><img src="media/peekaboo.jpg" alt="A woman hides behind her hands."></span>There are occasional instances where content should be made available to screen reader users but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, and vice versa. Verbose cues or instructions that are only read by screen reader users usually do more harm than good. However, there are a few cases where information or meaning is apparent visually but may not be apparent to screen reader users. In these rare cases, it may be appropriate to cause content to be read by a screen reader, but have the content remain invisible to sighted users.</p> </div> <div class="section" id="techniques"> <h2>Techniques for hiding content</h2> <p>There are several mechanisms that can be used for hiding content. It's important that a technique be implemented that results in the desired outcome and accessibility.</p> <h3><code>display:none</code> or <code>visibility: hidden</code></h3> <p>These styles will hide content from all users. The content is removed from the visual flow of the page and is ignored by screen readers. <strong>Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you want hidden from all users.</strong></p> <h3><code>hidden</code> attribute</h3> <p>The HTML <code>hidden</code> attribute is relatively new and not supported on older browsers like IE11. When supported, it functions the same as CSS <code>display:none</code>—elements with this attribute will not be presented to any user.</p> <h3><code>width:0px</code>, <code>height:0px</code> or other 0 pixel sizing techniques (not recommended)</h3> <p>An element with no height or width, whether defined in HTML or CSS, is typically removed from the flow of the page, so most screen readers will not read it. <strong>Do not size content to 0 pixels if you want the content to be read by a screen reader.</strong> Content styled with <code>font-size:0px</code> or <code>line-height:0</code> may work, though the elements would still take horizontal space on the screen. All these techniques may result in search engine penalties as they may be interpreted as malicious.</p> <h3><code>text-indent: -10000px;</code></h3> <p>This approach moves the content to the left 10000 pixels - thus off the visible screen. Screen readers will still read text with this style.</p> <p>However, if a link, form control, or other focusable element is given this style, the element would be focusable, but not visible on the page—sighted keyboard users would likely be confused. This approach <em>may</em> be a viable option if the element does not contain navigable elements, though better techniques are available.</p> <h3 id="offscreen">Absolutely positioning content off-screen</h3> <p>The following are the recommended styles for visually hiding content that will be read by a screen reader.</p> <div class="code"> .sr-only {<br> position:absolute;<br> left:-10000px;<br> top:auto;<br> width:1px;<br> height:1px;<br> overflow:hidden;<br>}</div> <p>The <code>.sr-only</code> CSS class ("sr-only" meaning "screen reader only", though the class name does not really matter) should then be referenced from within the tag of the element being hidden, as shown:</p> <div class="code"> <div <b>class="sr-only"</b>>This text is hidden.</div> </div> <p>Sighted users will not see the hidden content at all—it will be hidden well to the left of the visible browser window. Because it is still part of the page content, screen readers will read it.</p> <p>Let's analyze the styles in detail. <code>position:absolute;</code> tells the browser to remove the element from the page flow and to begin positioning it. <code>left:-10000px;</code> moves the content 10000 pixels to the left. <code>top:auto;</code> tells the browser to position the content vertically at the same location it was originally. <code>width:1px;</code>, <code>height:1px;</code> and <code>overflow:hidden;</code> tell the browser to make the element one pixel in size and to visually hide everything that does not fit into that pixel—this is useful in instances where positioning may be end-user disabled, but all other styles remain enabled.</p> <div class="note"> <div class="title">Note</div> <p>Navigable elements, such as links and form controls, should not be hidden off-screen. They would still be navigable by sighted keyboard users, but would not be visible to them, unless they are styled to become visible when they receive keyboard focus.</p> </div> <h3>CSS clip</h3> <div class="code">{clip: rect(1px, 1px, 1px, 1px);<br> clip-path: inset(50%);<br> height: 1px;<br> width: 1px;<br> margin: -1px;<br> overflow: hidden;<br> padding: 0;<br> position: absolute;} </div> <p>This fairly modern technique will hide or clip content that does not fit into a 1-pixel visible area. Like off-screen content, it will be visually hidden but still readable by modern screen readers.</p> </div> <div class="section" id="examples"> <h2>Examples</h2> <p>Below are examples where off-screen or clipped content might be used to improve accessibility.</p> <div class="section" id="cues"> <div class="important"> <div class="title">Important!</div> <p><strong>Use these techniques judiciously!</strong> Keep in mind that many screen reader users have some vision—what they see and what they hear should typically be in harmony. In general, screen reader-only content should be reserved for information is apparent visually but not apparent to blind screen reader users.</p> </div> <h3>Instructional cues and indicators</h3> <p>One fairly common use case for screen reader-only content is a search text input that is readily identified visually as a search field due to its position on a page and adjacent search button, but for which adjacent text is not provided. A hidden, associated <code><label></code> element with "Search terms" (or similar) text would ensure that the field is properly identified to screen reader users.</p> <p>Another use case might be page breadcrumbs (such as the "<a href="/">Home</a> > <a href="/articles/">Articles</a> > CSS in Action..." text near the top of this page). These are a common convention due to their visual location and presentation. Because a screen reader accesses the breadcrumb links and content linearly, it may not be readily apparent to them that it is breadcrumbs. As such, hidden text of "You are here:" has been added just prior to the breadcrumbs to provide a cue/indicator to screen reader users about what follows.</p> </div> <div class="section" id="skipnavlinks"> <h3>"Skip" links</h3> <p><a href="/techniques/skipnav/">"Skip to main content" or "Skip navigation" links</a> are one of the few places where accessibility has a potentially negative impact on visual design and usability for some users. To be useful, the "skip" link should be one of the first on the page. Designers may balk at the idea of providing such a prominent link—particularly when that link will not be used by most site visitors. However, hiding the "skip" link visually using a technique above makes it much less usable to sighted keyboard users—a user group that can greatly benefit from this link.</p> <p>One way to reconcile this conflict is to visually hide the link until the user tabs to it at which point it becomes visible to sighted users.</p> <p>This technique uses two style definitions—one to visually hide the link, and another using the <code>a:focus</code> pseudo-class to visually reveal the link while it has focus.</p> <div class="code"> #skip a<br> { <br> position:absolute; <br> left:-10000px; <br> top:auto; <br> width:1px; <br> height:1px; <br> overflow:hidden;<br> } <br>  <br> #skip a:focus <br> { <br> position:static; <br> width:auto; <br> height:auto; <br> }<br> </div> <p>These styles should then be applied to the "skip" link:</p> <div class="code"> <div id="skip"><a href="#content">Skip to Main Content</a></div> </div> <p>One possible drawback to this approach is that the sudden appearance of a link that was previously invisible will be unexpected and could potentially confuse the sighted keyboard user. The WebAIM.org site address this by implementing CSS transitions to animate the focused "skip" link from above the top of the page (as opposed to off-screen left) to the top left corner of the page, then back above the page when focus is lost. This ensures that the link is highly visible on screen for a longer period of time. You can see this in action by pressing the "Tab" key with focus at the top of this page.</p> </div> </div> </article>  <aside id="articlemeta"> <div id="updated">Last updated: <time datetime="2020-09-25">Sep 25, 2020</time></div> <div id="translations"> <h2>Translations</h2> <ul> <li><a href="http://www.gabriele-strache.de/notizen/uebersetzung/css_unsichtbarer_inhalt.php"><img src="/media/common/flags/de.png" alt="">German</a> by Gabriele Strache</li> </ul> </div> <div id="related"> <h2>Related Resources</h2> <ul> <li><a href="/techniques/css">Accessible CSS</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>