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,
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:
Research shows little difference in reading speed or user preference between 10-point Times Roman, Georgia, Helvetica, or Verdana
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 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
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.
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
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
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
Website overview: Since 1996 the Study Guides and Strategies Website has been researched, authored, maintained and supported 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, digitization and reproduction of all content on the Internet can only be with permission through a licensed agreement. Linking to the Guides is encouraged!
The Study Guides and Strategies Website is intended for
students, ages middle school through returning adult, as well as their parents,
teachers and support professionals.
Its resources are intended to empower all learners without regard to
institutional and national boundaries; cultural mores and religious beliefs; race, gender and sexual orientation. Full disclaimer on use