Accessibility

Per page size, downloading time, HTML validation, Multimedia/images use, Content organization

Per page size and downloading time

The concept of "page size" is defined as the sum of the file sizes for all the elements that make up a page, including the defining HTML file as well as all embedded objects (e.g., image files with GIF and JPG pictures).
The key to sizing webpages effectively is the length of time it takes to download a page from the server and display it in the browser window. The time from when a user requests a page and when it has displayed completely is referred to as response time

In general, response time:

· Must be within 0.1 second to make system "feel interactive" (i.e., sensed as an immediate response)
· Must be less than 1 second in order to fit into the user's chain of thought
· Must be less than 10 seconds to keep user's attention; otherwise, the user moves his/her mind to something else, starts doing something else - or bails out of your website!

Here are the opinions on download times for the most important or most useful parts of most types of page and especially for home page, assuming a 56K modem is used:

Download time Usability

· Under 10 seconds - Excellent. Some users will still be impatient but very few sites will load faster.
· 10 to 15 seconds - Good
· 15 to 20 second - not bad, but could be better. if you can't speed this up, make sure the user gets other benefits - good navigation, easy to see what each page is about, and above all good content (preferably unique).
· 20 to 30 seconds - Poor. If users think they can get similar content faster elsewhere, they'll leave your site and go somewhere else.
· Over 30 second - Unacceptable unless the page is a very special case.

Validate HTML
Make sure you don't have extra code in your page. If you have converted a document from Microsoft Office, for example, you can strip out all the formatting code that the conversion puts in and reduce your page size up to 80 percent.
Make sure you use CSS to format your HTML elements instead of using ,and other obsolete tags, and switch to a table-less format to reduce all the extra code needed for tables (remember, those and tags with their attributes start bytes to your page pretty quickly). It may help to think of it as a ratio of content to code: the higher the ratio (more content, less code), the better.

· http://validator.w3.org/#validate-by-uri

Some of the major accessibility issues to be dealt with include:
• Provide text equivalents for non-text elements;
• Ensure that scripts allow accessibility
• Provide frame titles;
• Enable users to skip repetitive navigation links;
• Ensure that plug-ins and applets meet the requirements for accessibility and
• Synchronize all multimedia elements.

Where it is not possible to ensure that all pages of a site are accessible, designers should provide equivalent information to ensure that all users have equal access to all information.

Multimedia/images/Animation used

1) To improve accessibility, provide client side image maps instead of server-side image maps.
Client-side image maps can be made fully accessible, whereas server -side image maps cannot be made accessible without employing a text alternative for each section of the map. To make client-side image maps accessible, each region within the map should be assigned alt text that can be read by a screen reader or other assistive device. Designers must ensure that redundant text links are provided for each active region of a server-side image map.

2) Use video, animation, and audio only when they help to convey, or are supportive of the website’s message or other content.
Multimedia elements (such as video, animation, and audio) can easily capture the attention of users; therefore, it is important to have clear and useful reasons for using multimedia to avoid unnecessarily distracting users. Some multimedia elements may take a long time to download, so it is important that they be worth the wait. Used productively, multimedia can add great value to a site’s content and help direct users’ attention to the most important information and in the order that it is most useful.

3) Do not fill the entire first screen with one image if there are screens of text information below the fold.
Large graphics that cover most of the screen at the top of the page
Suggest to users that there is no more information below the graphic.

4) Use images only when they are critical to the success of a website.
Ensure that a website’s graphics add value and increase the clarity of the information on the site. Certain graphics can make some websites much more interesting for users, and users may be willing to wait a few extra seconds for them to load. Users tend to be most frustrated if they wait several seconds for a graphic to download, and then find that the image does not add any value. Some decorative graphics are acceptable when they do not distract the user.

5) Ensure that all clickable images are either labeled or readily understood by typical users.
Occasional or infrequent users may not use an image enough to
Understand or remember its meaning. Ensure that images and their associated text are close together so that users can integrate and effectively use them together. Additionally, alt text should accompany every clickable image.

6) Take steps to ensure that images on the website do not slow page download times unnecessarily.
User frustration increases as the length of time spent interacting with a system increases. Users tolerate less delay if they believe the task should be easy for the computer. One study reported that users rated latencies of up to five seconds as “good.” Delays over ten seconds were rated as “poor.” Users rate pages with long delays as being less interesting and more difficult to scan.
To speed download times, use several small images rather than a single large image on a page; use interlacing or progressive images; and use several of the same images. Designers should also minimize the number of different colors used in an image and put HEIGHT and WIDTH pixel dimension tags in an image reference. To achieve faster response time for users with dial-up modems, limit page size to less than 30,000 bytes.

7) When viewing full-size images is not critical, first provide a thumbnail of the image.
By providing thumbnails of larger images, users can decide whether they want to wait for the full image to load. By using
Thumbnails, those who do not need or want to see the full image are not slowed down by large image downloads. Link the thumbnail image to the full-size copy.

8) Use background images sparingly and make sure they are simple, especially if they are used behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates. If background images must be employed, use small, simple images with “tiling,” and/or keep the image resolution as low as possible.

9) Provide an introductory explanation for animation prior to it being viewed.
Providing an explanation of animation before it begins will help
Users better integrate the animation and associated content. In other words, briefly explain to users what they are about to see before they see it. Also, allow animation to be user-controlled. The user should be able to pause, stop, replay, or ignore animation or other multimedia elements.

