October 2, 2006

Accessibility Basics

Filed under: CSS, XHTML — Mike @ 2:33 pm

Most people generally agree that websites should be made usable to the widest audience possible. Web designers are constantly trying to accommodate users with various browsers, but we must also consider a host of other possibilities.

It is likely an impossible task to make a decent website that is usable by everyone, but it is a noble effort to try. The major users we need to consider (in addition to those that we consider as “standard” users) include those using old browsers, screen readers, and text browsers, those with poor vision, those who are colorblind, users without Javascript, those using cell phones or other mobile device.

What needs to be done?

1. Design using web standards.

  • If you do this, then you are already well on your way because you site should already degrade nicely in old browsers and be formatted pretty well for text browsers.

2. Don’t open links in new windows if you can help it.

  • New windows are bad news for screen readers.
  • The target attribute has been deprecated by the W3C and may not be supported by browsers in the future.

3. Avoid using Javascript for links (new windows and otherwise).

  • Not all users have javascript-enabled browsers. Try to provide an alternate option for these users if the use of Javascript is unavoidable.

4. Use descriptive links

  • Use descriptive wording that will not mislead users. Avoid the phrase “click here.”
  • Make use of the title attribute to support or extend link description.
  • If you are going to open a link in a new window, let the user know in some way.

5. Describe you images thoroughly for screen readers and text browsers

  • Make sure that you describe the image in the alt attribute.
  • Make sure any and all text conveyed in the image is described in the alt tag.
  • Use the longdesc attribute for complex images such as graphs and charts.
  • Added bonus: search engine crawlers look at alt tags, so good descriptions can help your optimization.

6. Consider the near-sighted

  • Make sure your text is big enough to read for all.
  • Use relative units for text so that the size can be increased.

7. Use contrasting colors for text and background

  • One of the keys to accessibility is legibility. See my last article for more on this subject.

This tutorial really just covers the basics, the stuff that is easy and that everyone should do. This should get you started, but to truly understand the reaches of accessibility, check out these links:

About Accessibility

Developing Accessible websites

Validation

No Comments »

No comments yet.

RSS feed for comments on this post.

Leave a comment

You must be logged in to post a comment.