MWAS: 5. Style Sheets.
OSU Minimum Web Accessibility Standards
(rev. 06/30/2004)
http://www.wac.ohio-state.edu/standards/
Standard 5 -- Style Sheets. Documents shall be organized so they are
readable without requiring an associated style sheet.
Note: WCAG Recommends using style sheets to control layout and presentation. This
method is strongly preferred over the use of tables due to wider compatibility with end user
devices
Examples:
5.1 -- When a document is rendered without associated style sheet, it must still be possible to
read the document.
5.2 -- Provide a text equivalent for any important image or text generated by style sheets (e.g.,
via the 'background-image', 'list-style', or 'content' properties).
Style Sheets -- Dos and Don'ts
Do Don't
Make content style sheet dependent. (Insure when style sheets are
Use style sheets whenever possible.
disabled, the page still works.)
Why: Style sheets are the win-win situation for designers and users. Designers can specify exact formatting
parameters (size, colors, weight, position) in one easily changed document and apply it to the whole site.
Users can simply "turn off" styles to view the content in its simplest form or create their own custom style
sheets to change formatting to suit their preferences.
How: Do not create content using a style sheet or scripting. Test your site both with and without style sheets
and scripting enabled in your browser.
Do Don't
Mark up content instead of using images. Use images to represent text or as a means of stylizing text.
Why: Designers who want to control the exact look of text often create text-as-images, which allow them to
"freeze" the font, size, color, and position. However, text-images do not scale well, cannot be easily resized,
are invisible to screen-readers without an ALT tag, and cannot be copied/pasted into editors and other
assistive technology.
http://www.wac.ohio-state.edu/standards/mwas5-pdf.htm (1 of 2)4/20/2004 12:02:46 PM
MWAS: 5. Style Sheets.
How: Style text using a style sheet rather than creating an image of styled text.
Get more help with style sheets , visit the Web Design Group's "Cascading Style Sheets."
Content Organization -- Dos and Don'ts
Do Don't
Use header tags (H1, H2, H3) to organize and indicate Use header tags for styling text. (Use a style sheet
content hierarchy. instead.)
Why: When used correctly, header tags can indicate the structure of the page and help writers of web text
better organize content. When used for formatting, headers become meaningless and pages may look
cluttered and disorganized when styles are turned off.
How: Organize content using headers to indicate an outline of topics and subtopics. H1=the top level,
H2=second level, and so on.
Do Don't
Use lists to group items. Use lists for indenting or spacing.
Why: Lists offer a useful way to associate like items (as in "All the best restaurants in my town." or "Places to
bike ride."). However, lists have specific functionality when rendered by screen-readers and other assistive
technology. Therefore, you should not use lists for formatting.
How: Use style sheets to indent or change the spacing between lines of text.
Get more help with organizing content, visit the W.A.I.'s "The Global Structure of an
HTML Document".
OSU Web Accessibility Center -- 2004. All documents in this guide may be reproduced and distributed in print or electronic
format only if offered at no cost to recipients. Visit the WAC online: www.wac.ohio-state.edu. Email the WAC:
webaccess@osu.edu.
http://www.wac.ohio-state.edu/standards/mwas5-pdf.htm (2 of 2)4/20/2004 12:02:46 PM