An illustration of a pile of photos with a text box next to them representing alternative text.

The importance of well-written image alt-text

Posted by: GrackleDocs on April 27, 2023

From the early days of the internet, images have played a major role in how we experience websites. For people with sight loss, a substitute exists in the form of alternative text (alt-text). The alt attribute is a means to convey the information and context of any given image. Writing accessible alt-text isn’t so easy for sighted users. They tend to do the obvious and describe what the image looks like.

So, what does good alt text look like? Before I continue, I want to point out the difference between an empty and an absent ALT attribute.

There are situations when an empty alt attribute is perfectly acceptable. An example is when an image is not part of a link or is primarily decorative in nature. Images that are absent of an alt attribute are never acceptable. For now, keep in mind that every image must have an alt attribute present, even if it’s empty.

So, what happens when there is an empty alt tag? Depending on the software, some announce “blank,” which isn’t helpful for users. Others will read out the filename of the image. Imagine an image named “img_215465465.jpg”. Now imagine a screen reader reading that out loud. Not great, is it?

Here are a few tips to help you write accessible alt text.

  • Good alt-texts always convey context. Context provides further information beyond describing how the image looks. It contributes to the understanding of the content and what it represents.
  • If the image is purely decorative, then give the image a null alt-text.
  • Be accurate and succinct. You don’t need to write a short novel. A few sentences that present the function or content of the image will suffice.
  • Don’t use phrases like “the graphic is” or “an image of.” It is already clear to the user that an image is there.
  • Avoid redundancy. Don’t repeat the same information verbatim from the text that surrounds the image.
  • If the image contains text that helps the reader’s understanding, then it must contain an alt tag with descriptive text.

Adding good alt-text can be difficult when you don’t understand your audience. But with practice and by following these tips, we can make web content more accessible.

Back to Top

You may also be interested in:

  • Making Digital Accessibility the New Norm with GrackleDocs

    Posted in News on June 30, 2023

    In an increasingly digital world, the importance of accessible digital content cannot be overstated. It’s crucial not only from a legal standpoint but also for fostering inclusivity and equal opportunities…

    Read PostGrackleDocs
  • Visual reading assistance with iOS

    Posted in Digital Accessibility, Disability Awareness on February 16, 2023

    Hello readers, My name is Ryan, and I was born with a rare genetic eye disease. Amongst other things, this causes issues with reading small print. With assistive technology and…

    Read PostAn illustration of a tablet with a sound icon over the bottom-right corner.
  • Why WCAG?

    Posted in Digital Accessibility, Web Accessibility on July 21, 2023

    The Web Content Accessibility Guidelines (WCAG) are a set of guidelines designed to make web content more accessible, particularly for people with disabilities. Here are a few reasons why websites…

    Read PostGrackleDocs