Web Accessibility Tips

In this chapter you will discover how to create a more accessible Web site for users with disabilities by improving your Web site’s accessibility. Webster’s definition of ‘accessibility’ is: accessibility: The quality of being accessible, or of admitting approach; receptibility. Accessibility is an important factor as good accessibility means more people will be able to do business with you.

Web Accessibility Tips

  • Web Accessibility Facts
  • Web Accessibility Design Guidelines
  • Applets, Plug-ins & PDF files
  • Charts and Graphs
  • Color Tips
  • Form Tips
  • Frames
  • Image Map Tips
  • Image Tips
  • Link Tips
  • Multimedia Tips
  • Script Tips
  • Skip Navigation to Main Content
  • Table Header Tips
  • Text Tips
  • Web Accessibility Testing Tools

If you are a non-disabled person, it might be easy to forget that there are many disabled people who wish to use the World Wide Web. As such, many people tend to forget to design their sites in a way in which disabled people can access them.

As you will learn throughout this chapter, you don’t necessarily have to entirely redevelop a site to met the legal and moral accessibility obligations. Infact, simply adding some ALT text, removing some frames, and changing your colors may be enough to allow most disabled users to navigate your site successfully.

The best way to develop for disabled users is to simply keep asking yourself: “Have I made this page as accessible as I can?” If you strive to make your pages accessible, then your site will be better than the majority and the World Wide Web would be a better place for everyone.

The Importance of Web Site Usability Testing

If you want a great Web site, you must test its usability. Just because no one has complained about your site doesn’t mean that all your visitors are using your site effectively, efficiently and to their full satisfaction.

Visitors won’t make the effort to complain unless you have outraged them in some way, or have provided an easy way for them to in touch with you from every page about the problems they may be having.

Improve Your Visitor Retention Rate

As many as one in three visitors to a home page will leave a site, without exploring further!

Usability testing and accurate monitoring can show you why you are losing so many new visitors.

Here are the most common reasons why new visitors to a site leave without exploring the site further:

  • The visitor doesn’t understand what the site is about, or simply decides that it doesn’t have what they were looking for;
  • The home page takes too long to download, and they give up waiting;
  • The visitor doesn’t find what the link to your site promised; and
  • Your site requires an plug-in, such as Flash, to use, and they don’t have, or dislike, that plugin.

website testing

Common visitor retention methods include:

  • providing regular updates on the front page to keep people coming back, even if they don’t explore the site any further;
  • attracting people with exit pop up ads; and
  • offering something for free from the front page.

Discover Which Parts of Your Web Site Are Failing and Why

Usability testing can uncover all types of faults in your site.

For example, studies have shown that as many as two out of three shopping carts are abandoned before the checkout.

As such, you could decrease the shopping cart drop-out rate by testing the usability of your shopping cart and checkout system. Make the process simple for users!

Why do users abandon searches for products?

  • Over a third may simply give up trying to buy the item(s), possibly scared by the price, or they may realize they do not really want the item(s);
  • One in seven turn to another Web site and keep searching; and
  • 44% give up searching online and resort to buying the item(s) from traditional retail sources!

Improve the Brand Experience of Your Customers

Your visitors are much more likely to leave your site with a good impression of your brand if their experience with your site is a pleasant one.

You can improve your users’ site experience by improving the usability of your Web site.

Usability problems that will give users a negative impression of your brand include:

  • Broken links;
  • Site errors;
  • Misspellings;
  • Poor grammar; and
  • Clumsy layout.

The discipline of information architecture is focused on developing sites and systems which result in two things. Firstly, the user getting the information they need. Secondly, the user having a positive experience.

If your users have a good ‘user experience’ with your site, and your site provides them with the information they need, they’ll come back.

Improve Your Understanding of Your Customers

Usability testing will give you a better understanding of how your users think and how they use your Web site. After all, if you don’t understand your customers, how can you provide exactly what they want?

What one person says can be interpreted differently by the the person listening. On the Internet, without tone of voice, it can be even worse. In the same way, what you think your users want from your site and how they use it could be different from what they really want.

