Alt Attributes: Image Description or Idea Description?

It is common knowledge that alt attributes should contain image descriptions. Unfortunately this is somewhat of an over simplification when it comes to icons or other images used as pictograms, especially when the icon is only loosely related to the action being represented. This problem can more easily be illustrated by an example:

If your web site contains a delete button represented by a trash can, you might write your alt attribute as alt=”trash can”, and under the simplified “alt = description of image” doctrine, you would be entirely justified. However, I encourage you to give this some careful thought. What is more important, that a visitor know what icon you chose to represent the delete action, or that they know what button to press to delete something? Unless you’re in the business of offering icons, I would assume the latter, and encourage you to use something like alt=”delete” instead.

What’s worse, someone who has been blind for a substantial portion of their life may not have sufficient experience with pictograms to understand what they mean based on their description. For instance, many blind users may have no idea what to make of alt=”a red circle with a line through it”. The user could guess, but do you really want to make the user guess about your interface?

I recently came upon a table which was used to show the status of various tasks. The column titles were something like “pending”, “completed” and “failed”, and the rows had labels like “registered in database”, “confirmed”, “synchronized”, ETC. To determine the status of a particular task, you would find the row for the task you were interested in and then look across the table to see which column had the dot. If The dot was in the “pending” column, it was a blue dot, green for the “completed” column, and red for the “failed” column. The alt attributes were alt=”blue-light”, alt=”green-light”, and alt=”red-light” respectively.

This is of course probably quite simple for most screen reader users to figure out, but it would be simpler still if alt=”pending”, alt=”completed” and alt=”failed” were used instead. Simpler because “looking” at a table is a little more work for a screenreader user. But more importantly, it gets back to the question, what’s more important, the icon or what it represents?

So in short, just remember that alt attributes are primarily not intended for helping the user to “see” the image, but rather for helping them get the information the image conveys.

posted by Aaron Cannon on Monday, Jul 07, 2008
tagged with accessibility, screenreader, alt, icon