Your Study Guides and Strategies content starts here!

You never know till you
try to reach them
how accessible (people) are;
but you must approach
each by the right door.
Henry Ward Beecher, 1813 - 1887
American clergyman/abolitionist


The online learning series

Basics of Website design and accessibility

Standards in designing Web pages
can accommodate a wide range of devices, whether handheld or desktop:

  • Portable and mobile technologies
    are more text-based and include Personal Digital Assistants (PDA), smart and cell phones, Blackberries, etc.
  • Some visitors to Web sites turn off images
    to speed downloading pages, so text alternatives for images are necessary
  • Visually-impaired visitors rely on text-alternatives
    when accessing Web sites, and rely on clear, succinct text
  • Voice reading devices for the visually-impaired
    also read these text alternatives, as do text-based library terminals

This exercise illustrates elements of accessible Web design:



Answer these questions in developing your Website:

Audience: who will visit my Website and why?
Specifically write for them. Define and use appropriate vocabulary.
Use concepts readily understood by your audience
Outline or map your content to keep a clear focus on the important content and its navigation

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
    Webpages should be linked 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 but consistent 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

    In HTML code, <alt> designates the alternative text for an image.
    <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 conservatively to format presentation and design

  • Generally 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
  • See also Specify the widths of tables and table cells in percentages, not absolute pixels.

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
  • Graphics 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

Online learning/communicating:

Online learning: questions | Distance learning | Mobile learning (M-learning) | Taking online tests |
Netiquette | Basics: Website development | Basics: Website design | Making your website popular

References:
Accessibility, University of Minnesota Duluth

Bobby WorldWide is a tool for Web page authors. It helps them identify changes to their pages so users with disabilities can more easily use their Web pages.
Dr. Watson 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.
National Cancer Institute's Web Design and Usability Guidelines
WebAIM Web Accessibility In Mind
W3C's HTML 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.
Web Design Group