Clear, conversational writing helps users understand what they read on your website. It also helps users understand the content in your images’ alt text.

Alt text is more than just a few words that you quickly add to an image attribute. Images, like text, are part of your site’s content. When people can’t access the images on your site, alt text helps them understand your content.

In her accessibility guide, Accessibility Teaching Resources, Virginia DeBolt explains how you can write meaningful, useful alt text:

Think about alt text by imagining you are reading a web page to someone over the phone. When you come to an image that adds meaning to the content, what words do you use to describe the image to the person you were talking to? The image should be meaningful in the context of the content of the page, and the alt text should explain that meaning.

Read your alt text out loud

After writing the alt text, read it out loud. Reading your content out loud helps you determine if the content is appropriate and written in a friendly, non-robotic tone. Kate Kiefer Lee, communications director at MailChimp, explains this technique on her blog:

As you read aloud, pretend you’re talking to a real person and ask yourself “Would I say this to someone in real life?” Sometimes our writing makes us sound stodgier or colder than we’d like.

Remember to keep alt text short

Write meaningful, human-relatable alt text. Keep alt text as brief as possible without sacrificing clarity. Concise alt text helps someone, who is using a screen reader, get the gist of the image quickly.

In our previous post about alt text, we asked you to imagine you’re designing a website for a robotics product called WidgetWonder. Your website displays a photo of kids using WidgetWonder products at home. Alt text for this photo could say something like, “Two kids build a remote-controlled car in their kitchen with WidgetWonder.” This alt text explains a lot about the image. It’s also relatively short (about 75 characters).

Learning accessibility at Center Centre

We’ve baked accessibility into our program at Center Centre. In our courses, students learn accessibility tips that are relevant to each course. For example, the Copywriting and Content Strategy course helps our students learn how to create content that is useful and accessible to the design’s users. During team projects, students will apply accessibility principles they learn to the designs they build.

Become a Center Centre student

Would you like to learn how to make designs that are accessible for users with diverse needs? Would you like to graduate from Center Centre as an industry-ready, junior UX designer? View our full program or apply today.

When you build a website, it’s good practice to include alt text (alternative text) with images. Alt text describes images on the web.

To include alt text, you insert an alt attribute into an HTML image element. An element with an alt attribute might look this:  
 
<img src=”/images/cat.jpg” alt=”Orange cat sleeping on a chair” />

People with visual impairments may rely on alt text to use your site. Some visually-impaired users use screen readers to access the web. When images have alt text, a screen reader reads that text out loud to the user.

While including alt text is straightforward, writing useful alt text takes a bit of thought.

Ask this question when writing alt text for images

Every time you write alt text, ask yourself, “Do I need to describe what this image does, or do I need to describe what this image is?”

For functional images, write alt text that explains the purpose of the image. For example, imagine you’re building a website for your company, WidgetWonder. WidgetWonder’s logo appears in the navigation menu, and it links to the site’s home page.

The alt text “WidgetWonder logo” would accurately describe the logo, but the description isn’t helpful to someone using a screen reader. In this case, someone using a screen reader doesn’t need to know what the image looks like. She needs to know what the image does. Consider using alt text like “WidgetWonder home page” or simply “Home.” This tells her that the logo goes to your site’s home page.  

Sometimes, describing what the image does is most important. Other times, it’s more important to describe the image itself. Decorative images can simply be decorative, or they can be part of your site’s content. When images contain illustrations or photos that give users meaningful information, use alt text to describe what’s in the images.

Suppose WidgetWonder sells robotics products for elementary school-aged kids. A customer accesses your site with a screen reader. She’s shopping for robotics toys for her two children.

Your website displays photos of kids using WidgetWonder products at home. Alt text for these photos could say something like, “Two kids build a remote-controlled car in their kitchen with WidgetWonder.” This alt text tells the customer what’s happening in the photo. It also demonstrates how her children can use your product.

Write alt text that’s useful and accurate

Simply including alt text usually isn’t enough to make your images accessible. The alt text has to be useful. For more information about alt text, and to learn more about accessibility, read Virginia DeBolt’s accessibility guide, Accessibility Teaching Resources.

Learning accessibility at Center Centre

We’ve baked accessibility into our program at Center Centre. Students won’t just learn how to write alt text that’s useful and meaningful to their users. They’ll learn other things like how to write accessible content and how to observe accessibility needs during user research. During team projects, students will apply what they learn about accessibility to the designs they build.

Become a Center Centre student

Would you like to learn how to make designs that are easy-to-use and accessible? Would you like to graduate from Center Centre as an industry-ready, junior UX designer?  View our full program or apply today.