Accessibility 101: How to Write Effective Alt Text

Ilia Jones | March 2022

When creating our websites, it’s natural to have the visual aspect front-of-mind, but what about the things our website users don’t see? Many of our marketing efforts are based in the visual realm, from stellar hero images to unique fonts and colors that differentiate our brand, but there are important pieces to your website puzzle that operate behind the scenes.

For the portion of the population who are blind or have vision impairments, sensory processing disorders, or even learning disabilities, making the internet accessible means opening up the world. 

Accessibility is a moving target. Even if you think you have a strong digital marketing strategy in mind or have added the necessary tweaks, things can change. As you introduce new technologies and add new website and marketing tools to your tool belt, you may face new and evolving accessibility issues. Keeping on top of the latest accessibility techniques is key to making The Web for Everyone™. 

What is Alt Text?

Alt text, or alternative text, is the text that can be displayed instead of an image or can be read by a website reader. It’s used to describe the image so that someone who may not be able to see it doesn’t miss out on the context that the image provides. 

Search engines also rely on alt text. Search engines read the alt text because it gives meaning to or describes an image on a web page. This means that the better the alt text on an image, the better it provides helpful and meaningful information, the more likely a search engine will find it useful. And when search engines find useful information, they are more likely to rank that page higher on the results page. 

How to Write Effective Alt Text

Writing excellent alt text is as much an art as a skill. It must be contextual, provide valuable information, and help the user. Keyword stuffed or nontopical alt text can actually harm your search engine results. And it will be of no assistance to your website users. 

Be Specific and Concise

Describe what is happening in the image in as few words as necessary to explain why the image is there. Be clear in what the image shows and how it relates to the content on the page. Don’t get into the nitty-gritty, don’t add unnecessary emotions or feelings (unless it’s part of the context), and don’t include overt descriptions or make assumptions of gender or race.

Most alt text is cut off at around 125 characters, so you don’t have a lot of real estate to editorialize with. 

For example, if the page content is about how wonderful fresh air is for kids and the image contains a boy with brown hair playing happily in the green grass with a red ball. 

• Great alt text would be: A child playing outside with a ball.
• Not great alt text would be: A boy aged about 6 is joyfully playing with a red ball in the park and smiling at his dad, who is taking the picture. 

Leave Out The Unnecessary

Because alt text is used to describe photos and other visual imagery, it’s entirely unnecessary to start your alt text with “picture of” or “image of.” And if you are putting it on every image on a page or website, it will get really repetitive for the user. Remember that you have to be careful with your wording to avoid going over the character limit, so get rid of anything that is repetitive, not needed, and not helpful. 

However, if you want to describe the type of image within the content of the page, that can be helpful. Using a descriptor such as a headshot, screengrab, infographic, or illustration can provide valuable context. 

Don’t Keyword Stuff Your Alt Text

Using relevant keywords in your alt text is fine. As we’ve mentioned, alt text is used by search engines and can help your page rank. However, cramming in keywords that don’t describe the image or the image’s intent on the page won’t help. 

Search engines cannot decipher “bad” alt text from “good,” but they are very good at spotting keyword stuffing! 

Odds are, you’ve selected the images on your web pages because they correlate to the copy they share the page with. And that copy was likely created with an SEO strategy in mind. Therefore, there’s no need to add more keywords into your alt text in the same way you wouldn’t keyword stuff your headings. 

Include Text in Images

If you are using images with text in them, it is essential that you include that text as part of the alt text. The in-image text is providing value to your readers, so don’t let that value get lost on your site visitors that use website readers. 

However, if your image is a pull quote from the blog post or contains other wording already on the page in text format, there’s no need to create alt text for it.  

Remember that alt text is meant to be helpful. Being repetitive is not beneficial. And it can come across as annoying or condescending. 

Ignore Decorative Elements

If your website uses decorative bars, boxes, or banners, there is no need to add alt text to them. They are used to break up text and add space or order to the page, not provide context.

Design elements and branding are visually exciting. For an able-bodied audience, they may add valuable space between chunks of content or add a consistent look and feel to your website. However, unless they are imperative to understanding and enjoying the content on the screen, they don’t need alt text. 

Ideally, you have added these elements via code on the backend of your website. If they are images, if you skip the alt text, screen readers will skip over them. In this case, that is precisely what you want them to do. 

The Best Way to Check if Your Alt Text Is Effective

Testing out your alt text before hitting publish is a great way to make sure that the alt text you’re using is actually adding value. Try reading your alt text aloud as part of the page content. If the language makes sense and fits in with the overall topic and theme, then you’re on the right track to improve your website’s accessibility.