CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Accessible CSS</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>Accessible CSS</h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/articles/">Articles</a> > Accessible CSS</p> <nav role="navigation"> <h2>Article Contents</h2> <ol> <li><a href="#intro">Introduction</a></li> <li><a href="#sep">Separating Content from Presentation</a></li> <li><a href="#layout">Controlling the Visual Layout</a></li> <li><a href="#hiding">Hiding Content with CSS</a></li> <li><a href="#presenting">Presenting Content and Meaning with CSS</a></li> </ol> </nav> <div class="section" id="intro"> <h2>Introduction</h2> <p>Cascading Style Sheets, or CSS, allow you to modify display and style characteristics of HTML elements. All web browsers have a built-in style sheet that defines the default styling for web page content. For instance, the <code><p></code> element has default styles for margin, font face, font size, etc. The <code><strong></code>, <code><table></code>, and every other HTML tag is defined in this style sheet; their size, color, position, and other characteristics are all defined within it. When a page author defines their own styles, they can override this built-in style sheet and tell the browser to display elements in a different way.</p> <p>CSS is called "cascading" because there is a hierarchy or precedence for how styles are applied—the browser default styles are overridden by styles in an external style sheet (usually a .css file) which are overridden by internal styles (typically found in the <code><head></code> section of a page) which are overridden by element styles (applied directly to a page element).</p> <div class="important"> <div class="title">Important</div> <p>To improve accessibility, end users may change browser default styles and may define custom styles that override any other styles in the "cascade". Pages must be adaptable and flexible to end user style customizations.</p> </div> <p>Why would an end user define their own styles? A user with <a href="/articles/visual/lowvision">low vision</a> may define a much larger text size. A user with <a href="/articles/visual/colorblind">color deficiency</a> or low vision might override page colors to enforce certain colors or high contrast. A user with <a href="/articles/cognitive/">cognitive or learning disabilities</a> might override positioning or disable images to ensure a more basic presentation. A user with dyslexia might change fonts and text spacing for better readability.</p> <p>Because CSS is primarily about visual presentation, most CSS does not impact what a screen reader will read. However, some styles, such as <code>display:none</code> and <code>visibility:hidden</code> will cause <a href="invisiblecontent/">content to be ignored by screen readers</a>. Pseudo-content defined with <code>::before</code> and <code>::after</code> will be read by screen readers.</p> </div> <div class="section" id="sep"> <h2>Separating Content from Presentation</h2> <p>A primary benefit of CSS is that authors can separate content from its presentation. <em>Content</em> means the text, headings, list, regions, images, and other elements defined in HTML markup, along with their inherent semantics or meanings. <em>Presentation</em> means the way in which content is displayed as defined by CSS. By ensuring content is in HTML and presentation in CSS, if someone disables or overrides CSS, the content and semantics should still be fully accessible.</p> <div class="note"> <div class="title">Note</div> <p>The Web Content Accessibility Guidelines (WCAG) requires that visual information, meaning, and relationships are also defined programmatically in markup or in text.</p> </div> </div> <div class="section" id="layout"> <h2>Controlling the Visual Layout</h2> <p>CSS <code>float</code>, <code>display</code> (especially with <code>display: grid</code>), etc. provide great control over the positioning of elements within a page, regardless of the order of those elements in the HTML code. The underlying source code order determines the screen reader reading order and the keyboard navigation order. These should typically match the visual layout and presentation order. Both should be logical and intuitive, and generally should align.</p> <div class="note"> <div class="title">Note</div> <p>WCAG requires that the reading sequence and the navigation order of elements align with the visual meaning and sequence. Someone exploring the page content via a screen reader or keyboard should typically encounter content in the same order as someone reading the content visually (typically left to right, top to bottom).</p> </div> </div> <div class="section" id="hiding"> <h2>Hiding Content With CSS</h2> <p>In almost all cases, if content is presented visually in a page, it should be accessible to screen reader users. Similarly, content that is hidden visually with CSS should typically not be accessible to screen reader users. There are, however, exceptions to this, primarily for things that might make sense visually, but for which a succinct explanation or instruction might be useful to screen reader users.</p> <div class="note"> <div class="title">Note</div> <p>The techniques for hiding content using CSS can be found in <a href="invisiblecontent/">CSS in Action: Invisible Content Just for Screen Reader Users</a></p> </div> </div> <div class="section" id="presenting"> <h2>Presenting Content and Meaning with CSS</h2> <p>As opposed to hiding content with CSS, sometimes content or meaning is presented exclusively with CSS. This might include using CSS to do the following:</p> <ul> <li>Define background images that present content</li> <li>Control layout or presentation in a way that affects meaning</li> <li>Use color alone to convey meaning</li> <li>Generate content with CSS</li> </ul> <p>These techniques should generally be avoided. However, in situations where CSS is used to present information, content, or meaning that is not otherwise accessible, an accessible alternative must be provided.</p> <p>For example, CSS background images cannot be given alternative text directly (though a CSS <code>alt</code> property is currently in development). If an image conveys content, it should optimally be placed into content by using the <code>img</code> element with an appropriate <code>alt</code> attribute value. If this is not possible, <a href="invisiblecontent/">hidden or off-screen text</a> (or perhaps <a href="../aria/">ARIA</a>) could be used to convey the content of the image to users that cannot see it.</p> <p>Always use native HTML markup to provide the necessary semantic content and meaning, then use CSS to enhance and change the default styles.</p> <div class="example"> <div class="title">Heading Example</div> <p>The sentence below is styled to look like a heading, but does not provide the semantics or functionality of a heading.</p> <p style="font-weight:bold;font-size:200%;font-family:Arial">This is Not a Heading. It Just Looks Like One.</p> <p>The incorrect markup which produced this example is as follows:</p> <p><code><p style="font-weight: bold; font-size: 200%; font-family: Arial;">This is NOT a Heading. It Just Looks Like One.</p></code></p> <p>The correct markup, assuming this was a second-level heading, would be:</p> <p><code><h2>This IS a Heading and It Looks Like One Too.</h2></code></p> <p>If the defaults styles of the <code>h2</code> were not desired, CSS could be used to change the visual appearance while maintaining the underlying heading semantics and functionality.</p> </div> <div class="example"> <div class="title">Emphasis Example</div> <p>The word "extremely" in the sentenced below is not emphasized in the markup. It is only styled to appear bold, so would not be emphasized by a screen reader.</p> <p class="samp">It is <span style="font-weight:bold;">extremely</span> important to use CSS correctly!</p> <p>The incorrect code which produced this example is as follows:</p> <p><code><p>It is <span style="font-weight:bold;">extremely</span> important to use CSS correctly!</p></code></p> <p>The correct markup would be:</p> <p><code><p>It is <strong>extremely</strong> important to use CSS correctly!</p></code></p> </div> </div> </article>  <aside id="articlemeta"> <div id="updated">Last updated: <time datetime="2020-10-27">Oct 27, 2020</time></div> <div id="translations"> <h2>Translations</h2> <ul> <li><a href="http://studienwahl-deutschland.de/iap/barrierefreies-css/"><img src="/media/common/flags/de.png" alt="">German</a></li> </ul> </div> <div id="related"> <h2>Related Resources</h2> <ul> <li><a href="/techniques/css/invisiblecontent/">CSS in Action: Invisible Content Just for Screen Reader Users</a></li> <li><a href="/articles/design/">Design Considerations</a></li> <li><a href="/techniques/semanticstructure/">Semantic Structure</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>