Accessible Web Site Design

• Many visitors to Web sites turn off images 
  to speed downloading pages, so text alternatives for these images are necessary
• Voice reading devices for the visually-impaired
  also read these text alternatives, as do text-based library terminals.
• New, portable technologies
  are also being created that are more text-based and include Personal Digital Assistants, cell phones, etc.

• Most importantly, visually-impaired visitors rely on text-alternatives 
  when accessing Web sites, and rely on clear, succinct text!

These illustrate why accessible Web design is necessary, 
and why this Guide is created.

Who will visit my Web site and Why?
Specifically write for them. Use appropriate vocabulary or define it.
Use concepts readily understood by your audience
Outline or map your content before developing it to avoid digressing. Format (design) a standard page template:
Don't assume that what you see is what other users will see.
There is little consistency between platforms, browsers, monitor sizes, designated/default fonts and colors, and even individuals' tastes as regards viewing the Internet.

• Consider a screen's real estate:
  Locate more important information left and top
  Do not assume screen resolution or monitor size

• Facilitate scanning:
  Most viewers (about 75%) first scan text and menus for information (and ignore visuals!)
  Increase detail and complexity with linked pages (fewer than 20% read word-by-word)

• Standardize presentation and navigation
  Locate logos, menus and features consistently and predictably
  Link longer pages "back to the top"
  Intuitively label links for content and page URL
  Reduce white space on main/menu pages that detail content indexes and facilitate searching

• Build content complexity through linked pages
  Pages linked should be three or less deep within the site
  Visitors should always know where they are in your site and be able to easily retrace or return

• Make text easier to read (see Guide on "Writing for the Web")
  Make liberal use of bullets, headings, sub-headings, and font size
  Separate blocks of text with white space
  Do not fill the screen with text: indent, center blocks of text with margins left and right into columns

Fonts: Use standardized or common fonts if not using "default"
Font size display is affected by monitor size, screen resolution, as well as the browser's settings. Georgia (serif), Trebuchet and Verdana (sans serif) have been specifically designed for Web display; Times Roman (serif) and Helvetica and Ariel (sans serif) are also common.

• For maximum accessibility, font sizes should be coded in relative sizes
  rather than fixed or absolute sizes. If fixed:

• Minimum font size should be 10 (PC) or 12 (Macintosh) or medium or "3"
  Use a larger font size for sites attracting small children and seniors
  (Based on the Web Content Accessibility Guidelines (WCAG) published by the Web Accessibility Initiative (WAI) which is part of the World Wide Web Consortium (W3C).
• Research shows little difference in reading speed or user preference
  between 10-point Times Roman, Georgia, Helvetica, or Verdana fonts

• Use one font for identification, directions and navigation; use another for content
  Do not use more than two per Web site

• Avoid formatting fonts (color, blinking, scrolling, FACE, etc.)
  More often than not these do not display appropriately or are found annoying

Use color judiciously

• Either specify all colors (BGCOLOR, TEXT, LINK, VLINK, and ALINK) or none
  "None" will default to the settings on your visitor's computer
  Specifying only some colors will let others default; your designated colors may be an ugly combination with these defaults...

• Use high contrasting background and text color,
  preferably light background with dark text
• Avoid backgrounds that obscure text

• Use a browser safe palette of 216 colors
  These colors are standardized for all browsers (IE, Netscape, Opera, Lynx) and platforms (PC and Macintosh).
  These are defined as "#RRGGBB" (Red, Green, Blue) paired values (00, 33, 66, 99, CC, and FF)

Images:

• Images should be no more than 75 pixels per inch
  This is the conveyable limit on the Internet; any more results in slow downloads with no increase in resolution or visibility
• Use .jpg files for images as photographs with shaded coloration;
  use .gif files for images as graphics with broad fixed color fields

• Code alternative, descriptive text to replace, and describe the content or function of all images:
  for the visually impaired, for those who turn off images in their browser,
  for libraries' Lynx browsers; for digitally-based devises; for 30% of all browsers

HTML code, with <alt> designating the alternative text:
<img src="logo.gif" alt="Our company's logo"> Our company's logo replaces the image
<img src="space.gif" alt="*"> or <img src="space.gif" alt="">A blank replaces this graphic place holder or decorative graphic

• Avoid designating images as links
  If necessary, alternative text should describe the linked page's content

• Avoid designating images as text, decorative or otherwise
  There can be little visual value given relative text sizes described above

• Avoid using transparent or colored single-pixel GIF images without good reason.
  Some people use these devices as shims to force page layout. They result in unusable pages for visitors who are browsing with image loading turned off

Use tables to format presentation and design, but

• Specify the widths of tables and table cells in percentages, not absolute pixels.
  Generally rows should "shrink" or "expand" to fit a screen size.
  Fixed width rows and increased font sizes are often not compatible
  Fixed width rows may dictate horizontal scrolling on small screens
• Avoid placing tables with <p> paragraphs or floating them with text

• Avoid multiple lines of text in cells across a row
  Text-based Lynx will read the top line across a row before going to a second line below it.

Links:

• Be as descriptive as possible
  in describing a link's content

• Use a space | vertical bar | space
  to separate links which occur consecutively

• Do not use phrases such as "click here" "enter"

• Avoid images as links
  It is visually difficult to tell they are links!

• Avoid roll-overs for drop-down menus
  It is visually difficult to tell they contain links
  It is difficult to adequately describe content of the links

Avoid

• Frames or use a non-frame alternative

• Java and Flash where possible

• Graphics that say nothing and distract from your content

• Graphic that bounce, spin, twist, or just move without being vital to or illustrative of your content

• Scrolling text

View your pages:

• Using Black and White settings
  to check for color blindness accessibility

• Deleting images
  to check for accessibility for the visually impaired and imageless technology

• Across platforms (PC, Macintosh, Linux, etc.)

• With optional browsers (Internet Explorer, Netscape, Opera, Linus

• With optional text and window sizes

Web sites can be evaluated for accessibility.

One service is located at the W3C HTML Validation Service checks documents like HTML and XHTML for conformance to W3C Recommendations and other standards
http://validator.w3.org

National Cancer Institute's Web Design and Usability Guidelines http://www.usability.gov/guidelines/ 

Great Britain's Royal National Institute for the Blind
http://www.rnib.org.uk/digital/hints.htm

Principia Hypertextica · A Mathematics Educator's View of Web Design & Accessibilty
http://world.std.com/~wij/web-design/accessibility.html

Dr. Watson http://watson.addy.com/
Dr. Watson is a free service to analyze your web page on the Internet. You give it the URL of your page and Watson will get a copy of it directly from the web server. Watson can also check out many other aspects of your site, including link validity, download speed, search engine compatibility, and link popularity. 

W3C's HTML validator validator.w3.org
The W3C validator is free to use, up to date, and an official source for standards specifications. Checks cross-platform HTML and removes proprietary browser tricks from your site. 

The University of Kentucky's "Engaging Differences" Project Web site

Feedback to improve this page
(please specify which page)

The Study Guides and Strategies web site was created and is maintained by Joe Landsberger,
academic web site developer at the University of St. Thomas (UST), St. Paul, Minnesota.  It is collaboratively maintained across institutional and national boundaries, and  last revised September 04, 2002 . 

Permission is granted to freely copy, adapt, print, transmit, and distribute
Study Guides in settings that benefit learners. On the WWW, however, please link rather than put up your own page since pages are frequently modified and improved in consideration of educational research.  No request to link is necessary.   Additional contributions and translations are warmly received.