digital media access group

...excellent accessibility research and consultancy

skip to main page content.

•  home  
• services  
• resources  
• research  
• about us  
• site map

home > resources > accessible design articles > why using css improves accessibility  

Why Using CSS Improves Accessibility

By Louise McIver, published 23rd February 2004.

Using an external Cascading Style Sheet (CSS) to separate the structure and presentation of your web site can greatly improve its accessibility to many people:

• Good use of CSS goes hand in hand with improved structural coding of your HTML pages. HTML elements are used for their correct purpose and not for their default style attributes; code is cleaner and more easily maintained. The W3C have identified using CSS as a priority 2 checkpoint of the Web Content Accessibility Guidelines [1].
  
  
• Text-only browsers and screen readers benefit as they can take advantage from this enhanced structural information to improving within-page browsing. For example, a screen reader can allow direct navigation between page headings, but only if HTML heading elements (e.g. <h1>) are used. If text is marked up to resemble headings, this potential benefit is lost. The same goes for table headings, the absence of which can mean a data table becomes almost incomprehensible when heard using a screen reader.
  
  
• People who experience readability problems caused by the appearance of a page can choose to view it without the style sheet or, if they know what to do, replace it with their own user-defined style sheet. You will have to ensure that this is possible; don't stop your styles from being overridden by declaring them as

  !important

  and ensure that all font sizes are relative, not fixed.
  
  
• Many people with visual impairments may be unaware of user-defined style sheets. However, using CSS allows you with relative ease to provide alternative styles of the same page content, addressing some common readability problems. For example, in addition to the 'default' style, you could offer a 'larger text size' option, or a 'light text on dark background' option. Doing this by no means meets the needs of all visual impairments, but is a relatively low-effort attempt at providing clear and obvious accessibility features.
  See www.accessify.com for an example of a variety of style sheets on offer.
  
  
• Media-specific style sheets can be linked to a site to cater for differences in its presentation in various browsers. A separate style sheet can be linked to determine how the page might sound in a text-to-speech device and a print style sheet to display the content appropriately for printer-optimised versions of a page. For example, you may want to use CSS to change the flow of information of a page in a non-graphic environment - navigation bars appearing at the end of pages (or not at all).
  NB Unfortunately, while aural style sheets might sound a good idea, in practice support for them is so poor that at the time of writing they aren't a viable accessible design technique.

Of course, it's still extremely important to ensure that your site is just as accessible and easily used when styles are turned off. This is in fact a higher priority WCAG than the one that requires you to use CSS! [2]

CSS are resource and time-savers too. As the CSS file is only downloaded once and all pages in the site use the same file, your site will be quicker to download and use. One CSS file allows a site-wide change to be made to one file; the change is then applied to every page referencing that CSS file.

For more information look at the W3C's note 'Accessibility Features of CSS' - http://www.w3.org/TR/CSS-access.

And for design tips and inspiration on using CSS to provide visually exciting pages, check out these sites:

• A List Apart (http://www.alistapart.com)
• CSS Zen Garden (http://www.csszengarden.com/)
• Eric Meyer (http://www.ericmeyeroncss.com/)
• Teach yourself CSS in 24 hours, Kynn Bartlett (http://cssin24hours.com/)
• Jeffrey Zeldman's book(http://www.zeldman.com/dwws/)

References

1. WCAG Checkpoint 3.3: use style sheets to control layout and presentation (http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-style-sheets)
2. Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document. (http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-order-style-sheets)