digital media access group
...excellent accessibility research and consultancy
This is a archived version of the DMAG website, but the information remains for reference. Please visit the new website for updated information.
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
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.
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
!importantand ensure that all font sizes are relative, not fixed.
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.
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! 
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/)
- WCAG Checkpoint 3.3: use style sheets to control layout and presentation (http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-style-sheets)
- 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)