Skip to content Skip to navigation

CSS

CSS is a powerful tool. However, as you consider accessibility issues it is important to implement it wisely and take care to assess the ramifications of your decisions. Using CSS to separate content from presentation remains an essential concept to keep in mind. Remember, too, that using proper semantic markup and aligning visual layout with reading order help assistive technologies to offer a predictable reading experience for end-users. Using native HTML markup for heading levels, emphasized text, list-bullets, etc. can also help you streamline the use of CSS across your site.

As the WebAIM article, CSS and Accessibility, emphasizes:

The end user always has ultimate control over the styling of a page they view. For accessibility, we need to define accessible styles, but also allow flexibility in our designs for end user customization. The idea that web developers and designers have control over the display of their content is an illusion.

Who Does it Help?

CSS not only helps you as you design and code your site's "look and feel," but it can also help:

  • People with low vision who may choose to use their own style sheets, with their browser, to provide a personalized reading experience
  • People who are blind obtain additional information when, in rare cases, you may wish to "show" or "hide" information from screen readers
  • People with color deficiencies who need to adapt the page to accommodate them.
  • People with cognitive or learning disabilities who need to override various presentation elements and styles to create a more basic presentation.

Topics to Consider

Some areas to consider include:

  • Background images that contain content
  • Image Sprites
  • CSS generated content
  • CSS outlines

"Do"s and "Don't"s When Implementing CSS

  • Do use it, whenever possible, to retain focus rectangles (via CSS outlines) for keyboard-only users, and if you must remove outlines, do so in an accessible manner.
  • Don't make content available only to screen reader users, unless you are confident that other site visitors would not also benefit.
  • Don't convey meaningful content only via CSS.
  • Don't convey meaning via color only.

How to Check

Turn off style sheets in your browser, read through the page, and be sure that an appropriate reading order is maintained. Also, can you understand the page when color styling is removed?

Target Audience: 
Designer
Developer
Last modified: 
April 22, 2015