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.
Architectural and Visual Clarity
Image/multimedia theme relation with the website theme, site organization from users perspective, White/empty space, color use, Link color (normal, hover, visited), Anchor text, Page Layout, Titles, Frames etc.
Website Architecture
Flowcharts
Use these to outline the site structure, identify pages, navigation paths and content labels. Flowcharts offer an advantage in that everyone in the development process can see the site’s structure and make suggestions to alter or delete sections where necessary.
Breakdown Each Page
For each section, prepare an itemized list of contents. Include all text, images, sounds, video clips, audio clips, applets and downloadable items. List all links and their destination pages.
Separate links, which appear on all pages from those appearing on specific pages only. Use Excel or Word to create this list as you can use color-codes for reference.By breaking down each page, you also clarify each pages objectives and role.
Design for Breadth
Usability research shows that users get disorientated after the third level of depth on a site.
Therefore, help users find content within three clicks. If you can’t achieve this with the current design, start again — the rewards will be worth the efforts.
Color Use
Color is a powerful tool. When used appropriately, it can help organize sections of a page, highlight important text, or draw the eye somewhere. When used inappropriately, it can confuse, obscure text, or repel the user from your site
1) Choose color carefully!
2) Use color to enhance, not detract from your message. It isn’t a good idea to have large amounts of text in red, for instance. Instead, use it to highlight something important.
3) Don’t use a light colored text over a light background, or dark text over dark background
4) In general, warm colors (reds, yellows, and orange) are more vibrant and tend to “pop out” on a page. Cool colors (blues and greens) are perceived as more calm and tend to recede on a page.
5) The primary colors (pure red, blue, and yellow) are very powerful –use them sparingly
6) The same color might look different depending on what color is next to it. In general, light text on a dark background is more difficult to read than dark text on a light background. Even worse is any text on a patterned background!
7) Just like too much information, too much color in one place makes things more difficult to find
Architectural and Visual Clarity Don’t use color in random places just for the sake of color -use it to distinguish between links and regular text, to highlight an important box, or to visually separate the navigation from the content.
The most legible color combinations, in order, are
Black on Yellow Background
Yellow on Black Background
Green on White Background
Red on White BackgroundBlack on White Background
White on Blue Background
Blue on White Background
Blue On Yellow Background
Links
1) Keep links throughout the site visually similar (same font, color, or boldness), so users can intuitively know what’s a link and what isn’t
2) Always let the user get back to the home page from anywhere on your site
3) When linking to other sites, review them every so often to make sure the link still works
4) Include a contact link somewhere on the site so users can give feedback or ask questions
5) Provide sufficient cues to clearly indicate to users that an item is clickable.
Users should not be expected to move the cursor around a website (’minesweeping’) to determine what is clickable. Using the eyes to quickly survey the options is much faster than ’minesweeping.’ Similarly, relying on mouseovers to designate links can confuse newer users, and slow all users as they are uncertain about which items are links.
Be consistent in your use of underlining, bullets, arrows, and other symbols such that they always indicate clickability or never suggest clickability. For example, using images as both links and as decoration slows users as it forces them to study the image to discern its clickability.
Items that are in the top center of the page, or left and right panels have a high probability of being considered links. This is particularly true if the linked element looks like a real-world tab or pushbutton.
6) Use text links rather than image links.
In general, text links are more easily recognized as clickable. Text links usually download faster, are preferred by users, and should change colors after being selected. It is usually easier to convey a link’s destination in text, rather than with the use of an image.In one study, users showed considerable confusion regarding whether or not certain images were clickable. This was true even for images that contained words. Users could not tell if the images were clickable without placing their cursor over them (’minesweeping’). Requiring users to ’minesweep’ to determine what is clickable slows them down.
Another benefit to using text links is that users with text-only and deactivated graphical browsers can see the navigation options.
7) Make the link text consistent with the title or headings on the destination (i.e., target) page.
Closely matched links and destination targets help provide the necessary feedback to users that they have reached the intended page. If users will have to click more than once to get to a specific target destination, avoid repeating the exact same link wording over and over because users can be confused if the links at each level are identical or even very similar. In one study, after users clicked on a link entitled “First Aid,” the next page had three options. One of them was again titled “First Aid.” The two “First Aid” links went to different places. Users tended to click on another option on the second page because they thought that they had already reached “First Aid.”
8) When using embedded links, the link text should accurately describe the link’s destination.
Users tend to ignore the text that surrounds each embedded link; therefore do not create embedded links that use the surrounding text to add clues about the link’s destination.
9) Use color changes to indicate to users when a link has been visited.
Generally, it is best to use the default text link colors (blue as an unvisited location/link and purple as a visited location/link). Link colors help users understand which parts of a website they have visited. In one study, providing this type of feedback was the only variable found to improve the user’s speed of finding information. If a user selects one link, and there are other links to the same target, make sure all links to that target change color.
10) Indicate to users when a link will move them to a different location on the same page or to a new page on a different website.
One study showed that users tend to assume that links will take them to another page within the same website. When this assumption is not true, users can become confused. Designers should try to notify users when they are simply moving down a page, or leaving the site altogether.
11) Indicate to users when a link has been clicked. If a user selects one link, and there are other links to the same target, make sure all links change colors.
Page Layout and Frames
A good layout will help your users use your site more effectively as well. When your header, navigation, content and footer are in the same place for each document in your site, users know where to to look to find content, links, and other information.While there are countless layout possibilities for your site, there are a few principles to keep in mind:Pages should flow - Users instinctively look at the top left corner of the page when a page pops up. Your layout should help direct their attention to your content.Put important content “above the fold.” Users should get the most important information on your page without having to scroll.
Use white space in your layout - Putting some blank space around your content makes it more prominent and easier to focus on.
Make your page easy to scan - Users tend to scan pages instead of reading them. When you keep lines of text short (7-11 words), you make it easier for users to comprehend your content.
Put related items close together.
Make page-length decisions that support the primary use of the Web page.
In general, use shorter pages for homepages and navigation pages, and pages that need to be quickly browsed and/or read online. Use longer pages to
(1) Facilitate uninterrupted reading, especially on content pages
(2) Match the structure of a paper counterpart
(3) Simplify page maintenance (fewer Web page files to maintain); and,
(4) Make pages more convenient to download and print.
Use frames when certain functions must remain visible on the screen as the user accesses other information on the site.
It works well to have the functional items in one frame and the items that are being acted upon in another frame. This is sometimes referred to as a ‘simultaneous menu’ because making changes in one frame causes the information to change in another frame. Side-by-side frames seem to work best, with the functions on the left and the information viewing area on the right.
Keep in mind that frames can be confusing to some users. More than three frames on a page can be especially confusing to infrequent and occasional users. Frames also pose problems when users attempt to print, and when searching pages.
Establish a high-to-low level of importance for information and infuse this approach throughout each page on the website.
The page layout should help users find and use the most Important information. Important information should appear higher on the page so users can locate it quickly. The least used information should appear toward the bottom of the page. Information should be presented in the order that is most useful to users.
Put the most important items at the top center of the Web page to facilitate users’ finding the information.
Users generally look at the top center of a page first, then look left, then right, and finally begin systematically moving down the total Web page. All critical content and navigation options should be toward the top of the page. Particularly on navigation pages, most major choices should be visible with no or a minimum
of scrolling.
Structure pages so that items can be easily compared when users must analyze those items to discern similarities, differences, trends, and relationships.
Users should be able to compare two or more items without having to remember one while going to another page or another place on the same page to view a different item.
Limit the amount of white space (areas without text, graphics, etc.) on pages that are used for scanning and searching.
’Density’ is the percentage of the screen filled with text and graphics. One study found that higher density is related to faster scanning, and has no impact on user accuracy or preference. Another study found that users prefer moderate amounts of white space, but the amount of white space has no impact on their searching performance. On content (i.e., text) pages, use some white space to separate paragraphs. Too much separation of items on Web pages may require users to scroll unnecessarily.
Titles, Headings
Ensure that category labels, including links, clearly reflect the information and items contained within the category.
Typical users must understand category titles. Users will likely have difficulty understanding vague, generalized link labels, but will find specific, detailed links and descriptors easier to use.
Use headings that are unique from one another and conceptually related to the content they describe.
Using poor headings (mismatches between what users were expecting and what they find) is a common problem with websites. Ensure that headings are descriptive and relate to the content they introduce. If headings are too similar to one another, users may have to hesitate and re-read to decipher the difference. Identifying the best headings may require extensive usability testing and other methods.
Ensure that data tables have clear, concise, and accurate row and column headings.
Use row and column headings to indicate unique cell contents. Users require clear and concise table headings in order to make efficient and effective use of table information. Row and column headings will indicate to screen readers how data points should be labeled or identified, so the user can understand the significance of the cell in the overall scheme of the table.
Put a descriptive, unique, concise, and meaningfully different title on each Web page.
Title refers to the text that is in the browser title bar (this is the bar found at the very top of the browser screen). Titles are used by search engines to identify pages. If two or more pages have the same title, they cannot be differentiated by users or the Favorites capability of the browser. If users bookmark a page, they should not have to edit the title to meet the characteristics mentioned above.
Use headings in the appropriate HTML order.
Using the appropriate HTML heading order helps users get a sense of the hierarchy of information on the page. The appropriate use of H1-H3 heading tags also allows users of assistive technologies to understand the hierarchy of information.
System Specific Usability Issues
The Usability of websites differs from the type of websites. The main type of websites can be:
1) E - commerce and Shopping Cart
2) Travel websites
3) Blogs
4) Information websites etc.
Along with the other Issues, there are few more usability issues which needs to be taken care of while doing usability for a website.
Text Presentation
Specific guidelines for text presentation may be summarized as follows. # Use sans serif fonts like Arial or Helvetica.
#Strive for 14-point font size for body text and 18–24 point for headers. Provide a
#Text sizing option on your page.
#Use boldface; avoid italics.
#Use upper and lower case; avoid using all capitals.
#Use left-justified text; avoid centered or full justification.
#Increase leading (the space between lines of text).
#Keep line lengths between 50 and 65 characters.
#Use headings and subheadings.
#Use negative contrast (black text on white ground).
#Use active white space.
#Place text on unpatterned backgrounds.
#Use consistent placement of page elements.
#Increase the size of peripheral elements.
#Separate the steps of a procedure using numbers or bullets.
#Use a minimum number of hypertext links in a single line of text.
#Avoid multicolumn format or frames.
#Avoid flashing or blinking text.
Javascript
Javascript is one of the most popular scripting languages for web development. In addition to libraries of Javascript code available online, two of the most popular web development tools, FrontPage and Dreamweaver, include easy-to-access code snippets that add little "extras" to web pages. Developers should use caution when deciding to include Javascript or other scripting elements on their pages. Here are a few of the most popular uses for Javascript and some of the accessibility issues to consider:
onClick – The onClick event handler is triggered when the user clicks once on a particular item. It is commonly used on links and button elements and, used in connection with these elements; it works well with screen readers. If clicking on the element associated with the onClick event handler triggers a function or performs some other action, developers should ensure that the context makes that fact clear to all users. Do not use the onClick event handlers for form elements that include several options (e.g. select lists, radio buttons, checkboxes) unless absolutely necessary.
onMouseOver and onMouseOut – These two event handlers are very popular on many web sites. For instance, so-called rollover gif's, which swap images on a web page when the mouse passes over an image, typically use both of these event handlers. These event handlers neither can be accessed by the mouse nor interfere with accessibility – a screen reader simply bypasses them entirely. Accordingly, web designers who use these event handlers should be careful to duplicate the information (if any) provided by these event handlers through other means.
OnChange – This event handler is very commonly used for triggering JavaScript functions based on a selection from within a  tag. Surprisingly, it presents tremendous accessibility problems for many commonly used screen readers and should be avoided. Instead, web developers should use the onClick event handler (associated with a link or button that is adjacent to a tag) to accomplish the same functions.
Lists
Lists are commonly found on websites. These may be lists of, for example, people, drugs, theaters, or restaurants.
Each list should be clearly introduced and have a descriptive title. A list should be formatted so that it can be easily scanned. The order of items in the list should be done to maximize user performance, which usually means that the most important items are placed toward the top of the list. If a numbered list is used, start the numbering at “one,” not “zero.” Generally only the first letter of the first word is capitalized, unless a word that is usually capitalized is shown in the list.
1) Arrange lists and tasks in an order that best facilitates efficient and successful user performance.
Where no obvious order applies, organize lists alphabetically or numerically. Keep in mind that it is the user’s logic that should prevail rather than the designer ’s logic.
2) Display a series of related items in a vertical list rather than as continuous text.
3) Provide an introductory heading (i.e., word or phrase) at the top of each list.
4) Place a list’s most important items at the top.
5) Capitalize the first letter of only the first word of a list item, a list box item, check box labels, and radio button labels.
6) Use bullet lists to present items of equal status or value, and numbered lists if a particular order to the items is warranted.
|
produces inconsistent results.
may not work.
usually does not work
pairs
commands which are not closed with 
We shall have to watch this one.