How to Write Alt Text and Image Descriptions for the visually impaired

Webcraft
1

I know that I am preaching to the choir here, but this was still a helpful document for me.

I’ve seen some commentary going around on social media about how sighted folks are sometimes too exuberant in their descriptions and they get really long, like describing the trees in the background. We have to remember that we’re doing this to make the image and content accessible, not to record every detail in order to applaud ourselves. So I found this paragraph helpful:

Length of text

A picture may be worth a thousand words, but there’s no reason to write them all out and leave the user waiting for the descriptions to end. It is strongly recommended that alt text be 125 characters or less to ensure compatibility for popular screen readers. Image descriptions can be longer, but I recommend keeping them the length of a tweet, or about 280 characters. Speaking of Twitter, read my post on low vision Twitter accounts to follow here, and follow me on Twitter @veron4ica here.

I am also finding these paragraphs helpful:

Features of image to describe

When composing image descriptions, it may seem difficult to decide what to include. Here are features that can be included in image descriptions- write about these when applicable:

  • Placement of objects in image
  • Image style (painting, graph)
  • Colors
  • Names of people
  • Clothes (if they are an important detail)
  • Animals
  • Placement of text
  • Emotions, such as smiling
  • Surroundings

What not to describe

Likewise, there are some things that should be left out of image descriptions. These include:

  • Descriptions of colors- no need to describe what red looks like
  • Obvious details such as someone having two eyes, a nose, and a mouth
  • Details that are not the focus of the picture
  • Overly poetic or detailed descriptions
  • Emoji
  • Multiple punctuation marks

I talk about some of these details in my post on texting etiquette and low vision here.

1 Like
2

This is a good resource! I’m going to take a lot of their examples and include it in the documentation we create for client projects.

We constantly train folks on accessible communication. Because design patterns teach the general population how things “work” we often have to work against new and shiny versus boring and meaningful.

An example of this is the perception of value in say, loading map tile in an iframe to show a location rather than an image of a map tile (static, one can’t “interact” with it), or even better a text address with appropriate markup (such as an optional link to a map provider).

Another example is loading up complex data in a chart, which looks groovy and beautiful and certainly like someone did something, but fail to communicate in a way computers or humans can understand (in most cases no meaningful text).

Thanks for the share. :slight_smile:

3

glad it’s useful!

1 Like