Web pages Images Conferencing Chat Audio/Video PowerPoint PDF Advanced Multimedia

Students Affected:

Principles: Provide Meaningful Alternatives, Separate Presentation from Content, Degrade Gracefully

What It Means

"Style" refers to the appearance of text, including font face, size, and color. The styles you choose can impact the ability of students to interpret your Web page. Students should be able to change your text styles to meet their needs or preferences.

If You Do It Wrong: You may limit students' flexibility to change the appearance of text. For example, if you pre-define a specific point size, a student with low vision may not be able to enlarge the text to make it easier to read. You may also create accessibility barriers if you rely on certain text styles (like colors or boldface) to convey important information. For example, users who cannot see the color red are unable to use a study guide if "all correct answers are marked in red."

Use of colors to convey content may also affect users of Web-enabled devices that do not display color (for example, cell phones and PDAs).

If You Do It Right: Students with or without the ability to see certain styles can understand your Web page and/or alter the text styles to make them easier to read.

How it Works

1. Don't depend on certain styles—especially color—as the only way to make certain items stand out. Always supplement color with a non-visual cue—for example, additional text.
   
   

   Example Chemistry 101 Study Guide (correct answers are marked in red) 1. H is the symbol for: Helium Hydrogen (correct answer) Humidity Hassium 2. Ba is the symbol for: Boron Bromine Barium (correct answer) Bismuth

   
   
2. High contrast between text and background colors makes Web pages easier to read.
   
   
3. Relative text sizes based on the browser defaults are much more accessible than specific point sizes.
   
   
4. Whenever possible, use Cascading Style Sheets (CSS) for presentation instead of HTML tags.
   
   

   Styles can be changed using HTML tags or Cascading Style Sheets (CSS). HTML Tags: Each HTML tag has a default style for displaying that tag. For example, the <strong> tag is shown as bold text (and is spoken louder on some screen readers). Microsoft Front Page and Netscape Composer use HTML tags to change the appearance of text. For example, when you make text bold, use a different typeface, or create a Heading, you set HTML tags. Cascading Style Sheets: You can override default HTML styles using Cascading Style Sheets (CSS). CSS allows you to separate the content of your page from the presentation, allowing for greater accessibility.

   
   
5. If you use CSS, make sure your page can still be read if the style sheet is removed.
   
   

   Many online resources, tutorials, and books can help you learn how to use CSS styles. One place to start is the Web Design Group Guide to Cascading Style Sheets.

Testing Tips

• Print a black-and-white copy of the page (not grayscale) to check for color dependency.
  
  

  You can also preview your Web page without defined colors in the free Opera Web browser, or visit the Vischeck Web site to see what your page looks like to a person who is colorblind.

  
  
• Disable CSS and HTML styles in your browser (or use an older browser such as Lynx or Netscape 3) and see if your page is understandable.
  
  

  To disable styles in the Opera browser: Open your Web page in the Opera browser. Select File → Preferences.... Click Page Style. Under Author Mode, deselect the Page fonts and colors and My fonts and colors checkboxes.

  
  

© 1996-2005 University of Maryland University College • 3501 University Blvd. East, Adelphi, MD 20783 • USA
Phone: 800-888-UMUC (800-888-8682)