KuraFire Network

After having just encountered Joe Clark's article on an accessibility and usability experiment for screen-readers, I thought it'd be good to have a list of simple rules for making websites more accessible to the blind. Especially focusing on things you'd ordinarily never think of.

These are only a list of tips, essentially, as deducted from Joe's analysis. Keep in mind that this brief list can and probabily will be expanded upon in the future, as there are simply countless things that you could implement on your site to improve accessibility. Also, since this list was inspired by one very specific experiment it's not as organized as I'd like these things to be. Perhaps in a nearby future, though.

That said, let's get this show going, Alertbox style.

1a: Terminology: log in or sign in?

The experiment pointed out that the use of different terms can be wholly confusing to screen-reader users. If they're used to the term "log in" (or are told to "log in" as was the case in the experiement) and a website uses the term "sign in" everywhere, it may be hard for them to find it at all. Searching for links that with the letter L wouldn't provide "sign in" links, and vice versa.

For commonly-used web terminology that comes in various flavours, try combining terms to account multiple possibilities, thus, multiple expectations. For the example of log in vs. sign in, a "sign in" link with a title attribute saying "Log in to your account" could improve usabililty.

1b: The value of searching

It should be no surprise that screen-reader users prefer to use a search form for navigating a site. Simple steps can aid them in this, such as having a search form at or near the top of the page, having it made with complete, accessible (and valid!) HTML and perhaps even using a heading entitled Search (for when they quickly check the list of headings on a page).

Additionally, if your search engine supports dictionaries, use them. Being able to use any singular or plural form for search terms can vastly improve accessibility for screen-reader users, but also overall usability for everyone. If dictionaries are unavailable for whatever reason, a note in the search form describing this is useful, for instance: "If you can't find what you're looking for, try using the opposite [singular/plural] form of your search term(s)."

1c: Dealing with complex forms

The label element is great for making forms more accessible, as it can be placed anywhere inside the form. Always use a for="" attribute to explicitly associate it with the form field it belongs to.

For checkboxes that are directly associated with something (a product name, for instance), keep them close to their subject.

Explain in each fieldset what it's for, unless it would be very obvious when read in a linear fashion.

1d: Balance between minimalization and maximization

Try to keep the amount of information at the top of the page as clear and concise as possible, as this part of the site will generally be read out most.

Controversely, don't minimalise information in the unique part of each page. A button labelled "edit order" could be confusing on some verbosity levels of screenreaders, whereas a button labelled "edit your order" is very clear.

Bookmark: Newsvine del.icio.us Digg