Illustration by Davina Tirvengadum.

Considerations when writing alt text

Find out what alt text is, why it’s so important, and how to write content for your images

Alt text. We know it’s something that can be added to images on the web, but what is it really? Who is it for? Why should we care? And, perhaps most important, how do we write it?

Let’s explore these questions and more!

What is alt text?

Alt text, or “alternative text” as the long-form name suggests, is a written text description for an image on the web. It helps to describe the image for the reader to understand what the image is about.

In other words, alt text is content. And like any other content on your site, it should be well written and constructed, ready for consumption.

Why does alt text matter?

There are a few situations where writing alt text and including well formed descriptions for your imagery is beneficial for a successful website. Let’s explore the various benefits of adding alt text.

SEO

When search engines, such as Google, crawl your site content, it indexes the alt text found embedded for all images found on the current page. This is used to gain a clear picture (no pun intended) of the content being served in order to provide accurate search results.

A common misconception is that alt text is only meant for SEO purposes, as a way to take advantage of the “hidden text” container and use it to try and increase site rankings among search engines. What’s being described here is “Keyword stuffing” which is the act of using the alt attribute to inject as many “keywords” as possible in order to rank higher in search engine results. This action is greatly frowned upon and may actually lower your ranking. It could also be considered abuse as SEO is not the only reason to have alt text available, as we’ll discover next.

For sighted users

If an image fails to load, potentially due to a poor connection or an underpowered device, the image’s alt text is displayed on screen instead. This has the benefit of letting someone know an image was meant to load here, but as an alternative, they’re still able to consume the text content.

When an image fails to load, sighted users can still read the alt text.

For assistive technology users

Alt text provides people with visual impairments the ability to participate in consuming non-text content. When assistive technology, such as a screen reader, encounters an image on the web, the alt text is read and announced aloud. By doing so, someone who relies on this technology can still have a clear understanding of what the image represents.

When image content is discovered, screen readers will announce alt text out loud.

People who use and rely on assistive technology have the most to gain when interacting with non-text content on the web, so it’s imperative to set writing non-text content as a priority for your content authors.

How to write alt text

Photo by Matthew Henry from Burst.

Writing high quality, descriptive alt text may not be as easy as it seems. A quick one-liner of “Cat on couch,” “white shoes,” or “group of people,” doesn’t quite do the trick of painting a mental picture.

On the flip side, it is possible to overwhelm someone with too much descriptive text. Getting that fine line of descriptive precision is something of a skill or an art form to master.

An exercise in describing images

The next time you need to write some alt text to describe an image, try this exercise:

1. Pick a photo which requires alt text.
2. Sit next to a colleague, friend, or family member.
3. Without showing them the photo, describe out loud the image details.
   • If it’s a group of people, describe where they are or what are they doing.
   • If it’s a scenic sunset, describe how the sun might be beaming off the surrounding trees or buildings.
   • If it’s an image of a product being sold, describe its physical features with enough detail in order for someone to consider making the purchase.
4. After you’ve described the image, show them the photo and ask them to compare what they pictured in their mind against the real thing.

In doing so, you’ll have started the process of writing a description for the image. You might need to adjust and pair down the description appropriately for written content, but you’re well on your way to adding helpful and useful alt text for your image.

An example

Let’s write some alt text for the image below.

Photo by Shopify Partners from Burst.

For this image, an accurate description might be something like:

“A pair of low-top shoes are placed on top of a dark-brown table in front of a white brick wall. The shoes are mostly dark blue with a white midsole, brown laces, a black back tab, and white lining.”

This description is pretty accurate, but a little too wordy. Since we’re describing a product we can focus directly on the product’s physical features.

Let’s cut the description back to just the essential, such as:

“Dark blue, low-top shoes with white midsole, brown lace, black back tab, and white lining.”

This alt text does the trick; it describes the image in a clear and precise manner, not overwhelming someone as they take in the content.

Does punctuation matter?

You may have noticed the use of punctuation in the alt text description of the image above. Does this make a difference in how the image description is conveyed to someone using a screen reader?

The simple answer is, yes. By using proper punctuation such as commas or period characters, this helps screen readers describe the image in more of a “human” sounding approach.

• Commas will add a short break in between announcing content.
• Placing a period character at the end of a sentence will cause the screen reader to, “take a breath.”

As with any well structured content, people who consume alt text using a screen reader also benefit greatly from proper sentence structure.

A little more on the alt attribute

Photo by Matthew Henry from Burst.

When writing HTML code, it’s important to always include the alt attribute on an image element. Without this attribute, you risk running into some issues:

• Without an alt attribute, your HTML markup is considered invalid and may result in an inconsistent user experience.
• When a screen reader encounters an img element without the altattribute, the src attribute value is announced. This is often not helpful and can be regarded as a poor user experience. Just imagine hearing, “cute-cat-photo_4460x4460.jpg” to describe the image above.

With this in mind, whether you’re working with Wordpress, React, or plain HTML, remember to always include the alt attribute when including an image in code.

The alt attribute in code: HTML

Adding alt text to an image when writing plain HTML is a matter of adding the alt attribute to an img element.

For example, the HTML for the above image would be:

<img src="cat.jpg" alt="A long-haired, grey and white cat with green eyes rests on a dark grey, fabric couch.">

When this image is interacted with by a screen reader, the alt text will be announced helping to provide the mental model required to gain an understanding of the image content.

The alt attribute in code: Markdown

Markdown is a method to write and provide structured content for the web in a quick and easy manner.

How to create image content using Markdown is a matter of starting a new line of text with an exclamation mark, followed by a pair of square brackets which includes the alt text, then a pair of parentheses which includes the URL path to the image being served.

