CSS & Accessibility

Here’s something that’s been playing on my mind recently. What role can CSS alone play in making websites accessible? WCAG says to separate content from presentation, so the implication is that using CSS for layout, colours, fonts, etc. makes a page more accessible. But what about more specific aspects?

With HTML there are methodologies and elements we should be using to aid accessibility: label elements with form controls, scope and summary attributes in tables, meaningful alt text, and so on. But can the same be said of CSS? Are there specific approaches or styles we should be applying to aid accessibility, and what should we avoid?

It’s a tricky question, because it’s hard to take CSS in isolation. Certain HTML accessibility techniques can be applied because of CSS – marking up site navigation as a list, for example. Anyhow, here’s a jumble of thoughts:

  • Having CSS in a separate file or files, thus separating presentation from content (assumming the content contains no presentational mark-up).
  • Using CSS for layout (is that rife with accessibility issues in itself?)
  • Including a text colour with a background colour (in case Faruk turns up with his user style sheet). Similarly, including background colours with background images.
  • Relative text sizing (with ems for example). This shouldn’t be necessary, and arguably isn’t, but relative font sizing is specified within WCAG.
  • Using CSS for zoom and high contrast layouts. Is this a should, a could or a maybe?
  • Image replacement. They are CSS techniques, but do they aid accessibility? I’d say yes, in certain circumstances (the new TIP is particularly interesting).
  • Valid CSS. If it’s important for HTML to valid, is it equally important for CSS to be valid? (For example, I’ve been known to use non-standard IE/Win filters.)
  • Use different style sheets for different media – probably more theory than reality.
  • Contrast and non-reliance on colour. I thought I’d mention this before someone else did, but its more a design choice and not specific to CSS.

It’s a short list thus far – have I missed out some important aspects of using CSS for (and against) accessibility?