1.12 Ensure that documents can be read without style sheets
WAI checkpoint 6.1
Full WAI text: "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."
Style sheets specify the presentation of a document on the web. They can be used to control things like the typefaces, font sizes, colours and the positioning of elements on a page. It should be possible to read the content of the page, in the correct logical order, without style sheet support.
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