Cascading style sheets (CSS) provide web designers with precise control over their products' visual appearance, which can be enormously beneficial for digital accessibility.
By using CSS for visual styling — rather than relying on HTML/XHTML alone — you can achieve virtually any aesthetic effect while still providing every component with correct semantics and structure. This is important because assistive technologies (AT) rely on accurate semantics to operate predictably. If your website uses HTML markup for styling, the user experience can suffer.
The best practice is to structure your website with HTML, then use CSS for visual styling. Below, we’ll explain a few advantages of this approach.
CSS allows for creative web design with proper semantics
The most important advantage of CSS is that it separates content from its presentation. As every web designer knows, presentation is important; if your website doesn’t look professional, you’ll have trouble attracting users. However, structure is just as important, and if structural elements define the presentation, you’re probably creating unnecessary problems for your users.
For example, when creating content in Wordpress, many designers choose subheadings based on the appearance of those subheadings in the Wordpress content management system (CMS). If you’re editing your content within the CMS, an <h3> tag might look less obtrusive than an <h2>, so naturally, you select the more visually appealing option.
Generally, this is bad practice. Using an <h3> tag instead of an <h2> tag can cause issues for people who use screen readers — many AT users expect subheadings to appear in sequential order, and when this isn’t the case, they may assume that they’re missing content.
Proper semantics can provide users with more control
Another important consideration: Many users override the default CSS settings. For instance, if a person has low vision, they may set their browser to display normal text with a larger font size. If a person has color vision deficiencies (also called color blindness), they may override the default webpage colors to make sure that they can read the content comfortably.
If your website uses HTML to define semantics, these users will enjoy a better experience — but if you’ve used HTML to change presentation, your content may behave unpredictably.
Related: Plain Old Semantic HTML: A Perfect Basis for Accessibility
To create accessible content, use CSS for style — not for changing meaning
Creative use of CSS can correct many common barriers. Assistive technologies will generally respect HTML semantics, even when CSS delivers semantic definitions for certain elements. However, CSS can cause issues when used incorrectly.
Some quick tips to keep in mind:
- Avoid hiding content with CSS. Usually, if content is presented visually, it should also be accessible for people who use screen readers and other assistive tech.
- Never use visual appearance alone to define meaning. For example, content shouldn’t direct users to “click the red button" without providing more information.
- Use the HTML <strong> tag to emphasize text (for example, this text is emphasized).
- Read about the best practices of semantic HTML. Always use HTML to structure content first, then use CSS to change the visual presentation.
- Avoid using CSS to change the layout or the presentation of the content in a way that affects meaning. For example, if CSS changes the position of a text box via display: grid or another attribute, screen reader users may hear the content out of its intended order.
- If you’re adding image-based content to your website, consider using CSS instead. For instance, infographics can create accessibility concerns when presented as static images, but CSS can be used to create engaging infographics that are still readable for AT users.
Finally, if you must use CSS to control content in a way that changes its meaning (such as reordering content or generating new content via CSS), provide an accessible alternative. About 1 in 5 U.S. adults have at least one disability, and accommodating these users is in your best interest. Add a prominent link to an accessible version of the webpage.
To learn more about the best practices of accessibility, contact our subject matter experts or download the Essential Guide to ADA Compliance for Websites eBook.
