If you’ve ever dabbled in blogging, designing a website, sending multimedia emails, or other activities that involve adding images to web pages or content, you’ve probably encountered a field for entering alt text. It’s actually pretty important for such a seemingly insignificant little box. Alt text for images serves several purposes, and there are good ways and not-so-good ways to write it. And in most instances, you should take the extra minute to fill it out when you set an image for a page.
What Exactly Does Alt Text for Images Do?
Alt text—which is short for alternative text—is sometimes also called “alt tags,” “alt descriptions,” and “alt attributes.” It has three important functions:
- Alt text contributes to SEO. It tells Google and other search engines what the image depicts, allowing them to index it and potentially return it in results for relevant image searches. In other words, it can be another way that users discover your site.
- Alt text is key to website accessibility for the visually impaired. Assistive technology like screen readers will read the alt text, letting users know that there’s an image and what it shows.
- Alt text covers for you when images don’t load. Sometimes, when people open an email that contains images, or when they arrive on your web page on a mobile device, or in other scenarios, images fail to load. If you filled out the alt text field, this text displays where the image should be, so that users at least know what’s supposed to be there.
How to Write Alt Text for Images
So, now that you understand the importance of alternative text, here are some tips for writing and using it effectively:
- Remember that the number 1 job of alt text is to accurately describe the image it’s attached to.
- So, be descriptive. Don’t say “Eating pizza.” Say “Young girl eating a slice of pepperoni pizza at a restaurant.”
- Include the primary keyword for the page if—and only if—you can do so in a way that makes sense and is relevant to the image description. Don’t force it.
- Shoot for about 100 characters. FYI, most of the screen readers in use today stop reading after 125 characters of alt text.
- There’s no need to start the alt text with anything like “Photo of…” or “Image showing…” or “A picture of…” People and search engines alike understand that the alt text is describing an image.
- Call-to-action buttons can and should have alt text! It just needs to be something simple and descriptive like “Sign up button,” “Buy now button,” “Learn more button,” “Submit button,” and so on.
Alt Null Tags for Images
There are times when you don’t want screen readers or other assistive technology to communicate about an image. Generally, it’s when the image is purely decorative or otherwise adds no value to the content.
Borders, lines, and flourishes are examples of decorative images. Or, if you’re writing about George Washington and have a picture of him next to his name, it doesn’t add anything and can even be confusing if a screen reader announces this image.
In these instances, create what’s known as an alt null tag. It’s added into the image code using HTML, denoted as alt=””.
Why not just leave the alt text field blank? Because that doesn’t indicate to screen readers that the image should be ignored; for all they know, you just forgot to fill it out. When the alt text is just left empty, assistive technology instead reads the image file name, which is often confusing. Adding an alt null tag is necessary for assistive technology to disregard an image.