Stylin' for Maximum Accessibility
In this chapter, we'll explore yet another powerful tool in the repertoire of accessible design: Cascading Style Sheets (CSS). CSS is a language, like HTML, and is likewise under the auspices of the W3C. Used in tandem with HTML (or XML), CSS gives Web designers powerful tools for controlling the presentation of documents on the Web. The CSS2 specification introduced in 1998 (approximately a year and a half after CSS1 was published) includes the potential, as yet unrealized, for controlling the way documents are rendered in Braille, print, or synthetic speech. The CSS3 specification, currently in Working Draft, will give developers even more flexibility and control. But browser support for CSS has been slow in coming, and it may be some time before designers can fully exploit the power of CSS.
So far CSS has been used almost exclusively to control visual presentation, and that's what we'll focus on in this chapter. We'll show how font selection, size, and spacing work together with color and contrast to produce documents that are more readable for everyone as well as being usable by people with disabilities. As a running example throughout much of the chapter, we'll again work with the AIR judging form whose content and structure we discussed at length in Chapter 10. Now we'll show you how to manage its appearance by applying styles to it.
HTML Elements and Attributes Addressed in This Chapter
Because CSS can be associated with all HTML elements, we do not list specific elements here.
Accessibility Checkpoints and Standards Addressed in This Chapter
Web Content Accessibility Guidelines 1.0 Checkpoints
2. Don't rely on color alone.
2.1. Ensure that all information conveyed with color is also available without color, for example from context or markup. [Priority 1]
2.2. Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black-and-white screen. [Priority 2 for images, Priority 3 for text]
3. Use markup and style sheets and do so properly.
3.3. Use style sheets to control layout and presentation. [Priority 2]
3.4. Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2]
6.1. 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. [Priority 1]
Section 508 Standards, §1194.22
(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
(d) Documents shall be organized so they are readable without requiring an associated style sheet.