3 Common Web Accessibility Mistakes that are Easy to Fix

I’ve been spending a fair bit of time this past week looking at websites – big and small – to see how accessible they are and where they tend to fall short.  It hasn’t been a scientific survey but 3 common areas have stood out:

  1. Missing form labels
  2. Missing alternative text
  3. Captchas

Form Labels

Imagine trying to fill out a form without knowing what information is being asked for.  Or, picture filling in the boxes and then finding out after the fact what info you were really supposed to enter.  Those are the kind of issues screen reader users encounter with a poorly designed and coded form.

Frommer's Registration Form

Take the registration form at Frommer’s as an example.  The form is missing labels for all the input fields, a clear no-no.  In addtion, the instructions for completing the Display Name and Password fields appear after the input boxes.  It would be more useful to know that your Display Name should be something other than your email address before you starting filling in the box so that you don’t have to go back to correct it.

It would also be good to have the fine print appear before the Register button so that you know what you’re committing to.

Missing or Poor Quality Alternative Text

The prevalance of missing alt attributes on sites of all sorts continues to surprise me.  If a web developer is taking the time to write the code to insert an image, it seems that it should be easy enough to take the extra step of including an alt attribute, even if it is empty.

A related issue is using the same or similar alt attribute for more than 1 image on a page.  The recently relaunched Toronto Star website is guilty of this with the images on their home page.  Each article image has the alternative text of “Image”.  So, a screen reader would hear “Image image” or “Image of Image” for each photo on the page.  Not very helpful.

Captchas

Captchas are the images with distorted text that you often see at the bottom of forms on websites.  They’re intended to separate human visitors from automated visitors in an effort to keep spam under control.  They certainly can help in that effort but they can also be a hindrance to screen reader users (the biggest problem area identified in WebAIM’s recent screen reader survey).

The alternative?  Eliminate captchas and invest in an effective spam filter.  Not only will you be making life easier for screen reader users, but you’ll make the rest of your visitors far less frustrated, too.