The Best Tips for Writing Alt Text | Website ADA Experts at EcomBack

What is Alt Text?

Alt text (aka alt attributes or alt descriptions or alternative text) are descriptions for images on a website page. It is used within an HTML code to describe the appearance and function of an image.

Why is Alt Text Important?

Alt text is essential for anyone creating online content. It is helpful for users because it allows text to be read aloud using assistive technology like screen readers, speech input software, and speech-enabled websites. Also, alt text will replace an image if the file isn’t loading.

Another great reason to use alt text is that it is important for search engine optimization (SEO) and can dramatically improve a website’s rankings.

What does alt text look like in HTML?

Image Example:

A brown hare crossing the dirt road

The alt text comes before the tag: “alt=”

What the alt text looks like in an HTML code snippet:

<img

src=”European-Hare.jpg”

alt=”A brown hare crossing the dirt road.”>

How to add alt text to images on WordPress, Shopify, Magento, and Wix

You’ll be happy to know you don’t need to touch HTML code when using these e-commerce platforms because it is already included in the software. This makes it easier to write alt text!

Simply hover over the image thumbnail and click “Edit.” There should be an option to write alt text. For instance, Wix calls it “Title (Alt Text).”

Screenshot of showing How to check alt text details

Source:Wix

Writing Alt Text for Different Types of Images

  1. Basic images

Images that have little meaning to them get a basic description. Keep it short and to the point. However, don’t just write one word. Alt text is usually 125 characters or less.

The image is showing Cancun beach image and its properties

Source: fscj.edu

  1. Text in images

For a picture that has text in it, you can write that word-for-word in the alt text.

Welcome please come in an image accompanied by illustrations demonstrating how to write image alt text for individuals with visual impairments.

Source: Wix.com

  1. Decorative images

Decorative images don’t add information to a page’s content and only make it more visually attractive. Use null (empty) alt text, which tells assistive technologies to ignore the photo. It should look like this: alt=””

Image with Alt code

Source: Accessible360

  1. Functional images

Examples of functional images are interactive buttons and links. The alt text for the image should describe the action (“search,” “home,” etc.).

The image illustrates how to add Alt text to an image.

Source: ucsc.edu

  1. Complex images

Complex images are graphs, charts, maps, diagrams, and illustrations. These images are difficult to describe in one or two sentences. For the alt text, write what is the most important for users to read so they can understand the gist of the content.

The image demonstrates how to write alt text for a chart displaying the sales of November pie.

Source: Microsoft

How to Write Alt Text

There are three ways to write alt text: short description, no description, and long description.

If there’s nothing important in your image, don’t write alt text. Decorative images, visual stylings like borders, or images already described in the content body don’t need alt text. But take caution – a lot of websites get sued for lack of Alt text by ADA plaintiff lawyers. So, where possible, add Alt text.

Graphs, maps, and diagrams need longer descriptions. These can be hard to comprehend by many people, such as blind people and those with learning disabilities or low vision.

How do I write alt text for e-commerce sites?

Avoid writing alt text like this: “big clearance trucker hat buy today.” This might trigger a spam alert.

Example of a well-written alt tag for e-commerce websites:

<img =”trucker_hat.png” alt=” foam trucker hataHat for men green”>

The Best Tips for Writing Alt Text

  • Alt text is 125 characters or less
  • Clear and simple language
  • The most important information comes first
  • Don’t include ‘photo,’ ‘picture,’ or ‘icon’ as this is redundant
  • Include a keyword but don’t go overboard and write too many (known as keyword stuffing)
  • Be specific about the type of image, if it’s a painting, writing on a chalkboard, illustration, etc.

Common Mistakes

  • Not writing alt text (especially if the image is important)
  • Creating alt text for every single image on the page (above, we explain when to include alt text)
  • Descriptions that aren’t helpful
  • Failing to explain complex images

Get an Expert ADA WCAG Compliance Consultation with EcomBack

When you work with us, you can avoid ADA-related lawsuits. EcomBack designs a compliant website for your business. We have experts on our team that are well-informed in ADA compliance standards and can help your business get on the right track toward accessibility.

Get a free ADA audit and consultation today!