1.12 Ensure that documents can be read without style sheets

Rationale

Style sheets are not consistently supported by different browsers and some browsers do not support them at all. If a visual layout that communicates the structure of information is controlled with style sheets and the page is viewed on a browser which does not support them, the logical structure and the information will be meaningless.

Some users over-ride the default style sheet created by the designer to replace it with another, which is more suited to their needs. For example, a user may need larger fonts, or a different colour scheme because this makes reading easier. The page may not look as nice as the designer intended but is still legible and meaningful

This guideline introduces the concept of -graceful degradation', also called -graceful transformation'. A web site degrades gracefully when the core information and functionality is available, although perhaps not as elegantly as it could be, across a range of different browser types.

Directions and Techniques

Follow WAI recommended CSS techniques for rules and borders

Use style sheets to generate content such as paragraph numbers, which help users of screen readers to keep track of their position in a document. This technique generates the content so that it is "hidden" or not presented visually. WAI recommended Cascading Style Sheet (CSS) techniques for generating content

WAI recommended CSS techniques for rules and borders

Rules and borders may convey the notion of "separation" to sighted users but that meaning cannot be inferred out of a visual context. This technique shows how to create rules and borders using Cascading Style Sheets (CSS) and how to indicate the logical order using styles.
WAI recommended techniques for rules and borders with stylesheets

Follow WAI recommended CSS techniques for using style sheet positioning and mark-up to transform gracefully

Rules and borders may convey the notion of "separation" to visually enabled users but that meaning cannot be inferred out of a visual context. This technique shows how to create rules and borders using (Cascading Style Sheets (CSS) and how to indicate the logical order using styles. WAI recommended techniques for style sheet positioning

Follow WAI recommended techniques for using style sheets to control layout and presentation which transforms gracefully

Create style sheets which control layout and presentation in a logical order, even if style sheets are not supported or are turned off in the user's browser using the WAI recommended techniques for style sheets and layout.

Use the WAI style sheet validator

This software tool can be used to validate CSS 1 and CSS 2. Open the W3C CSS Validator

How you could check for this:

Test the website on different browsers and platforms

Test the website with different browsers to determine if the site works on browsers with different style sheet capabilities. For example, test on the Macintosh and PC platforms with different browsers like Internet Explorer, Opera, Netscape and a text-only browser like Lynx.

Test the website on older browsers

Older browsers may not support style sheets so testing the web site with an older browser will show if the information and functionality is accessible to older browsers.

Disable style sheet capability on your browser and open the web site

This will show you what the site looks like and whether it functions without style sheets enabled.

Test style sheets with the W3C stylesheet validator

This software tool can be used to validate CSS 1 and CSS 2. Test a stylesheet with the W3C CSS Validator

- View WAI checkpoint 6.1