Alt Text: Why It's Important For Accessibility | Compliant

Alternative text (alt text for short) describes the content and context of an image on a webpage. It is sometimes referred to as alt attributes or alt descriptions. Some even referred to them as alt tags, though there is debate as to whether that term is acceptable.

Adding alternate texts to the images on your website is a very important element for compliance with web content accessibility. It is also an important principle and one of the best practices for search engine optimization (SEO), specifically image SEO.  

Alt text not only helps you stay in compliance with web accessibility guidelines, but it also helps boost search engine optimization of your website, which can improve search result rankings and provide a better user experience overall.

What Is Alt Text?

Alternative text is essentially an embedded attribute in HTML code to provide a textual alternative to visual content or images, e.g., image alt text. As an alt text description, these textual alternatives help describe the appearance and the function of an image on a page.

They can also provide additional information for complex images, such as graphs, charts, diagrams, illustrations, and other graphics. This can also apply to a button, an icon, or logos. But, they can also be as simple as providing an image file name.

It is important to realize that alt text attributes do not merely state the content of the image, but they are also descriptive text providing context as well.

For example, “dogs and beach” is not alt text. Alt text might be: “Two dogs running on the shore of Daytona Beach chasing a Frisbee.” There is a difference, and it involves much more than tagging a few keywords.

Generally, alt text attributes are made to be compatible with all image formats, including JPEGs, PNGs, and GIFs. It is important to note that alt text attributes may not apply to decorative images; these do not add information to the content of the page. Many times, the topic or description is already given using an adjacent text. In these cases, a null or empty alt attribute can be provided (e.g. alt text = “ “).  

Since the alt text attributes are placed in the code surrounding the image, they are usually only visible when the images do not or cannot load. However, they can be utilized in other ways, which we discuss below.

What Is the Alt Text Attribute Used For?

As mentioned above, the purposes of alt text attributes are twofold; They are an essential tool for optimizing web content, such as image SEO, and for promoting web content accessibility.

But, another fundamental purpose of high-quality alt text is for enhancing the overall user experience. This goal often gets overshadowed. Many companies merely seek to rank higher in search engines or an image search without the user experience in mind.

Here are a few suggestions to that end, as it relates to alt texts:

• Provide relevant image content – Visual content should be relevant to the topic of the page and should only be added when they truly add value to the experience. Alt text should complement this.

• Image placement is key – It is important to optimize the placement of images. They should be placed near relevant texts, with the most important image at the top.  

• Don’t embed text attributes inside images – Important texts should not be embedded in images, especially text elements such as headings. Alt texts were made for this purpose. Use them instead.

SEO

In simple terms, search engine optimization (SEO) is a digital marketing strategy that helps improve your website by increasing its visibility with search engines, such as Google or Bing. Better visibility means better search results, which means a greater potential for customers.

This is done by using relevant keywords, multimedia, anchor texts for links, and alt text attributes. Search engines like Google use programs, referred to as bots or crawlers, to collect data from all the various pages on the internet. From there, these crawlers index relevant information so specialized algorithms can create relevant page rankings.

One of the primary purposes for alt text attributes is to improve image search rankings, such as the ranking of Google images. In fact, failing to provide alt text for images on your page can drive down rankings. In effect, an image with no alt text attribute constitutes a grey area on your content page.  

Better optimized alt text attributes, and context surrounding the image can lead to higher quality traffic to your site. Google actually provides information on best image SEO practices.

Accessibility

Another purpose for alt text is for web content accessibility, which seeks to provide equal access for all to the content on the internet. In fact, alt texts attributes are required to be in compliance with accessible web design.

Why Is Alt Text Important for Accessibility?

Accessibility is a requirement for public accommodations (internet) per the Americans with Disabilities Act. The standards and guidelines for web content and design accessibility were created by the World Wide Web Consortium (W3C) and are outlined in the Web Content Accessibility Guidelines (WCAG 2.1).

It ensures that equal access is made for those with disabilities. This includes those with visual impairment (e.g., blind or low vision). Two key components of the guidelines are that the content must be “perceivable” and “distinguishable.” This applies to images.

Alt text attributes help to provide information (content and context) for images that cannot be seen by users with visual impairments. Many of these individuals use screen readers that are optimized to read alt texts. Alt text allows a screen reader user the ability to appreciate the content of the website without being able to see it.

What Should Alt Text Attributes Contain?

Creating an alternate text attribute is not difficult, but it does take practice. Again, all informative images should receive an alt text attribute. This applies to images that contain important texts, hyperlinks (longdesc attribute), buttons, logos, etc. Basically, anything that requires context to understand and appreciate.

The focus should be on making the alt text attribute short and succinct while using relevant keywords. Typically, 80 characters or less. Avoid long descriptions. Web crawlers don’t like spam or irrelevant keywords such as phone numbers or lists. This is referred to as keyword stuffing.

Longtail Keywords

Alt texts should contain long-tail keywords when possible. Long-tail keywords are longer and more specific keyword phrases that users are more likely to use together during search queries.

Basically, these are used because they are easier to rank and are targeted towards a specific audience. The downside is potentially less site traffic, but the point is to pull in quality site traffic.

Specificity

Your alt texts need to be specific. Some confuse specificity with detail. These are not the same thing. You can add loads of detail about an image but still miss the point. If anything, alt texts require specific details.

When you narrow down on the specifics of an image, search engines have a stronger likelihood of ranking them higher in the query index. For example, if your image is of a football player scoring a touchdown, it requires more than simply “a football player scoring a touchdown,” Specificity might include the player’s name, the team, and the stadium or the field.

Context

Equally as important is having a clear context. Context is everything when it comes to alt text attributes. This is the who, the what, and the where. Keep in mind, the alternative text of a specific image could vary greatly from the text that surrounds it. Not to mention, relevant context is an essential practice to ensure accessibility.

How Can We Add Alt Text Attributes to Images and Links?

The procedure for adding alt text attributes depends entirely on the platform being used. Most content management systems (CMS), like WordPress, allow users to embed alt text into the HTML or CSS as they build the blog or page.

Some allow you to simply click on the image in the body of the blog to optimize the image or links. Also, Microsoft Word even allows you to add and edit alt text attribute from the Word Document.

In order to find areas of improvement, it is always a good idea to perform a basic audit on your content to see where you can incorporate alt texts.

Conclusion

Alternative text attributes serve a twofold purpose: To help improve the overall SEO of images and content on your website and to comply with web content accessibility guidelines.

All the best alt text practices help improve the bottom line, from search engine rankings to boosting site traffic. But, more importantly, it promotes equal access to internet content for all.

That is a win-win for everybody.