Standards in designing Web pages
can
accommodate a wide range of devices, whether
handheld or desktop:
- 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
- New, portable technologies
are more text-based and include Personal Digital Assistants, cell phones, etc.
- Some visitors to Web sites turn off images
to speed downloading pages, so text alternatives for images are necessary
These illustrate why accessible Web design is necessary,
and why this Guide is created.
Answer a few basic questions for focus:
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 to keep a clear focus on the important content
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
conservatively to format presentation and
design
- Generally
pecify 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
- 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
References:
Accessibility, University of Minnesota Duluth
Bobby WorldWide
http://www.cast.org/bobby/
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
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.
National Cancer
Institute's Web Design and
Usability Guidelines
http://www.usability.gov/guidelines/
WebAIM Web
Accessibility In Mind
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.
Web Design
Group
http://www.htmlhelp.com/design/accessibility/tips.htm
Website overview: Since 1996 the
Study Guides and Strategies web site
has been researched, authored, maintained and supported by Joe Landsberger
as an international, learner-centric, educational public service. Permission is granted to freely copy, adapt,
and distribute individual Study Guides in print format in non-commercial educational settings that benefit learners. Please be aware that the Guides welcome, and are under, continuous review and revision. For that reason, reproduction of all content on the Internet
can only be with permission through a licensed
agreement. No request to link to the Web site is necessary.
Visitor Center
Projects, news, metrics, copyright, licensing
Joe's
professional and personal webpages
|