Increase Sales and Profits

If usability testing can improve your visitor retention rate, decrease your shopping cart drop-out rate, and improve your customers’ brand experience, it is inevitable that your sales and bottom-line will improve.

In trying to increase your sales, you need to adopt the mindset of a potential customer. Would you want to buy the products on your site? Are the audience you’re targeting the ideal buyers for your product? If so, you’re part of the way there.

Next, is the process of finding information on your products easy? Do users need more information than you currently offer? If you’re selling technical goods, your customers might want to be able to download datasheets and schematics. Do you offer these?

The final part of the process is to see whether it’s easy to purchase your products after the customer has chosen to buy. Is it obvious where users should click to initiate a purchase?

Bottom-Line Benefits of Usability Testing

While ‘usability’ has existed in one form or another in most industries, it wasn’t considered important on the Web until recently. This means that the chances of usability being part of most companies’ Web design processes is somewhat slim.

You may need to convince senior management of the benefits of usability testing before they will allocate the necessary budget or project development time. The best method is to talk about improving the customer conversion rate, increasing sales, and bottom-line benefits.

Inverted-Pyramid Style of Writing

Traditionally, when you write, you start with a ‘foundation’ and gradually build to a conclusion in a pyramid style. You might write an essay or article using the following structure:

  1. Problem statement
  2. Related work
  3. Methodology
  4. Results
  5. Conclusions

Inverted-Pyramid Style of Writing

Journalists, on the other-hand, use an inverted pyramid style. They generally start with the main conclusion and get progressively more detailed, like so:

  1. Conclusion
  2. Supporting information
  3. Background and technical details

Since Web users typically scan text, it is important to position main points at the beginning of the article, then go into more detail as needed.

How to Conduct Your Own Usability Tests

Usability testing does not have to involve a lot of resources and expenses. You can conduct your own usability tests with minimal effort. Here are 7 rules to conducting usability tests.

Try the Test Yourself

Set a time limit for each testing session. Use a stopwatch to keep track of the time.

Then complete the test(s) yourself in the time allotted. Self-testing can expose many problems which you can fix before you conduct the tests with test subjects.

Ask the User a List of Prepared Questions

Here are sample questions you can ask your usability test subjects:

  • What is your first impression of the site?;
  • Where is the site identity/logo?;
  • What is the name of this site?;
  • What is this site about?;
  • What benefits do you think you will receive from this site?;
  • Where are the links (primary navigation) to the main sections of the site?;
  • Where are the utility links?;
  • How can you search this site?;
  • What are the features and content teasers or promotions?;
  • Where are the links to the most popular content?;
  • Where can you subscribe to the newsletter?;
  • Where is the registration or log-in form?;
  • Where are the advertisements (banners, buttons, & text links)?; and
  • Where are the main starting points?

Here are sample questions for pages other than the home page:

  • What is the title or name of this page?;
  • Where is the content promised by the link?;
  • Where are the local navigation links to related content?;
  • Where is the link for the home page?; and
  • Where are you in relation to the home page (Breadcrumb trail)?

Usability Tests

Ask the User to Complete the List of Prepared Tasks

Take careful note of how easy or difficult it is for the user to complete each task. The main objective is to try to observe the user’s thought process. When you’re not sure what the user is thinking, ask them.

For these tasks, let’s assume that you are conducting a usability test on Amazon.com, the online bookstore. Here are some sample tasks you can ask your usability test subjects to preform:

  • Find and add the last book you bought to your shopping cart;
  • Find and add xyz’s latest book to your shopping cart;
  • Find and add three books on basic HTML to your shopping cart;
  • Remove “xyz’s” latest book from your shopping cart;
  • Add gift wrapping to the three books on basic HTML;
  • Pay for the items in your shopping cart;
  • Subscribe to three newsletters offering recommendations about your favorite subjects;
  • Find information and sign up for our affiliate program;
  • Find information and join the Amazon Honor System; and
  • Send a complaint to our customer service department.

Encourage the User to Think Aloud

