How To Write Alt Text and Image Descriptions for the Visually Impaired

Imatge
Àmbits Temàtics

If some­one went on your website or profile with their eyes closed, would they still be able to find their way around? As more and more people deve­lop vision impair­ments, they turn to assis­tive tech­no­logy in order to access content. By adding alt text and image descrip­ti­ons, barri­ers are lifted and more people can access your content. Read on to learn more about how to write alt text and image descrip­ti­ons.

What is alt text?

Alt text tells people what is in an image, such as text or basic essen­tial details. If an image fails to load, alt text will display in its place. Search engi­nes also index alt text infor­ma­tion and consi­der it a factor when deter­mi­ning search engine ratings. So knowing how to write alt text is a very impor­tant skill!

Rela­ted links

What is an image descrip­tion?

An image descrip­tion gives more details than alt text and allows some­one to learn more about what is in an image that goes beyond alt text. Alt text gives the user the most impor­tant infor­ma­tion while image descrip­ti­ons provide further detail. For exam­ple, alt text tells some­one that there’s a puddle on the floor, and image descrip­tion tells some­one that the puddle on the floor is in the middle of the floor and it’s orange juice.

How it helps people with vision impair­ments

People with vision impair­ments such as low vision and blind­ness may use screen readers in order to access the inter­net, or just have trou­ble distin­guis­hing images. Screen readers will read the alt text out loud, as well as image descrip­ti­ons, depen­ding on what settings the user has enabled. Alt text and image descrip­ti­ons can provide essen­tial infor­ma­tion such as text, links, and image details.

Length of text

A picture may be worth a thou­sand words, but there’s no reason to write them all out and leave the user waiting for the descrip­ti­ons to end. It is strongly recom­men­ded that alt text be 125 charac­ters or less to ensure compa­ti­bi­lity for popu­lar screen readers. Image descrip­ti­ons can be longer, but I recom­mend keeping them the length of a tweet, or about 280 charac­ters.

Write out text in image

If an image has text in it, make sure to write out the image text verba­tim as alt text. Use proper spelling, capi­ta­li­za­tion, spacing, and gram­mar too- if some­one is pinning the image to Pinte­rest, the alt text is what will display as the image descrip­tion. Alt text is also useful for images with deco­ra­tive text that may be diffi­cult to see, like a signa­ture or logo.

Featu­res of image to describe

When compo­sing image descrip­ti­ons, it may seem diffi­cult to decide what to include. Here are featu­res that can be inclu­ded in image descrip­ti­ons- write about these when appli­ca­ble:

  • Place­ment of objects in image
  • Image style (pain­ting, graph)
  • Colors
  • Names of people
  • Clot­hes (if they are an impor­tant detail)
  • Animals
  • Place­ment of text
  • Emoti­ons, such as smiling
  • Surroun­dings

What not to describe

Like­wise, there are some things that should be left out of image descrip­ti­ons. These include:

  • Descrip­ti­ons of colors- no need to describe what red looks like
  • Obvi­ous details such as some­one having two eyes, a nose, and a mouth
  • Details that are not the focus of the picture
  • Overly poetic or detai­led descrip­ti­ons
  • Emoji
  • Multi­ple punc­tu­a­tion marks

Rela­ted links

A note on auto­ma­tic alt text

Auto­ma­tic alt text is being inte­gra­ted into diffe­rent websi­tes. While this is an awesome feature, it isn’t always the most accu­rate. For exam­ple, auto­ma­tic alt text once inter­pre­ted a picture of my brot­her stan­ding outside as being a picture of a car. It never hurts to double check alt text and make sure that both the compu­ter and humans are in agre­e­ment as to what is in the picture.

Using null alt text

There are times where using alt text or image descrip­ti­ons is point­less. Deco­ra­tive images that have nothing to do with the website content, such as shapes or patterns, do not need alt text or image descrip­ti­ons, and neit­her do blank images. I still recom­mend typing “null” as alt text for deco­ra­tive images as oppo­sed to leaving it blank.

Where to use it

Alt text can and should be used in a vari­ety of settings. Blog­gers and webmas­ters can add alt text to images on their websi­tes. Twit­ter users can add alt text from the settings menu. Insta­gram users can add alt text when editing or before posting an image. And of course, alt text should be added when crea­ting content Micro­soft Office.

Rela­ted links

With these tips, users can create alt text and image descrip­ti­ons that help people with vision impair­ments and make their content more inclu­sive and acces­si­ble.

How to write alt text and image descriptions for the visually impaired. Making your website and social media accessible to people with blindness and low vision