Skip header information, go directly to content

mwas standard 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

Use style sheets whenever possible.

Make content style sheet dependent. (Insure when style sheets are 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.

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."

An excellent online tutorial is available from the W3 Schools: "Introduction to CSS."

For more information on using relative units for CSS sizes, see Big Baer.com: "Big Baer Explains CSS Font-Size."

Content Organization -- Dos and Don'ts

Do Don't

Use header tags (H1, H2, H3) to organize and indicate content hierarchy.

Use header tags for styling text. (Use a style sheet 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".

previousPrevious Nextnext

Top of Page || Return to Index
View/print in PDF format. (Acrobat Reader required.)
Ohio State University