Right before we launched a website, I got asked to write alt text for their entire website. The worst part? It was for a restaurant website. So, for a few hours, I had to look at mouth-watering images of scallops, steak, and heapings of buttered potatoes.
If you’ve ever been tasked with writing alt text, you might’ve groaned a little bit for me. That’s because alt text is important, but it’s a tedious task if you do it in bulk. And it’s not very challenging (this is good news if you’ve come as a beginner: alt text is very easy to do well!).
Here’s what I’ve learned over the years, and how you can write great alt text.
What is Alt Text?
Alternative text (alt text) is an HTML code element which describes both the content and function of an image on a webpage; it translates non-textual elements into text. Most widely used for images, it can also apply to any non-textual element like media, animations, buttons, etc.
Alt text can appear in two ways: within an alt attribute (alt=“”) or within the context/copy of the page itself (think caption or introduction). Sometimes—if the context is sufficient or if the image is strictly decorative—the proper alt attribute is null (ex. alt=””).
Why is Alt Text Important?
Accessibility
Good alt text significantly increases the overall accessibility of a page. Alt text’s original and main purpose is to help people with disabilities (specifically, visual or cognitive) better interpret non-textual content.
Screen readers recognize alt text and voice it to the user. An empty alt attribute (alt=“”) tells a screen reader to skip over the image.
Not only does alt text help those with disabilities, but it also makes it more accessible for every user. If an image fails to load for whatever reason, the alt text will appear in its place to help mitigate the potential for loss of information.
To learn more about web accessibility and how it helps everyone, read our introductory guide.
Search Engine Optimization (SEO)
Alt text also scores you SEO points beyond just title and file name. Although new technology has increased search crawlers’ ability to index images, they still leverage the alt text to help interpret and index the image, and rank your page on search engines.
The Do’s and Don’t’s of Writing Alt Text
Alt text depends on the roles of both the image and the other elements on the page. It’s all about context. There is no single formula for writing good alt text. The needs vary for each individual case. So—how do you know if you’ve written “good” alt text? By following these best practices.
DO be accurate and effective
Alt text should be equivalent in presenting the content (if there is content) and the function (if there is a function) of the image.
DON’T flood it with the descriptions and detail
Alt text is not an outlet for your imagery itch. In fact, the most popular screen readers cut alt text at 125 characters. Keep things short and sweet.
DO use longdesc=””
When an image is complex and needs a longer description to fully explain the content and context, use longdesc=“” to cue the screen reader.
DON’T include “image of,” “picture of,” etc.
It’s already assumed your alt text is referring to an image, so it’s just redundant. However, if the type of image (graphic, illustration, photograph, etc.) is important to the context of the image, include it.
DO include keywords
When it’s applicable, toss in a keyword. For the best results, try to do it at least once on the page. BUT if you stuff in too many keywords, it will make a bad user experience and Google might even think you’re a spam site, flag you, and lower your ranking. As with most SEO best practices, it’s about balance.
DON’T forget about the buttons
Especially on forms. If a button functions as a “submit” action, write it in the alt text. More examples include “search,” “apply,” and “sign up.”
Examples 1
Context: page dedicated to cute dog photos
Okay: alt=“a pug”
Good: alt=“a pug in a blanket”
Best: alt=“a pug wrapped in a blanket sitting on a bed”
The image’s purpose is to showcase the adorableness. The first option just identifies the dog, and the second option doesn’t fully encompass the image. The third is a combination of both, but also short and sweet.
Examples 2
Context: event page for a new restaurant launch party
Okay: alt=“a neon sign”
Good: alt=“a neon sign that says ‘Eat What Makes You Happy.’ Above the word ‘happy’ there are little flecks to emphasize the word”
Best: alt=“a neon sign that says ‘Eat What Makes You Happy.’ ”
The image’s purpose is to help showcase what type of restaurant it is; the text in it adds personality. The first option ignores the text, and the second option gives unnecessary details. The third is a happy medium.
Examples 3
Context: page about female artists
Good: alt=“Beyoncé performing”
Best: alt=“”
The images purpose here is to just give a visual reminder of who Beyoncé is (or maybe it’s to bask in her glory because no one needs to be reminded of the beauty that is Beyoncé). Since the text above the image provides the content, no alt text is needed.
Now, if the article was about her wardrobe, we’d need something like this: alt=“Beyoncé performing in a sparkly, long-sleeved leotard.” It’s all about context.
A Quick Recap
Alternative text…
- Depends on context
- Should balance both the content and the function of an image
- Should be as succinct as possible
Ask “what will someone who can’t see this image need to know?” and then answer it with alt text.
More Alt Text Resources
- Alt Text & Accessibility | Web Aim
- Web Accessibility Tutorials: Images Concepts | W3C
- Image Publishing Guidelines| Google
- Image SEO Alt Tag and Title Optimization | Yoast
- Alt Text Overview | Moz
