- Web pages should be readable without requiring style sheets.
Rationale
Cascading Style Sheets (CSS) describe how elements within a Web page are presented. A different style sheet can be used to control how a document page is presented on displays, in print, or perhaps how the page is pronounced or brailled. A style sheet is an elegantly designed yet simple mechanism for adding styles, such as fonts, colors, and spacing to Web documents. However, not all style sheet presentation features can be rendered satisfactorily with older browsers. Because CSS is not supported by all browsers and assistive technology, it is important that Web pages be readable without requiring style sheets.
For more information, see Cascading Style Sheets (link resides outside of ibm.com) at www.jimthatcher.com (link resides outside of ibm.com).
Techniques
The following techniques and examples support Checkpoint 11 from the IBM Web Accessibility Checklist.
The following technique is required to meet this checkpoint:
Generating Content with CSS
Text generated by style sheets is not part of the document source and will not be available to assistive technologies that access content through the Document Object Model Level 1 (DOM1). To ensure that documents can be read without style sheets, provide text equivalents for any important image or text generated by style sheets (e.g. via the background-image, list-style, or content properties). Images generated by style sheets that are purely decorative do not require text equivalents.
Tabular Positioning with CSS
CSS positioning may be used to create tabular effects. This may cause the document to be read out of order by a screen reader. So, even though the screen reader can read it, the user will not be able to understand it. Consider using a TABLE element to create the same effect.
Using CSS to convey the structure of a document
CSS can be used for any text elements to make them visually appear as headings, titles, lists, etc. If you use CSS to achieve the visual effect you want but don't identify the elements correctly in the document markup, screen reader users will not be able to understand the overall organization of the document. It will just appear to them as one big stream of text. For example, if you use CSS only to differentiate the headings, the screen reader user will not be able to jump from heading to heading to get an outline of the document. Make sure that you also identify headings with the proper hx element.
In the past, screen readers did not support the display:none and visibility:hidden styles. However, some current screen readers now support these styles. These styles are not necessarily recommended, however they do provide an acceptable alternative to using the JavaScript insertBefore technique to ensure the correct document order is preserved. Correct document order is needed to ensure proper screen reader navigation.
For background and additional information on how accessibility is affected by style sheets, see the W3C's CSS Techniques for Web Content Accessibility Guidelines (link resides outside of ibm.com). These guidelines describe in detail how style sheets might be used to create accessible pages.
Testing
Test the Web site to ensure that it complies with accessibility requirements.
Tools
Install the following tools to test this checkpoint:
- A screen reader is required.
Techniques
The following techniques are required to verify this checkpoint:
| Action | Result |
|---|---|
|
1. Disable style sheets and view the Web page to be sure all important content is still available. Use the appropriate configuration dialogs in your Web browser to disable the use of style sheets. (If you are using Microsoft Internet Explorer, see Microsoft support bulletin KB-183717 for information on how to disable the style sheets.)
|
Pass:
|
| 2. Listen to the page that has a style sheet with a screen reader |
Pass:
|
For more information on these techniques, see Additional techniques for testing Web accessibility.
©2001, 2008 IBM Corporation
Last updated January 17, 2008.