Writing for all people: how to use alternative text well

This is the third post in a series on accessibility from Shopify UX’s team. We’re publishing posts every two weeks. Check out the introduction.

Text lets us understand the meaning of things, which is why accessible text should always convey clarity and be meticulously implemented. Ryan Frederick’s In Plain Sight: Text, Contrast, and Accessibility showed how contrast helps us tell things apart and why having enough contrast on text is essential. For this post, I’m going to dive into one form of accessible text called alternative text.

So what, exactly, is alternative text? It can be thought of as a text replacement for an image and is often represented by the ‘alt’ HTML attribute, alt=“”. Screen readers announce the alternative text to explain the image meaning to a person who is visually impaired. Alternative text is typically not visible on a website, but instead added in the background. These images can range from icons and calls to action (CTAs) to navigational menus and tables.

At Shopify, we care a lot about accessibility. Our product content team is actively working on a guide to educate everyone internally on the standards around appropriate usage of alternative text and other considerations like content hierarchy, directional language, and descriptive links. By everyone, I mean developers, designers, marketing managers, essentially any contributor, each with varying levels of experience and expertise in this field.

Now that we understand what alternative text is, how do we put clarity and meticulousness into practice while remembering SEO considerations?

Handling images properly

Good alternative text helps visitors navigate the site. To figure out the images that need alternative text, evaluate which ones add clarity to your content by asking what purpose it serves (the “why”) and its relevance to your audience.

Here are two examples to help illustrate this principle:

Example 1: Empty alt text

Image of clipboard and pencil that doesn’t need alt text

Why? This image doesn’t add more clarity to this task. Alt text is predominantly used to convey valuable information rather than a description of an image.

Images, like this one, are often referred to as decorative images. They all have an HTML image tag, <img>. All images tags need an alt text attribute. Even if an image doesn’t need a description, we need to let the screen reader know to ignore it with code like so:

                           <img alt="">

Example 2: Descriptive alt text

Image of Shopify POS app on iPhone and Android smartphone and tablet that needs alt text

Why? It conveys useful content. It indicates which devices the product can be used on.

alt="Shopify POS app on iPhone and Android smartphone and tablet"

Write as carefully as you would code

To successfully implement alternative text, you’ll need to get your hands dirty with some basic HTML. When writing code, little details matter. Keep in mind that forgetting a period could break everything.

You now know that all HTML image tags need an alt text attribute. What about the things that aren’t classified as an <img> element, but appear to be images? For things like CTAs, we use an attribute called aria-label.

The various HTML attribute combinations could be a post on its own — I’ve highlighted some of the most common situations we’ve come across here at Shopify.

Image of a close CTA represented by an X that needs accessibility text

If an image is an icon or CTA that needs explanation, then it needs the ‘aria-label’ attribute.

<button aria-label="Close" onclick="myDialog.close()">X</button>
Image of a learn more button that needs accessibility text

Vague CTAs presented after sections of copy like ‘learn more’ and ‘apply now’ need further indication of where the audience will be sent after selection. For example, for ‘learn more’:

<a href="[CTA URL]" aria-label="Learn more about opening an online store with Shopify">Learn more</a>

Be conscious of acronyms. There are different types of acronyms — ones that need to be read out as a word and ones that need each letter read out. Depending on the screen reader, the format will be: alt=“nasa” for the former and alt=“POS”or alt=“P O S” for the latter. Although this may seem pretty straightforward, it’s actually a pretty complex issue that we’re still trying to figure out here as font styling plays a role in how screen readers recognize acronyms. Surprisingly, even using CSS to make lowercase letters appear uppercase can cause some screen readers to read the text one letter at a time.

Image of five stars used for review rating that needs accessibility text

Images with a bit more complexity need more logic baked into the code.

<div role="img" aria-labelledby="star_id">
   <img src="fullstar.png" alt=""/>
   <img src="fullstar.png” alt=""/>…
   <img src="halfemptystar.png" alt=""/>
</div>
<div id="star_id">4.5 of 5 stars</div>

<div role=“img” aria-labelledby=“star_id”>= The ‘div’ element is normally just a plain container with no special meaning. By adding ‘role=“img”’, screen readers are told to treat and announce it as an image. Basically, this indicates to the screen reader to ignore the single star child images and pretend the ‘div’ container is one single image. Since it’s an ‘image’, it needs alt text, which is where the ‘aria-labelledby’ attribute comes into play. The ‘aria-labelledby’ attribute associates a value with the image needed for screen readers.

<img src=“fullstar.png” alt=“”/>= The ‘src’ attribute shows the location of the image file. The alt text is empty as the child images don’t require it.

<img src=“fullstar.png” alt=“”/>…
<img src=“halfemptystar.png” alt=“”/>
</div>

<div id=“star_id”>4.5 of 5 stars</div>= The ‘id’ element is being used by ‘aria-labelledby’ attribute to link this text to the description of the image, which is ‘4.5 of 5 stars’.

Don’t forget pronunciation and translation. The HTML ‘lang’ attribute helps speech synthesis tools figure out pronunciation and translation tools figure out what rules to use. Not only are we striving to make interactions with our products pleasurable, we also want to try to make the listening experience of our merchants pleasant as well.

<html lang="en"> — Indicates the language of the page is in English

Interested in other ‘lang’ attributes? Here’s a standard list of ‘lang’ attributes.

For a deeper dive into coding and alt text standards, I highly recommend checking out the Web Content Accessibility Guidelines (WCAG).

Remember the SEO perks

The main goal of alternative text is to provide clarity for visitors who are visually impaired. There’s a side benefit however: like words and images, SEO and accessibility go together like peanut butter and jelly. Alt text is a good way to increase your site’s searchability. Images don’t mean squat to the bots crawling sites for search ranking — it’s the text they’re looking out for.

Another consideration when crafting alt text is to be smart with keywords (the words that people search for) by using your discretion and never tampering with the relevance or clarity of the content just to insert a keyword.

Moral of the story

So now you have some insight into the “what,” “why,” and “how” of alternative text and even some SEO perks that you might not have considered.

Some key takeaways:

  • Handle images well by determining the purpose it has for your audience (i.e. Navigation — your audience will always need to know where they’re heading)
  • Careful coding will make for accessible images (one shoe doesn’t fit all scenarios)
  • Help increase your SEO ranking with well-crafted alt text

This post wouldn’t be just if I didn’t stress how critical it is to always test your alternative text on screen readers as not all will behave the same.

Let me know your thoughts and share with me your alt text insights!