By encouraging the user to speak their thoughts, you will understand the user’s thought processes better. This will tell you if your expectations meet the user’s.

Before the user clicks a link or submits a form (such as a search form), ask them what they expect to find on the next page. After the click, ask them if the result is what they expected.

A word of warning!

Try not to coerce the user into telling you what you want to hear.

For example, you might ask the test subject, “Do you like the logo design?” The user is more inclined to reply, “Yes,” as people usually don’t like to hurt your feelings.

A less leading question could be something like, “Is there anything on the page that you particularly like?” If they answer, “Yes,” follow-up with, “What in particular do you like about the page?”

If the test subject does not indicate that they like your logo, you know that it clearly hasn’t impressed them in particular.

Listen Carefully to What They Have to Say

Always listen carefully to what your test subjects say out loud, and make a note of any important points.

Ask leading questions. If the user tells you they like the page, ask them what do they specifically like about it. Try to get to the specifics of what works and what doesn’t work in your Web site.

Measure the Success Rate of User Tasks

Track the success rate for each task you set. Use a stopwatch to track the time and count the number of clicks the user takes to complete each task, whether successfully or not.

If you find that users use too many clicks to complete a task, you might think about modifying existing functions or adding a new one to reduce the number of clicks it takes to complete the task.

Don’t Hurt Your User’s Feelings

You must treat your test subjects with extreme care and understanding. You must be patient and reassuring. Test subjects are fragile beings. Be nice!

Make it clear that the user is not the one being tested. Your Web site is. Tell them that they can’t do anything wrong. If they can’t do something, it’s because the site design is at fault, not them.

You must also try not to take it personally when users don’t understand what is happening or what to do. Welcome all errors and problems discovered as constructive discoveries.

Test Report

After each usability testing session, write up a concise report of the problems discovered and any thoughts on possible solutions. You should also note down any constructive ideas that your test subjects offered.

Analyze the Results

Everyone involved in the design process should review the test report and suggest possible solutions.

Rank the list of problems and solutions in order of importance. The site designers implement each improvement in that order. You then conduct another round of usability tests to see if the improvements work.

Remember that you’re not looking for a perfect solution to each problem. There is no single correct solution. Rather, you are looking for another solution to test.

This is why it is important to conduct numerous usability tests to create a site that is as user-friendly as possible.

GREAT WEB DESIGN TIPS

Easy-to-use Web sites don’t create themselves over-night. To create a great Web site, you must focus on its potential users from the very beginning, and checking at each step of the development with its intended users to be sure they will like and be comfortable with the final design.

A successful Web site begins with the site’s designers finding out:

  • who will be using the site
  • what they will be using it for
  • how they will be using it

The User-Centered Design (UCD) process involves the site’s designers working closely with the site’s intended users throughout the design process.

GREAT WEB DESIGN TIPS

Make Every Aspect of Your Web Site Self-Evident

Make sure every aspect of your Web site is self-evident, so that users don’t have to waste time and effort in trying to understand what something is.

A successful Web site should provide answers to the following questions without much effort required on the users’ part:

  • Where do I start?;
  • Is that a link?;
  • Is that a button?;
  • Is that the navigation?;
  • Where am I on the site?;
  • Why did they call it that?; and
  • Where did they put the…?

Five Essential Elements of Designing a User-Friendly Web Site

Previously, it was stated that there are no right or wrong ways to designing a great Web site. However, there are some essential design elements that should be applied to a Web site to make it as user-friendly as possible.

Create a Clear Visual Hierarchy

Organize and prioritize the contents of a page by using size, prominence and content relationships.

Let’s look at these relationships more closely:

  • Size: The more important a headline is, the larger its font size should be. Big bold headlines help to grab the user’s attention as they scan the Web page;
  • Prominence: The more important the headline or content, the higher up the page it should be placed. The most important or popular content should always be positioned prominently near the top of the page, so users can view it without having to scroll too far; and
  • Content Relationships: Group similar content types by displaying the content in a similar visual style, or in a clearly defined area.

Break Up Pages into Clearly Defined Areas

Studies have shown that Internet users decide which part of a page are likely to be of interest to them and ignore the rest.

