Alt-text makes images visible

Alt-text is the extra, hidden “alternative text” that we can add as a label to images to make them more useful and usable. Although it is invisible on our computer screens, the alt-text also helps search engines like Google find our blog posts more easily.

Adding alt-text to images makes a difference

lion=run, context makes meaning

It’s a lion!

We use images in blogging for lots of reasons, including:

  • to add context.
  • to illustrate a point.
  • to provide information in a graphical format.
  • to set the tone.
  • to break up the text.

If the alt-text is missing on an image, it will be invisible to:

  • screen reader users.
  • users who have turned off their images to save on band-width.
  • search engines.

Leaving out the alt-text is OK if the image is “bling” and has no purpose other than decoration. But if the picture is playing an integral part in the story telling, we need to add the alt-text.

How to add alt-text

The “Add Media” window image below is taken from WordPress. It shows the “fields” where you can write your title, alternate text and caption.

Add media window in WordPress

“Add Media” window

Here is a process for uploading an image and adding the media labels for title, alt-text and caption:

  1. Find an image on your computer that you want to upload to your blog or website.
  2. Delete the file name, e.g D54376.
  3. Rename the image with a short descriptive title that you will recognise at a later date.
  4. Upload your image. An “Add Media” window will open. Fill in the fields labelled title, alt-text and caption.
    1. In WordPress the fields present automatically.
    2. In Blogger,
      1. Fill in the add “caption” field which is clearly labelled.
      2. Click “properties” to fill in the alt-text and title.
    3. On other platforms you’ll have to search around, but they should be there.

The difference between the alt-text, titles and captions

The alt-text

The alt text is the succinct description you would give to someone if you were describing the picture over the phone.

The title

The title is for optional extra information, not contained in the alt text. Some screen reader users turn it off. It is what shows in the yellow box when you hover over a picture with your mouse.

The caption

The caption is really for visual users and supports an extra layer of meaning. Screen reader users can choose to listen to it.

It can be used to :

  • Contribute to the story telling.
  • Support the user to connect the image with the text.

What does the alt-text look like?

When you add alt-text it shows up in the hidden html. The alt-text is highlighted in yellow and says “alt=”lion=run, context makes meaning”. This is what the screen reader will read aloud.

alt-text in the html "lion-run, context makes meaning"

the alt-text

When alt-text is not enough

Sometimes images need extended alt-text if they are detailed or their content requires a more in-depth description. There are usually two options:

In-text description.

The author provides sufficient description in the body of the text to assist the reader in their understanding. In this case the author would leave the alt-text field blank or just write a short phrase.

Full text description.

The author adds an image description in a separate paragraph below the image.

No alt-text for bling

Often on webpages, many of the images are “bling”, just pretties to colour up the page. These do not need labeling with alt-text, title or caption as they do not contribute to the understanding of the content of the page. Just leave the fields blank.

Ideally minimise “bling” as it can act as clutter. Where possible, increase your use of white space to assist the user in focusing on what is important on your page.

Using graphs and charts

Most charts and graphs require a long description on the same page as the image. To find out more about how to construct an appropriate long description check out the 1st chart on the WebAim long description support page.

Introducing alt-text to your students

You can add alt-text to images in most online environments and also in Word documents.

  • Where could you begin to introduce alt-text to your students?
  • Add your thoughts in the “reply” section below.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s