Webstandards, Accessibility and Usability at Penn State

This page includes information about C.S.S. (Cascading Style Sheets) for accessibility. See the list of C.S.S. style sheet tutorials if you are interested in learning more about style sheets. This site also includes a page on C.S.S. Rollovers.

This Page

1. Synopsis
2. Some Benefits of Style sheets
3. When Styling is Inaccessible
4. Links to CSS Tutorials

Synopsis

1. The use of style sheets to provide formatting has several accessibility advantages including the following:

   1. You can use CSS to improve legibility by increasing line spacing, increasing left/right margins and by specifying fonts designed for a monitor.
   2. You can replace less accessible image links and Javascript rollovers with text links combined with CSS styles. Text links are more accessible because they do not "pixellate" when text is zoomed, but retain crisp edges.
   3. Users with color blindness or low visibility conditions can implement a custom style sheet to set formatting to one that suits their needs better.
   4. In some cases the use of Style sheets to specify background colors and borders can improve the accessibility of layouts and decrease reliance on HTML tables for layouts.
   5. It is easier to re-design content for alternate media such as printing and mobile technology (e.g. iPhone, Palm pilots and cell phones) via alternate Style sheets

   See some code examples below.

2. However, care must be taken that Web sites are still readable on visual browsers with style sheets turned off. See a later section for details on what to avoid.

   SECTION 508 - Documents shall be organized so they are readable without requiring an associated style sheet.

   NOTE: The iCita Firefox Accessibility Toolbar will allow you to display your Web page without your CSS markup.

3. Do not use "visibility: hidden" to hide text from visual browsers; it also hides it from screen readers. Use color (e.g. white on white) or negative margin positioning to 1px to hide text from visual browsers. See Accessible Methods for Hiding Text for details.

4. Remember that any tag can be styled. This includes accessibility tags such as TH, CAPTION, STRONG, FIELDSET, LABEL, and even B, I and OPTION or SELECT.

5. Avoid using float:right, since it typically requires coders to place elements which will be displayed on the right BEFORE elements placed on the left. Screen readers will read files in code order, not in layout order. A layout table may sometimes be more accessible than complicated CSS layouts.

6. If you use absolute positioning, be sure that the positioned text is in logical order so that text will be coherent with CSS disabled.

7. It is also important to preview styled sheets in several browsers. Implementation is still not standard across all browsers. Some text formatting may not occur in a particular browser, and in the worst case scenario, there may be overlapping text blocks.

8. Style sheet commands should be stored in another .css text file, not embedded in the HTML document itself. This allows users to completely override your style sheet

9. C.S.S. commands for fixing absolute font sizes should be avoided. Use relative font size scales instead.

10. Care should be taken that color schemes and backgrounds are accessible.

Top of Page

Some Benefits of Style sheets

Style sheets are designed to allow you to globally specify colors, fonts and backgrounds for an entire Web site. For instance, if you specify that all H1 tags should be centered, then you do not need to repeat the ALIGN="center" tag on every page.

Here are some examples of how Style sheets can improve accessibility and reduce code maintenance.

Line Spacing and Margins

The generic specifications for margin and line spacing are not optimized for screen legibility. Compare the following two paragraphs - one style for legibility and one with no styling.

With CSS

Increased side margins, Verdana specified and line spacing increased slightly.

SAMPLE PARAGRAPH: Style sheets are designed to allow you to globally specify colors, fonts and backgrounds for an entire Web site. For instance, if you specify that all H1 tags should be centered, then you do not need to repeat the ALIGN="center" tag on every page.

Without CSS

Text goes to edge of screen, is single spaced and in Times New Roman (bad for monitors).

SAMPLE PARAGRAPH: Style sheets are designed to allow you to globally specify colors, fonts and backgrounds for an entire Web site. For instance, if you specify that all H1 tags should be centered, then you do not need to repeat the ALIGN="center" tag on every page.

Coloring and aligning H Tags

Sample H1 - Centered and colored blue

Creating Formatting Div's Resembling Tables

This is a centered pink div with dotted black border. Actually it's a P with a style specification.

NOTE: Data tables are still be the best option for presenting tabular data.

Top of Page

When Styling is Inaccessible

Styling can become inaccessible when style sheet commands are mixed with older HTML formatting tags. When Style sheets are turned on, the result may be readable. But with Style sheets turned off, only the older HTML formatting is read and the page may become unreadable. For example:

Positioning and Float: Right

Some sites use different "floats" to position content without tables. However, some style attributes, such as float: right cause text to place in an order different from that of the HTML file. For instance the following site uses float: right to position the gray box to the right of a list of links.

Page with Float:Right Positioning

But in the code, the list in the gray box actually comes first. When CSS is disabled, you can see that list above the links. Fortuniately, the text can be read in either order.

With CSS Removed. "Right" is on Top

Mixing Styles with Old Formatting Tags

This Web site has a black linen background with a pale rose area in the center with dark text. The color contrast is acceptable.

Stitching site with blackbaground and pink text area

The designer used CSS for the pink area and an HTML tag to specify the black linen background as <body background="blacklinen.gif">.

Top of Page

Links to C.S.S.Tutorials

Basics

• University of Oregon Style Sheet Chart
• Web Reference - Understanding the Visual Box Model
• Web Reference - Making Headlines with Style Sheets
• W3C Schools
• W3C CSS 2 Reference (not all tags supported on all browsers)

Additional Tutorials

• I.T.S. Web Developer Resources
• del.icio.us: psu+css
• CSS Style Sheets