Experience tells us where advertising banners and buttons are positioned in a Web page and we have learned to ignore those parts of the page as though they don’t exist.

I do not recommend including hidden advertisements with content. This may seem like a clever marketing ploy, and it does improve clickthough rates. But ultimately users will get frustrated if they constantly end up on an advertiser’s Web site, when they thought a link leads to more free information.

If you want to mix advertisements and content, make sure the ads are clearly marked, as in the new large-banner systems used by numerous top Web sites.

Use Standard Conventions

Always try to follow standard conventions. One standard convention that has been developed on the Internet is having the navigation bar at the top or left side of the page.

If you think about it, it actually makes more sense to have the main navigational hyperlinks on the right side of the page next to the scroll bar. This way, we wouldn’t have to play tennis with our mouse cursor!

But somebody had the bright idea of adding the main navigation links to the left side of the page. Other Web site designers had an even brighter idea of copying it! Now enough Internet users have seen it in enough Web pages that it needs no explanation.

If you tried to buck this convention by placing the main navigational links anywhere else, it could easily confuse most users.

Other standard Internet conventions include:

  • Blue underlined hyperlinks;
  • Breadcrumb trails; and
  • Bottom of page navigation text links.

Make Clickable Links Obvious

Always make text and graphic hyperlinks self-evident.

Text Links

It is a standard convention that blue underlined text represents a hyperlink that can be clicked. So why do Web site designers insist on making text links not underlined and/or in some other color?

Avoid this temptation whenever possible! Stick with blue underlined text for hyperlinks, because it works, and everyone understands it. You should also use a different color when a text link is activated.

Visited Link Colors

Don’t forget to use a different color for visited text links. The alternative visited link color informs users which pages they have already visited. Don’t confuse users by using the same color for unvisited and visited links.

Image Links

Make clickable graphics, such as “Search” buttons, obvious. Design clickable buttons with depth, so it looks like a button that can be pushed. Also add alternative text to graphics to help clarify the meaning the hyperlinks function.

Retaining the standard blue outline (by not using border=0) around a graphic is another option. This is the more traditional method.

Minimize Page Noise

Your Web site should be effortless to use and not be too taxing on the mind. You will tire your users out, if your pages require a lot of information processing.

To create a Web site that is effortless to use, minimize the:

  1. Number of words;
  2. Number of font typefaces, sizes and colors;
  3. Number of link options;
  4. Number of text link styles;
  5. Use of background colors; and
  6. Use of background wallpaper images.

1. Number of words.

Minimize the number of words in your text. If you can get a message across in ten words, instead of thirty, do so. Users want information, with minimum wasted effort and time.

2. Number of font typefaces, sizes and colors.

Minimize the number of font typefaces, sizes and colors. The more font typefaces, sizes and colors you use, the more effort the mind has use to process everything it sees.

3. Number of link options.

Minimize the number of link options. Too often, a page presents us with too much content and too many links. A site that tends to overwhelm me is the ICQ.com home page. In Sept 2001, the home page offered over 300 clickable links, buttons and forms! The content was also divided into 4 columns, which all adds up to a incredibly busy page.

A better layout design would be to display a dozen or so main category link options and a few of the most popular sub-category link options. Then on subsequent pages, offer all the options for a particular category.

4. Number of text link styles.

Minimize the number of text link styles. The old ICQ.com home page used an incredible eight different styles of text links!

Here are all eight styles:

  • dark blue text links without underlines
  • dark blue text bold links without underlines
  • light blue bold text links without underlines
  • dark red bold text links without underlines
  • dark red text links with underlines
  • dark red bold text links with underlines
  • light red text links without underlines
  • green bold text links without underlines

How confusing is that?!

5. Use of background colors.

Minimize the use of background colors. If you are going to use background colors, use them to define content areas. The eBay home page is a good example of how to use background color to clearly define content areas.

6. Use of background wallpaper images.

Minimize the use of background wallpaper. Most background wallpaper images are so faint that they don’t distract us. But we do still see them, which adds more work to the mind.