Implementing Rule D
§ 1194.22 Web-based intranet and internet information and applications.
(d) Documents shall be organized so they are readable without requiring an associated style sheet.
- What Is "Readable"?
- Readable by What?
- What Is an Associated Style Sheet?
- Use Style Sheets?
- Testing without Style Sheets
What Is "Readable"?
The legal definition of "readable" has not been clarified. In the narrow sense, "readable" means it can be read, that is, letters can be distinguished. In the broad sense, the information rendered without the style sheet is organized on the screen so that associated elements correctly align as well as are readable.
Readable by What?
There are a number of different technologies that access a Web page. These include the commonly available graphical browsers, such as Internet Explorer and Netscape Navigator, as well as linear browsers, such as Lynx, and text-to-speech readers, such as JAWS. All of these browsers start at the top of the page and move through the page to the bottom when reading it.
This requires that one place elements in the HTML
in the order in which they are to be read.
If elements are included out of order, but are rendered by a browser in the correct order
as a result of positioning with styles, they may not make much sense to viewers using a sequential (or linear) browser.
If a style sheet positions elements using <div> blocks that are floated, the
blocks need to be encoded in the page in the order that they are normally to be read.
What Is an Associated Style Sheet?
In the strict sense, an associated style sheet is a separate file of file type ".css"
which contains the style definitions for the page. It is referenced in the
<head> section of the document through either the
<link> tag or the <style> tag using
the @import statement.
In the broader sense, this also includes internal styles (<style> tags inside a document,
or applied through the style attribute on an individual element, or applied through deprecated tags).
I don't know how rigorously this rule is interpreted. For example, if styles are used to vertically align an element
in a table cell, and the styles are turned off, browsers such as Internet Explorer position the cell contents in the
middle of the cell, rather than aligned at the top (which the style would do). This has the effect of rending
the cell contents somewhat messy, but, technically still readable with some scrolling.
Use Style Sheets?
This rule does not mean one shouldn't use style sheets. Style sheets are terrific ways of presenting properly marked up information. The rule seems to require that when the style sheet is removed, that information can still be read.
Again, how broadly or narrowly to interpret this rule depends on how broadly or narrowly one defines "style sheets", and, how broadly or narrowly one defines "readable".
Testing without Style Sheets
If your page is designed well, and styles are turned off, it should display like a text-only page. To turn off styles in your browser (Internet Explorer), "push" the "Accessibility" button and check the "Ignore colors...", "Ignore font styles...", and "Ignore font sizes..." options. These turn off the font and background colors, styles, and font sizes.
There are some problems, however. If you are using your style sheet to set alignment for table columns, and have large amounts of text in the columns, then when you remove your style sheet, your alignment will be turned off also, and your page may not display with the information nicely aligned. Internet Explorer version 5 defaults vertical alignment to the center of a cell, rather than to the top. Technically, this is "readable", although it is rather ugly and somewhat less usable.
Skip links to other Section 508 Rules and return to main content