Section 508, 1194.22(d)

Skip Quick Links

“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.”

WCAG 1.0 Checkpoint: 6.1

Explanation

Web pages that have been marked up with good structural XHTML will "transform gracefully," such that their content can be easily read and understood even if the browser does not load or apply the CSS.

To see this in action, disable style sheets in your browser. This is usually accessible from your browser preferences, or, if you are using Firefox with the Web Developer Extension loaded, you can simply select "CSS > Disable Styles" from the menu. Now visit these two example sites:

Examples

Poor Degradation

Scientific American

Graceful Degradation

A List Apart

Techniques

  1. Hide CSS from old browsers; they would misinterpret it. Old browsers don't support the @import rule, so use the following syntax: <style type="text/css" media="screen, projection">@import "css/master.css";</style>
  2. Structure your document logically. Use XHTML to describe structure, not for layout or visuals!
  3. If you feel you must include comments for those visitors using older, non-CSS enabled browsers, include them in hidden style. It will display in older browsers but be hidden by modern browsers.
    Example:
    .hidden { display: none; }
  4. Use "alt" attributes effectively (see discussion under (a) non-text elements).
  5. Use JavaScript alternatives like the <noscript> tag.
  6. Test by disabling CSS and Javascript.

Reference

Core Techniques for Web Content Accessibility Guidelines 1.0: http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-transform-gracefully