You never know paragraphs or floating them with text
till you try to reach them
how accessible (people) are;
but you must approach
each (person)
by the right door.
Henry Ward Beecher
English 1813 - 1887
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
These illustrate why accessible Web design is necessary,
and why this Guide is created.
Answer a few basic questions in developing your Website for focus:
Who will visit my Website 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
Our company's logo replaces the image
or 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
* 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
-
-
0
komentar