Alt Text is one of those small details on websites that frequently get overlooked or are done in a hurry, minimizing their usefulness. No doubt you’ve moused over an image only to notice an unhelpful caption similar to “img_435.png” which is simply an unmodified filename. While this makes little difference to the normal user experience on a site, the point of the image is the visual component, after all.
Alt text makes a difference to both search engine rankings and the accessibility of your site. Vision-impaired web users often rely on programs that read image names and descriptions when browning websites. In terms of design intent, providing a basic description is primarily aimed at these visually impaired users.
Let’s explore how this broader accessibility and the extra metadata provided by alt-text descriptions help you as a business.
How Does Alt Text Affect Your Website?
There are four main ways that alt text directly affects the function and success of your website.
Alt Text Improves Accessibility
As mentioned above, alt text allows sight-impaired web users to interact with your website in a more meaningful way. By getting a basic image description, they can better understand what you’re trying to add to the written content using a visual aid. This is also helpful if someone who isn’t visually impaired is having trouble interpreting an image. Even something as simple as a “before and after” tag on an image can help clarify the meaning of an image that might otherwise be confusing.
Alt Text Helps You Rank on Google Images
Did you know that Google Image searches constitute about a fifth of all internet searches? If you sell physical objects or visually discernable services, having a presence on google images will help to direct people to you over your competitors with similar products and services.
Even if you don’t expect to get much traffic from a Google Image Search, it is helpful to have a strong presence on this front as it helps you control and strengthen your visual brand. When someone does an image search for your company, brand, or product, you want a picture you put out there to come up first, or you’re at the mercy of the opinions of whoever created or uploaded the highest-ranked images.
With the modern prevalence of meme images and unconventional bad press vectors, the last thing you want is a competitor, a disgruntled former employee, or an unhappy customer strongly influencing online opinions about your brand.
Alt Text Improves Your Site’s Topical Relevance
Despite how advanced the search engine has become, Google can’t really understand the context an image provides on a webpage. Even as AI analysis of art and other images is becoming prevalent, discerning meaning from a raw image is a serious computational challenge that search engines haven’t cracked. What search engines are exceptionally good at is interpreting text and ranking websites based on that analysis.
Alt text provides search engines like Google a vector for understanding how your images inform your written content. This is essential for low word count websites to rank for the most relevant keywords and helpful for making a stronger case for a better search engine ranking in general.
Alt Text Serves As A Literal Alternate For An Image
If you remember the days of dial-up or relying on a spotty connection, you’ve seen images fail to load on a website many times before. When this happens, the alt text is substituted for the image. This low-data alt text loads faster and gives you a clear sense of what was supposed to be there… unless the alt text isn’t very good. “Img4865” doesn’t provide a lot of contest for what you’re missing, but “Diagram of SEO Priorities” provides clear context and a general sense of what’s now missing from the page. Users are a lot more likely to be curious and patient if they have that extra context, improving your engagement rates.
The Importance of Alt Text Embedded In Image Links
While many links are embedded in the text of websites, often images of your brand’s logo, your products, your personnel, and so on make sense as links to relevant pages. Google uses the Alt Text assigned to the image link to understand more about the link and why you’re linking to it. Effectively, it’s the same as the anchor text you use when embedding a link directly in your site’s text. Here’s what Google has to say about this, “[…] alt text in images is useful as anchor text if you decide to use an image as a link.”
How To Embed Alt Text In Images
Embedding Alt text is pretty easy. If you’re able to modify your HTML code directly, here’s how to add alt text:
Simply add an alt attribute to the <img> tag in the HTML code.
Here’s an example:
<img src=“PortlandMaineHarbor.png” alt=“Portland, ME working waterfront”>
Any modern website-building platform will also have a way to add alt text without having to mess around with HTML code. This is a little different for every software solution, so if you use something like WordPress or Squarespace to build your site, check their documentation to learn how to add alt text to images easily.
Does Every Image Need Alt Text?
Not every image necessarily requires alt text. As a general rule of thumb, if an image has content that adds to your web page, whether it contains explicit information, such as statistics or a graph, or implicit information, such as an image of your product, it should have alt text. However, if your image is there purely for decorative purposes, especially decorative elements, having an alt text is likely to do more harm than good. Google doesn’t need to know that “redtriangle.png” is “red triangle website element” and neither does a visually impaired user. It will only add more potential context to your content that distracts from the real content.
In this case, it’s helpful to include a blank alt text when an image doesn’t add meaning to a website. This is because it’s possible for screen reader software used by the visually impaired to browse webpages will read out the name of the file used. By including an empty space for the alt text, you avoid situations where names like “redtriangle.png” keep getting announced, interrupting the real content.
When altering HTML, you might accomplish this for the example using this code:
<img src=”redtriangle.png” alt=””>
Alt Text Writing Best Practices
Writing alt text isn’t too difficult, but there are a few best practices to keep in mind for the best results on your website.
- Keep descriptions short – Often, too much text is distracting and unhelpful.
- Keep descriptions accurate – Remember who this is for: this is an alternative to seeing the image; an accurate description is necessary for it to be valuable.
- Don’t stuff keywords into alt text – If there’s a keyword in your description, it should be there because it’s accurately describing the image. Keyword-stuffing images can backfire.
- Don’t bother mentioning it’s an image – This is implied and understood by visually impaired readers and Google.
- Don’t repeat what’s already in your text – If you have an image that features a person, and you specifically refer to that person immediately before or after the image, it’s not necessary to add alt text.
Bonus tip
Always include alt text on your call-to-action buttons. Otherwise, screen readers might skip over them!
Examples of Bad, Okay, Good, and Great Alt Text
Keeping these best practices in mind, let’s look at some example alt text for the image below.
Bad: <img src=“colofulpinata.jpg” alt=“picture of a pinata”>
Okay: <img src=“colofulpinata.jpg” alt=“pinata”>
Good: <img src=“colofulpinata.jpg” alt=“colorful pinata”>
Best: <img src=“colofulpinata.jpg” alt=“hanging colorful donkey pinata”>
Having the right balance of detail and a minimum of filler words can be somewhat challenging, but you essentially want the combination of words to present a basic sense of the image in as few words as possible.