Web Accessibility Tips & Guidelines

Millions of people have disabilities that affect how they use the web, yet many websites have accessibility barriers that make it difficult or even impossible for people with a disability to actually use the website.

What is Web Accessibility?

Web Accessibility simply means that people with disabilities who use special software and/or hardware can access, navigate and interact with your website.

Accessibility For Everyone is one of the greatest strengths of the web, but its importance is often overlooked by beginning webmasters. By making sure that your website is accessible to everyone, all potential users can access your information and you can reach your maximum potential audience.

You can learn more about this issue at these pages: WAI Guidelines and Techniques and Accessible Web Site Guidelines... however, they are somewhat confusing.

The following Tips And Guidelines For Website Accessibility will help you to design and maintain a website that is assessable to everyone, no matter what their situation.

  Your Images, Graphics and Animations:

Use the ALT="description" text to describe every image you use. The visually impaired use screen readers, which read the text on your web pages aloud. Since images can’t be read, your alternative text description should convey what is most important about the image.

Lots of images, animations or overly-large images make your pages load much slower. Avoid unnecessary images and animations to keep your pages as small as possible for faster loading.

  Your Multimedia Files:

If your website makes use of videos or music, you should provide captions or a text transcript, to provide the same information as the audio or video.

If your website uses Flash, make sure you use captions or provide an optional HTML version. It's also a good idea to provide a text 'skip intro' link at the beginning of a Flash intro, but not in the movie itself.

  Your Links:

It is important to use descriptive, meaningful words for your link anchor text. For example: "Click Here" conveys no information, "Get More Information" is better, but "More Information About Dog Grooming Tools" conveys all the info they need.

Try to write text links that make sense even when they are taken out of context.

  Don't Use Frames:

Frame designs create more problems than they solve. Not only do they cause difficulties with screen readers, but navigation, bookmarking and even page printing is more difficult for the average user than it needs to be.

If you are determined to use frames, make sure each one has a unique title, and use the <noframes> attribute to provide alternatives for someone using a browser that can’t handle frames.

  Scripts and Plug-Ins:

Provide plain-text alternative content for scripts and plug-ins, in case the visitors active browser features are inaccessible or unsupported. Don’t rely solely on JavaScript for essential page functions like menus.

  Your Tables, Charts and Graphs:

Many screen readers read tables row by row so try to structure your tables so your information makes sense when read like that. Use the <summary> attribute to provide users with an outline of the structure of each table or chart and what they contain.

It may also be a good idea to use Cascading Style Sheets for layout, instead of tables. There are pros and cons to that layout structure, so it's up to you... if you are more concerned with backwards-compatibility, then tables for layout is ok, for current and forward-compatibility CSS layouts are probably better.

  Your Fonts & Headings:

Don't use font size and color tags to indicate headings - always use the <h1> and <h2> tags. Use CSS to achieve the visual effects you want for your text, not the old-standard <font> tags.

  Your Colors:

Don't rely on color alone to convey meaning or information. A color-blind or totally-blind visitor using a screen reader will miss it completely.

Always make sure that there is a high contrast between your background and text colors, so visitors using a greyscale or black/white browser can still read your content.

On forms, don't use bold or colors to indicate required fields, give them an asterisk or arrow or something nobody can miss.

  Blinking Text, Animated GIFs and Scrolling Text:

Flickering screens, fast animations and blinking text can cause problems for epileptic users, so avoid them. If you use scrolling text, provide a plain-text alternative. Animated GIFs are ok if they have reasonable pauses between image changes.

  Check & Test Your Website:

To check your website for accessibility issues you can use the following tools:
W3C Validation Service This checks for conformance to W3C accessibility guidelines and lists any code errors.
WebXACT A free online service that tests single pages for quality, accessibility, and privacy issues.

Designing your website so it is accessible to everyone has other benefits: a flexible website will meet different user needs, browser preferences, and temporary situations - such as people using a slow internet connection, someone with a "temporary disability" like a broken arm, and people with changing abilities due to illness or aging.

It can also help your website to be found by and given higher rankings by the search engines.

To Your Success!
Tim

By Tim Brown © 2006. About the author: Tim is the webmaster at http://BLT-Web.com, where webmasters can find free tools, advice, tips and other useful resources designed to help them build a successful website.

---

Webmasters & Publishers:
You are welcome to publish this article free of charge on your website, newsletter, or e-zine, provided:
* You don't change the article in any way and all links remain intact.
* You include the entire article, including the "about the author" box.
* In doing so you agree to indemnify the author, blt-web.com and its directors, officers, employees and agents from and against all losses, claims, damages and liabilities which arise out of its use
* I would appreciate it if you send a courtesy copy of your publication to