For example:

![A long-haired, grey and white cat with green eyes rests on a dark grey, fabric couch.](cat.jpg)

When the Markdown interpreter runs to convert this to HTML, it will look and behave the same way as the previous HTML example.

When to include alt text

You might be tempted to always include some sort of text within the altattribute in order to cater for the cases outlined above. However, the fact remains that not every image should have a value set for its alt attribute.

Making the decision

How do we know when to include alt text for our images? Here are three common situations to consider if alt text should be added or if the altattribute should be set as empty.

1. If the image itself contains text, such as a logo or an inspirational quote embedded within the image, the alt attribute value should be an exact match of the visible text.
2. If the image doesn’t add any valuable content to the article, or is adjacent to related text content, the alt attribute value should be left empty. This results in screen readers bypassing the image altogether as it is considered a “decorative” image.
3. If the image is considered to add content or value to the article, add descriptive alt text. As discussed earlier, it should describe the photo, but not so much as to overwhelm the person consuming the content.

There are more examples and situations to consider. For a more comprehensive list, check out the tutorial, “An alt Decision Tree.”

Adding alt text within Shopify

We’ve learned about why adding alt text is so important to the success of a site and how to write quality content with an appropriate length. With this in mind, how do we take our alt text content and add it to product images or images in our theme within Shopify?

Product images

By default, when no alt text is explicitly set, the product title is used for each product image alt text. Depending on the title, this may or may not be quite as helpful as it could be.

Let’s go through the steps of adding alt text to a product image in order to set a more descriptive text alternative and be mindful to all of our users needs:

1. Login to your Shopify Admin panel
2. On the left navigation area, click the “Products” link
3. Search or scroll through your products to find the one in particular which you’ve written the alt text for
4. Click the product title text to open the product description for editing
5. Use the mouse to hover over the image which requires the alt text
6. Click the “ALT” icon link which loads the “Edit image alt text” dialog window
7. Copy and paste your alt text into the “Image alt text” text box
8. Click the “Done” button

And there you have it! Wherever your product image is displayed, the new alt text will be available for anyone to read.

The purpose of this exercise is to help people who use assistive technology to gain a clear understanding of what the image contains, which in turn, will help them to make the purchase decision.

Theme images

Images which are added through the Theme Editor receive a slightly different treatment.

When an image is added, its default alt text value is set to an empty string. Essentially, this sets the image as “decorative,” meaning assistive technology will completely ignore the image and bypass it completely. If the purpose of the image is to be decorative then there’s no need to add alt text.

However, if the image does add value and content to the rest of the page, be sure to write and set the alt text for the image.

The steps to add alt text within the Theme Editor include:

1. Login to your Shopify Admin panel
2. On the left navigation area, click the “Online Store” link
3. In the main content area under the “Current theme” heading, click the “Customize” link
4. Under the left bar Sections tab, scroll through and find the section containing the image requiring alt text
5. Click the section title link to view the content within
6. Click the image title link to reveal its options
7. Click the Edit button which loads the “Edit image” dialog window
8. Copy and Paste your alt text into the “Image alt text” text box
9. Click the “Save” button

Please note: changing the alt text for an image in the Theme Editor isn’t considered changing a theme’s setting; it’s changing the asset properties. As a result, you’ll need to make an additional change to your Theme in order to allow use of the Save button in the very top-right of the screen.

After this action and then clicking the Save button, your alt text will be available.

Other Platforms

If you’re running a social media account for your business, it’s a great idea to also write and add alt text for images you attach to your posts. Let’s look at a few other platforms to see what they have available to help us to be more inclusive and mindful of those who may not be able to see the imagery attached to posts.

Twitter

Twitter has a built-in method to add alt text when attaching an image to a tweet. This is a handy feature to be aware of and to use when attaching an image as without, a lot of folks might miss out on your great content!

The process to add alt text is well document in Twitter’s help article, “How to make images accessible for people.”

Facebook

Facebook adds alt text to an image automatically after it’s been uploaded. While the generated text can be mostly accurate, it’s often not descriptive enough to paint that mental image.

The process to override the auto-generated content is document in Facebook’s help article, “How do I edit the alternative text for a photo?”

Medium

Medium features its own method of adding alt text to images. Here’s how to accomplish this:

1. Set your article to Edit mode
2. Mouse hover the image to highlight and then click the image
3. Click the “Alt text” button
4. Add your text alternative content

Note: when no alternative text is added to an image, Medium does not include the alt attribute which results in screen readers hearing the src attribute content! Be sure to include meaningful, non-decorative imagery in your posts.

Instagram

Instagram also has a built-in method of adding alt text to its images. The steps to add alt text to your posts is outlined in the article, “How do I edit the alternative text for a photo on Instagram?”

Without specifying alt text, Instagram attempts to include an auto-generated description. Like Facebook, the automatic descriptions are fairly accurate, yet lack depth to truly describe the image.

If your platform of choice officially supports adding alt text to images, please remember to use these features whenever you upload a photo in order for everyone to take part and enjoy!

Remember to always include the alt attribute when embedding an image in your code or on social media. When appropriate, set its value to a descriptive and concise text alternative. This way you’ll be creating inclusive content and everyone will be able to take part an enjoy the imagery in your posts!

Resources

• W3C — Web Accessibility Tutorials: Images Concepts
• MDN — <img>: The Image Embed element
• Shopify Polaris — Alternative text
• Twitter — How to make images accessible for people
• Facebook — How do I edit the alternative text for a photo?
• Medium Help Center — Images
• Instagram—How do I edit the alternative text for a photo on Instagram?

If you’re interested in working on our team — check out some of our awesome opportunities.