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.