Including alternative text is an important and easy way to improve the accessibility of your website. Alternative text, or alt text, is a text description of non-textual elements, like photos, icons, and data visualizations. 

However, simply adding alt text to a page is not enough. You must ensure your alt text is both good and meaningful to truly improve the user experience of your site for everyone. 

Good alt text adheres to a few best practices. While meaningful alt text considers an image’s purpose, intention, and context. Writing good and meaningful alt text takes practice. This guide is a starting place to help you: 

• Improve the quality of alt text on your site. 
• Make more intentional image selections.
• Create a richer experience for all your audiences.

Understanding who uses alt text and how it is used

Before going any further, it’s important to understand who uses alt text and how it is used. Understanding your audiences will help you write with intention and make decisions that are right for the experience you are creating. 

A wide range of people use alt text for a variety of reasons:

• People with no vision or low vision: People with no vision or low vision may use Assistive Technology (AT), like screen readers, to either read aloud content on a page or render content as Braille. Screen readers rely on alt text descriptions to interpret images, which allows people who use screen readers to contextualize and experience your content.
• People in low bandwidth areas & mobile users: Images may not display either because of low bandwidth or because a person has turned off images to conserve data. Alt text allows the meaning of an image to display even if the image itself does not.
• Auditory learners: Some people prefer to have sites read to them either because they better absorb the information, are distracted or confused by visuals, or are multitasking.
• Search features and browsers: Alt text allows images to be indexed, which means they are searchable by web browsers and search features.

Do’s and don’ts for writing good and meaningful alt text

The goal of alt text is to provide equal access to the information represented in a photo or to the experience the photo helps to create. While what constitutes meaningful alt text is often up to interpretation and context, these do’s and don’ts will help you stay focused on what matters. 

Do select imagery with care

Only include imagery that is purposeful, intentional, and supports the story your content is telling. Intentional imagery creates a richer experience for everyone and will make writing alt text significantly easier.  

Try: Defining your intention by answering two questions: 

1. Why was this image selected? 
2. What meaning should the audience take away? 

There’s no wrong answers to these questions. Responses will range from images that demonstrate impact or create urgency to images that convey emotion or set a tone.

Tip: If you struggle to answer these questions, consider selecting a different image that better supports your content. 

Do write descriptively

Alt text should describe an image in enough detail to paint a mental picture of what’s represented in the photo without overwhelming people with unimportant information. The right amount of description will depend on the experience you want to create. 

Try: Describing the photo out loud. Consider your intention statement, what details stick out as the most important? Write one sentence that captures those relevant, descriptive details.

Do consider context

Context is key when determining appropriate alt text. The details you decide to include or omit will change depending on the topic and other content on the page.

Not all images require alt text. If you deem an image decorative, which means it provides no new or helpful information, then you do not need alt text and can leave the alt text description field blank. A good test is to remove the image and ask three questions: 

1. Is any information important for comprehension missing? 
2. Would the audience miss out on the experience the image helps to create? 
3. Have I referenced the image elsewhere either through language like “see image below” or through the use of a caption? Referencing a photo then omitting alt text could result in confusion when users are unable to see the photo itself.

If your answer is “no” to all three questions (which should be rare), your image may be decorative. Examples include background textures or images where all the important information is fully described as text on the page.

For additional guidance, reference the W3C’s Alt Tag Decision Tree and their guide to Decorative Images. But, before you write off that image you selected “just to get people’s attention” as decorative, consider this perspective: Text Descriptions and Emotion Rich Images.

Do write concisely

Alt text should be as long as necessary to communicate intention and meaning, but as short as possible. While there are no text limits, aiming for tweet length (125–280 characters) will help you stay focused. Start with the most important information.

Try: Combining your intention sentence with your description sentence and adjust for context. 

If you find it hard to write concisely, your image may be considered complex. Complex images, like charts, graphs, and data visualizations, often require more than just alt text. For more guidance on complex imagery, visit the W3C’s guidance on complex images.

Do use punctuation (but don’t overly rely on it)

Punctuation makes all text easier to understand and alt text is no exception. Screen readers pause for periods, semi-colons, commas, question marks, exclamation points, and paragraph endings. However, a screen reader may skip punctuation depending on the speed setting. Be sure the meaning of your alt text isn’t altered by lack of punctuation. For example: Let’s eat, Grandpa! 

To learn more about screen readers, checkout Web AIM’s Designing for Screen Reader Compatibility.

Do pay attention to you image’s file name

People who use screen readers can set their preferences to read the file name. Anyone pulling the image (via downloading, saving, or otherwise) will see the file name. Clear, relevant file naming is another way to provide information, help with organization, and improve accessibility and search engine optimization (SEO).

Don’t use images of text

As a rule, do not use images of text, especially if that text is your call to action or contains an important message. Not only will the message be inaccessible to screen readers, but image pixelation and small text size makes text difficult for everyone to read (especially on mobile!). 

However, if it is absolutely necessary that you do use an image of text, either be sure to include that text within your alt text description or incorporate the message another way.

Tip for logos: Logos are exempt from this rule and can include text. Set your logo’s alt text description to include the name of your company. You can also opt to add the word “Logo” for additional context. Example: alt=“Forum One logo.”

Tip for social media: Social media posts often rely on images that contain text. For additional guidance on social media images, check out The Federal Social Media Accessibility Toolkit Hackpad, a webinar on Accessible Content Shared Through Social Media, and familiarize yourself with each platform’s accessibility features. (Examples: Twitter, Instagram, Facebook).

Don’t include words like “image of” or “picture of”

Screen readers announce an image with the word “graphic” or “image” so including a similar word in your alt text is redundant. There is one caveat: if you feel a word provides important, contextual information, then it’s ok to include. Common examples are “logo,” “illustration,” and  “chart.”

Don’t include information beyond what is represented in the photo

Avoid using alt text to provide additional information or context that isn’t otherwise discoverable on the page or by looking at the image. Examples include photo credits or a program name. That type of information is better suited for a photo caption.

Tip: When you use captions and alt text in conjunction with one another, the caption text should include background information you wouldn’t know just by looking at the photo. Alt text should then describe the image itself.

Don’t repeat information

Alt text should not repeat or copy/paste information that is available nearby. For example, don’t use the same description for both an image’s caption and its alt text. Doing so results in duplicative explanations.

Don’t keyword stuff

Alt text supports SEO because it includes your images as searchable content. However, you should never use alt text to cram unnecessary or disjointed words with the intention of boosting SEO. If images are purposeful and thoughtful, alt text will naturally include keywords as part of the description. For more information on SEO and accessibility, read SEO and Accessibility: Real Talk.

Other Helpful Resources

• Want more information on Alt Text? Visit WebAIM’s guide to Alternate Text.
• Curious about screen readers and the out-loud experience? Check out Accessibility: Images, “Alt” tags, and the “Out Loud” Experience.
• It’s important to remember that there’s more to accessible images than just alt text. For additional insight, review WebAIM’s Accessible Images and An intro to designing accessible data visualizations.

Conclusion

Atl text is one of the easiest things you can do to improve accessibility. But it’s also one of the hardest things to do well. Thoughtful image selection, combined with a few best practices, and mixed with intention will improve not only the quality of your alt text, but will enrich how all people experience your content.