One – Don’t Ignore the Value of User Testing

Savvy marketers and site owners realize that a more usable interface usually equals higher conversions, but they still struggle with justifying the added cost of user testing. I would argue that the so-called “added cost” should quickly pay for itself in the form of increased conversions, but every site is different and that’s easy to generalize but hard to measure.

However, since accessibility is a subset of usability, it stands to reason that making a site easier to use for the disabled will make it easier to use for everyone. And isn’t that what we really want, anyway? The easier it is to accomplish a task (buying a widget, subscribing to a newsletter, filling out a contact form), the more likely users are to do that task. Give them some low-hanging fruit, and they’ll grab it.

Some usability problems that I’ve seen crop up are cognitive issues, like the wording of the content itself and the line length of the paragraphs, both of which can affect readability and comprehension. In some cases, you’ll need to have a copywriter take a look at your text. While it’s common to stuff website copy full of marketing jargon and SEO keywords, it’s not advisable. Think billboards, not shareholder reports.

Other issues I’ve seen are more visual in nature, such as extremely low contrast between the foreground and background colors. As artistic as subtle changes in grays can be, sometimes the text just isn’t readable: we don’t all have a brightly backlit monitor that so faithfully reproduces the entire color spectrum. I keep an old laptop with a dim LCD on hand just to check out designs for readability.

If you want to get into usability testing on the cheap, but don’t know where to start, pick up the excellent book Rocket Surgery Made Easy, by Steve Krug. I highly recommend it (along with everything else he’s ever written).

Two – Check Your Forms… Then Check Them Again

For what seems like a millennia now, designers have been taking the lazy way out and designing forms using tables for layout. But getting rid of all those table cells is just the beginning. You need to make sure that each form field has an explicitly associated label that goes with it. No, the bit of text in bold above the field doesn’t count, unless the HTML is describing that text as the field’s label.

Another pitfall of using tables to layout forms is messing up the reading order of the form information. It’s easy to put together a form that doesn’t make any sense at all when viewed in a linear format, which is how screen readers and mobile users usually view the page. Just remember that unless a form label is explicitly attached to a field, it’s probably wrong.

If you’re a coder, and you want to see the basics of how all this comes together, please check out this short video from Think Vitamin on accessible forms.

Three – Testing Keyboard Navigation

Last, but not least, is checking to make sure that your site is usable without a mouse. This may sound pretty difficult, but in most cases, it’s easy to check and, if necessary, fix.

The easy issues are showing focus and using a logical tab order, both of which are super simple for most websites. Showing focus is really nothing more than styling a CSS selector (the “focus” pseudo-class), and keeping a logical tab order can be as basic as not using the “tabindex” attribute and maintaining a normal reading order on the page.

If you missed that, my recommendation is to avoid using the “tabindex” attribute if at all possible. There’s too much of a chance that somewhere you’ll get the tabs out of order, and it’s a real pain to sort out. Best to go with the logical reading flow of the page instead. WebAIM agrees.

The big scary problems are keyboard traps, which happen when there’s no way to move away from a part of the page, aside from using the mouse. This kind of problem can be seen sometimes in forms where the act of tabbing out of a form field creates another form field for you to type into.

Summary

So there are your three tips. Go forth and do some guerrilla usability testing, double-check your web forms, and unplug your mouse a few times when you’re testing your own site. That should keep you focused on a more usable and certainly more accessible website. If you need further reading, the articles and resources over at WebAIM are a great place to get started. You can also search the #a11y hashtag on Twitter for current news, links, and chat.

Michael Guill

Michael Guill is a web accessibility expert who has been an invited speaker at several accessibility conferences. You can usually find him on Twitter evangelizing the gospels of accessibility, standards-based web design, and progressive enhancement.

Find Michael on the following:
twitter.com/michaelguill