10) Optimize your graphics. Use only .gif and .jpg formats. Make your image files as small as possible while maintaining acceptable quality. Use a free online graphics optimization tool.

11) Use thumbnails (miniature versions of a picture) and make them clickable to the actual size picture.

12) Avoid graphics that look like ads. People ignore them.

13) Use the ALT attribute on pictures, even the image is not a link. It helps users with disabilities and people who have turned off graphics.

14) OnMouseOver and onMouseOut – These two event handlers are often used to swap images on a web page when the mouse passes over an image n Do not interfere with accessibility – a screen reader simply bypasses them entirely n Information (if any) provided by these event handlers should be duplicated through other means

15) Multimedia

· Give size of file after link text
· Mention file type if not HTML
· Mention software needs for file type
· Add some text to make it meaningful to users without additional software
· Any content presented in multimedia should have an alternate presentation for accessibility.

16) Java Script - Limit use of this technology as much as possible, as they tend to slow down the loading of the page. Slicing and dicing graphics. With the widespread use of CSS, avoid any web designer that still 'slices and dices' graphics and drops them into a table. That was a novel technique...in the late 1990's. Not anymore.

17) Active X Components, Flash, etc. Avoid any technology like these that may not be compatible with all browsers.

Content organization and Language

Content is the most important part of a website. If the content does not provide the information needed by users, the website will provide little value no matter how easy it is to use the site.

1) When preparing prose content for a website, use familiar words and avoid the use of jargon. If acronyms and abbreviations must be used, ensure that they are clearly understood by typical users and defined on the page.

2) Minimize the number of words in a sentence and sentences in a
paragraph. Make the first sentence (the topic sentence) of each
paragraph descriptive of the remainder of the paragraph. State clearly the temporal sequence of instructions. Also, use upper- and lowercase letters appropriately, write in an affirmative, active voice, and limit prose text on navigation pages. To enhance the readability of prose text, a sentence should not contain more than twenty words. A paragraph should not contain more than six sentences.

3) Write 50% less text then you would in a similar publication.
Use bulleted lists and paragraph breaks to separate your content into smaller, more manageable chunks. Limit your font choices to a maximum of two. One for headings and one for the body text.

4) Black text on white background. Avoid any other color scheme for the main content.

5) Remember that most of your important content (like the links and content headings) ought to be located toward the top of your page.

6) Use a pyramid model when organizing your articles. Place your quick facts at the top of the article, with more details in later paragraphs.

7) Do not use unfamiliar or undefined acronyms or abbreviations on websites.
Acronyms and abbreviations should be used sparingly and must be defined in order to be understood by all users. It is important to
remember that users who are new to a topic are likely to be unfamiliar with the topic’s related acronyms and abbreviations. Use the following format when defining acronyms or abbreviations: Physician Data Query (PDQ).Acronyms and abbreviations are typically defined on first mention, but remember that users may easily miss the definition if they scroll past it or enter the page below where the acronym or abbreviation is defined.

8) Include the primary theme of a paragraph, and the scope of what it covers, in the first sentence of each paragraph.
Users tend to skim the first one or two sentences of each paragraph when scanning text.

9) As a general rule, write instructions in affirmative statements rather than negative statements.
When giving instructions, strive to tell users what to do (see a dentist if you have a toothache), rather than what to avoid doing (avoid skipping your dentist appointment if you have a toothache). If the likelihood of making a wrong step is high or the consequences are dire, negative voice may be clearer to the user.

10) When describing an action or task that has a natural order or sequence (assembly instructions, troubleshooting, etc.), structure the content so that the sequence is obvious and consistent.
Time-based sequences are easily understood by users. Do not force users to perform or learn tasks in a sequence that is unusual or awkward.

11) Structure each content page to facilitate scanning: use clear, well-located headings; short phrases and sentences; and small readable paragraphs.
Websites that are optimized for scanning can help users find desired information. Users that scan generally read headings, but do not read full text prose—this results in users missing information when a page contains dense text. Studies report that about eighty percent of users scan any new page. Only sixteen percent read word-by-word. Users spend about twelve percent of their time trying to locate desired information on a page. To facilitate the finding of information, place important headings high in the center section of a page. Users tend to scan until they find something interesting and then they read. Designers should help users ignore large chunks of the page in a single glance.

12) Group all related information and functions in order to decrease time spent searching or scanning.
All information related to one topic should be grouped together.This minimizes the need for users to search or scan the site for related information. Users will consider items that are placed in close spatial proximity to belong together conceptually. Text items that share the same background color typically will be seen as being related to each other.

13) Limit page information only to that which is needed by users while on that page.
Do not overload pages or interactions with extraneous information. Displaying too much information may confuse users and hinder assimilation of needed information. Allow users to remain focused on the desired task by excluding information that task analysis and usability testing indicates is not relevant to their current task. When user information requirements cannot be precisely anticipated by the designer, allow users to tailor displays online.

14) Visitors can tell immediately what you sell.
15) Visitors can find an email address, phone number, address, which runs the site. They can quickly find an email for technical support questions.
16) Visitors can quickly find products and descriptions. Links to related products.
17) Visitors can quickly tell what to click on to place an order.
18) Visitors can find your phone number on every page in case they have a question.
19) Visitors can find information about the company and its management.
20) Visitors can find price information.
21) Content is brief and precise. Avoids telling stories.
22) Content is cross-linked to documents or sites with related information.
23) Make the text scannable with bulleted lists, highlighted keywords, meaningful headings and short sections of text.