Category Archive

We generally think of alt text as something that we add for users of screenreaders or text-only browsers. But what about the millions of users of search engines that index images?

The two key parameters the engine indexes are the image’s name and its alt text. (It may also make some inferences from the image’s context.) When writing alt text, think about what keywords one might use to bring that image up in a search engine, and try to include those words in a sensible, succinct phrase.

This is NOT to suggest that you fill your alt tags with SEO keyword optimizing nonsense. That rarely does the user any good. What I’m suggesting is that we consider the other means by which people search content, and the parameters by which that content is indexed.

Adding indexable meaning to your pages also makes the web more fun. For example, searching on the word “pint” in google images brings up this charming guy:

He was accompanied by this alt text:
Mr Jack Virgo enjoys a pint following a reduction in price of two pence in the 1959 budget.

Now doesn’t that make you want to write more indexable alt text? Mr. Virgo is all for it.

Further reading: TASI: A Review of Image Search Engines

In one of our projects, we wanted to give our admin users the option to sign up as many people as they want at one time, but without presenting them with a very long form full of duplicated fields that they probably won’t need. We used a bit of JavaScript to duplicate the relevant fields as the user needed them, so they could get as many or as few as required.. The basic idea is:

1. Grab the relevant fields and clone them using cloneNode.
2. Iterate through the cloned fields and add a number to the end of the values for the input’s id and label’s for value. We need to keep our ids unique!
3. Append the new fields to the end of the containing div.

What if JavaScript is turned off?

We’ll need to make sure that users with JavaScript turned off can add extra fields, too. Adding a name/value pair to the submit button will submit the page to the server with a indication that the user has JavaScript turned off:
value="Add new user" name="add-user-no-js"

The doctype is XHTML strict and the mark-up meets Level AAA accessibility standards. The JavaScript is unobtrusive DOM scripting.

See the form.

Note: This article has been changed to include a simplified example. The original example included show/hide functionality which added unnecessary complexity.