By Satheesh K Chinnappan in ALT tags — Dec 26, 2019

How to write good image Alt text?

What is Alt Text?

Alt text (alternative text), also known as “alt attributes”, “alt descriptions”, or technically incorrectly as “alt tags,” are used within an HTML code to describe the appearance and function of an image on a page.

How Alt Text helps:

Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will read an alt attribute to understand an on-page image better.
Alt tags will be displayed in place of an image if an image file cannot be loaded.
Alt tags provide better image context/descriptions to search engine crawlers, helping them to index an image properly.

So now that you know why image alt text is relevant, how do you write good alt text that benefits your SEO, accurately describes your images and is easily read by screen readers?

Here are some do’s and don’ts while writing Image alt text

Write your alt text in sentence case

Ever wondered if you should use sentence case, title case, or all lowercase for your alt text? I sure did, and I’ve seen alt text written in each of these formats. But your alt text should be in sentence case, except for acronyms.

Use keywords, but don’t keyword stuff your alt text

The idea is to improve accessibility and user experience for everyone, not have their screen reader churn through a list of random words and phrases. Also, Google will probably figure you out, and your rankings will drop. Not a good look.

Keep it short or use longdesc=””

Most screen readers don’t read alt text past 125 characters, so keep your description short and sweet. For complex images, like graphs or charts, you’ll want to write longer stories. You can use the longdesc=”” HTML tag to do this.

Capitalise those acronyms – but remove ampersands.

How does that work? Do you ask? Take the abbreviation (and brand name) “AT&T” as an example. In alt text, “AT&T” is written “AT and T.”

Don’t forget alt text for your image buttons.

You can repeat your primary call to action (CTA) in the alt text or describe the button’s function. Some examples: “search,” “read more” or “buy now.”

If you’re wondering you’ve neglected your image alt text up till now, don’t worry. There are quite a few automated tools and checklists to help you quickly identify and solve accessibility issues. Here are a few Wave evolution tool and Accessibilityoz.

Subscribe to Satheesh 📊