Cascading Style Sheets

Lotus Notes checkpoint 6.3

Web pages must 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 Domino 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, Web pages must be readable without requiring style sheets.

This checkpoint only applies to applications that will be deployed on the Web.

Development techniques

The following techniques are the minimum required to meet Checkpoint 6.3 from the Lotus Notes Application Accessibility Checklist.

Provide text equivalents for important images or text generated by style sheets. 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). Images generated by style sheets that are purely decorative do not require text equivalents.
Do not use CSS positioning to create tabular effects. This may cause the document to be read out of order by a screen reader making it inaccessible to some users.
Do not use CSS to convey structure in 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.

For additional information on accessibility and CSS, see the following resources:

CSS Techniques for Web Content Accessibility Guidelines (link resides outside of ibm.com) from the W3C that describe how style sheets might be used to create accessible pages.
A Cascading Style Sheets tutorial (link resides outside of ibm.com) from Jim Thatcher.
Creating Accessible Cascading Style Sheets (link resides outside of ibm.com) from WebAIM.

Testing techniques

Test the application to ensure that it complies with accessibility requirements.

Tools

Install the following tools to test this checkpoint:

A screen reader is required to test applications that support the Domino Web user interface.

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.) After style sheets have been disabled in the Web browser, verify that the information on the page is readable and understandable.	Pass: All information on the Web page is readable and no content is lost when the style sheet is turned off. Fail: Some or all content on the Web page is missing or unreadable when the style sheet is turned off.
2.	View the pages with style sheets with a screen reader. Verify the screen reader reads the page content, even though the visual presentation effects are ignored by the browser.	Pass: A screen reader reads the page content even though visual presentation effects are ignored by HPR. Fail: The screen reader cannot read some or all content on the Web page.

Last updated February 08, 2008.

Checklist