What Is Alt Text?
Alt text is short for "alternative text". It's text embedded in code that describes the content of an image. Alt text has three main uses:
- Describes images for people using screen readers
- Communicates image content to a search engine
- Appears on the screen when an image doesn’t load
In all the above uses, the purpose of alt text is to translate a visual for someone or something who can’t see that visual. Alt text typically isn't visible unless you're using assistive technology.
All images on our website must have well-written, appropriate alt text.
Accessibility
Well-written alt text is crucial to create a quality experience for everyone using our sites. Alt text provides information that someone using a screen reader otherwise wouldn’t receive. Put the same effort and quality into alt text as you put into imagery. Your alt text should reflect the high standard of our brand.
For these reasons, you can't save an image on our website without adding alt text first. Effective alt text is also required by Title II of the Americans with Disabilities Act (ADA).
Our commitment to accessibility drives our desire to create a website everyone can use and enjoy. The information on this webpage will help you go beyond standards and checklists to understand how alt text works and why it's important.
Image SEO
Without alt text, a search engine can’t interpret the content of an image. The reason images pop up in your search engine when you search “golden retriever” is because the alt text told the search engine about the image content.
A search engine pulls more relevant content for users when it has a greater amount of information. Therefore, your content is likely to rank higher if a search engine has informative alt text to add to its understanding of your content.
You strengthen our conversions, traffic, and brand reputation when you write effective alt text.
Alt Text Tips
Follow the nine tips below to write effective alt text.
Note: We recommend you write alt text without the use of AI. While AI can be helpful, it doesn't always understand the full context of an image. AI tools may also not optimize your alt text for our websites. But most importantly, we don't want to give individuals using screen-readers an AI-generated experience for images that are not AI-generated.
1. Always Include Alt Text.
Most webpages on the internet don't include sufficient alt text. Even if the alt text you write isn’t perfect, it still adds a huge accessibility and search benefit to our site. If you remember nothing else from these guidelines, remember to keep writing alt text.
Exceptions for Decorative Images
Some images are decorations and do not add informational or contextual value to the page. In these cases, you should simply write “decorative” in the alt text. Stock images usually fall into the decorative category. Always include alt text for branded imagery.
If you’re unsure about when to include alt text, consult the Web Accessibility Initiative’s decision tree.
2. Be Clear & Concise.
Shoot for 100–150 characters. Some screen readers may stop reading alt text after 150 characters, but this is not a hard rule. Regardless, concise alt text is the best alt text.
3. Focus on Context & Purpose.
Only include information that’s relevant to your content. What you decide to include may change based on visual details that relate more closely with what else is on the page.
4. Be Natural, not Spammy.
Sometimes people will use alt text for keyword stuffing. Keyword stuffing is when you overload your content with keywords to boost your SEO. Search engines and users recognize keyword stuffing. It often comes off as sloppy and doesn’t add value to the page. This leads to a poor user experience and can harm your brand’s reputation. Search engines might even mark your content as spam, which can hurt your rankings further.
Keyword stuffing example: U of U health doctor orthopedics sports medicine South Jordan knee pain symptoms treatment appointment
Good example: A U of U Health orthopedic specialist examines a patient's knee in the clinic.
5. Don't Say "Image of", "Graphic of", etc.
Screen readers always read the word “graphic” aloud before reading the alt text, so including the word “graphic” or “image” in your alt text is redundant, leads to a poor user experience, and bulks up a character count. HTML also has tags that tell search engines where alt text and images are, so including “image of”, etc. is unnecessary for search as well.
6. Add Value & Don't Repeat.
Check the image caption and surrounding text. Information in your alt text should not repeat other page content—it should add value that’s missing for people who can’t see the image and search engines.
Bad: patient visit
Better: Two people sit and talk in a room.
Good: A female patient talks with her provider.
Best: A female patient talks with a urology provider who sits with her in the clinic.
7. Aim for Accuracy & Avoid Judgements
We want alt text to describe an image with accuracy and objectivity. Don’t add opinions or subjective descriptors like “sad”, “attractive”, etc. Just as viewers infer meaning based on what they see, they should be able to come to their own conclusions when reading alt text.
Bad: beautiful bird looks peaceful and sits daintily on a winter branch
Good: A small brown bird sits on a leafless branch in the daylight.
8. Transcribe Image Text.
If an image has meaningful words, you should include those words in the alt text. Include all image text that's crucial for understanding page content.
This is especially important for graphs and informational content. You must include informational image text in the general text of your webpage if you can't add it in the alt text.
Avoid using quotation marks in alt text. Quotation marks may cause screen readers to stop reading the alt text mid-sentence. This creates a poor user experience for people using assistive technology. Simply omit quotes in your alt text or rephrase the alt text so you don't need quotes.
Example: A woman stands outside holding a sign with words that welcome Dr. Rhoads back.
When to Exclude Images With Text
You should not use images that use text to relay important information. For example, do not upload a JPEG of a flyer for an event or with information about a condition. The text on these images isn't accessible to screen readers or search engines. Adding images with text that you don't include in the HTML violates federal guidelines about images and accessibility.
9. Be Mindful of Logos and Links.
You might choose to add an image of an icon or logo and link that image to another webpage. The alt text for these icons/logos with links should tell a user where the link goes. Search engines and screen readers have the ability to read the link on their own, but you create the best user experience when your alt text outlines the image function.
For example, imagine a Facebook icon on a dermatology page that links to the Facebook page for the Department of Dermatology. The best alt text would say something like “Facebook for the Department of Dermatology” instead of “Facebook logo”. This instance has the added benefit of including more keywords related to our webpage, therefore increasing SEO value and accessibility at the same time.