If you’re learning about digital accessibility, you’re going to read a lot about image alternative text (alt text). It’s one of the most basic techniques for improving experiences for users with vision disabilities — and while digital accessibility isn’t just for people who are blind, alt text is an easy way to improve web content.
Missing alt text is also frequently cited in non-discrimination lawsuits filed under the Americans with Disabilities Act (ADA) and other laws. However, while missing alt text is a big problem, low-quality alt text can be just as disruptive.
In this article, we’ll provide a few basic techniques that can help you write image alt text more effectively (and avoid common mistakes that impact accessibility).
Alt text should be descriptive, but concise. Screen readers (software that outputs text as audio) will generally read the entire description, and if you include a ton of unnecessary details, you’ll frustrate your users.
So, how can you strike a balance between being concise and providing enough detail?
Imagine that you’re reading your website to a friend over the phone. You need to explain the purpose and context of the image:
The “friend on the phone" method is an excellent tool for writing alt text, because most of us have been in that exact situation — and it’s much, much easier to build for accessibility when you empathize with the end user.
Related: Using Emoji Could Be Excluding People From Your Conversation
Most images are there for a reason: They help you tell a story, illustrate concepts, or invite your users to take action.
Open your website and take a look at the content. Why did you choose those specific images to get your point across?
Your alt text should serve the same purpose as your images. When you’re adding images to your website or mobile app, think about how the image supports your brand identity and messaging. Then, write alt text that conveys the same information in a concise, informative way.
For example, let’s say your website features an image of a person smiling while using a computer. Basic alt text would simply describe the image: “Person smiling at computer.”
You could improve that alt text by connecting the image to the purpose of the website. For example, if your website sells software, the alt text could be something like: “Happy professional using productivity software on their computer.” If you sell cars, you might write: “Happy woman buying a car online.”
By providing a bit of additional context, you can make your content more engaging. Just avoid getting too salesy — don’t pitch a call to action in your alt text (unless you’re directly transcribing text that appears in the image).
Related: Alt Text Isn't "One and Done:" Providing Users with Context
This sounds obvious, but so many developers and designers skip this step!
Get into the habit of right-clicking images and selecting “inspect element" to view the alt text. You can also use browser extensions like Image Alt Text Viewer on Chrome and Image ALT on Firefox (note: the Bureau of Internet Accessibility doesn’t officially endorse browser extensions, and we have not tested these extensions to make sure that they work on all types of images).
Ask questions:
Regularly reviewing alt text can also show you what your competitors are doing correctly (or incorrectly). Learn about the many business benefits of digital accessibility.
You don’t always need alt text. Some images are purely decorative; those should have empty (or null) alt text tags. A null tag tells screen readers to skip the image without presenting it to the user.
Here’s what a null alt text tag looks like:
<img src="image.jpg" alt="">
Note that we’re not leaving the alt tag off entirely — we’re just leaving it blank. If the alt text was missing, screen readers would announce something like “image,” which isn’t a great experience.
If you’re not sure whether an image is purely decorative, read: When Should I Use Empty (or Null) Alt Text Attributes?
Prioritizing accessibility will help you create content that works for a wider range of users. When you start thinking about accessibility from the beginning of your web development process — instead of after-the-fact — your website will be easier to navigate, more user-friendly, and more effective at communicating information.
To learn more about the best practices, download our eBook: Developing the Accessibility Mindset. If you’re ready to see how your website stacks up against WCAG checkpoints, get started with a free accessibility scan from AudioEye.