Why CSS is important for accessibility

Eric Meyer presenting the keynote at @media 2006. One of the highlights of @media for me was Eric Meyer’s keynote on the past ten years of Cascading Style Sheets (CSS). I consider myself fairly early to CSS, with my first CSS based sites going live in January 2002, but it was great to hear about the really early days. (Picture from Martin Kliehm’s Flickr.)

During the keynote, Eric went into some of the reasons for it’s uptake, such as a browser being released that actually followed the spec (Mac IE5). This allowed people to see that CSS based designs could be better than the table & spacer GIFs of the time. Then the CSS Zengarden sealed it.

I think there was one thing that contributed to CSS’s development that Eric didn’t cover, which isn’t so much an omission in terms of the keynote, but really helps explain why it took off in the UK. Fairly predictably (for my site), that aspect is accessibility.

Accessibility without CSS?

It would actually be very hard work to try and fulfil the WAI guidelines without using CSS. These checkpoints are all double-A, and very difficult (or impossible) to fulfil without using CSS to separate style from content:

  • use markup rather than images to convey information: text would be pretty dull without style – and using images for text can prevent people seeing it easily.
  • Create documents that validate to published formal grammars. It is difficult to use valid code using the table-layout and spacer-gif techniques of the late ’90s.
  • Obviously this one!: Use style sheets to control layout and presentation.
  • Use header elements to convey document structure Headings would look pretty dull as big bits of text.
  • Mark up lists and list items properly. Without CSS a list would have plain bullets and odd spacing.
  • Mark up quotations. Do not use quotation markup for formatting effects. How would you create indented text without blockquotes if not for CSS?
  • Avoid deprecated features of W3C technologies. This rules out the font tags that you might have thought of using to overcome the above issues!

CSS allows you to have simple HTML markup that can be understood by anything, and advanced design for those that can use it.

Anyone can create a boring accessible site, and anyone (with an eye for design) can create a great looking inaccessible site. CSS allows the best of both.

So if you are commissioning someone to create an accessible site, or even just provide some accessibility answers for you, they had better know their code!

Next week: how to spot an accessibility fraud. (unless someone else has done it already?)


3 contributions to “Why CSS is important for accessibility

  1. “It would actually be very hard work to try and fulfil the WAI guidelines without using CSS”

    Most of the checkpoints that you’ve cited above are to do with the structure of the document and are not fulfilled by using CSS.

    It’s the structure that increases the accessibility, but here it seems like you’re saying you need CSS to create an accessible site.

  2. Hi Emma,

    You are right, but the point I’m trying to make is that CSS allows you to include that structure and have an attractive site.

    Without CSS you couldn’t have both, and therefore many organisations would have simply gone for a better designed, inaccessible site.

Comments are closed.