Compatibility:

WebSite X5 Evo and Pro from v.2025.1

The very first criterion of the WCAG guidelines requires the use of alternative text for non-text content such as images. At first glance, this might seem like an easy task, but it’s not always that simple: as we’ll see, each case needs to be carefully evaluated to find the best solution.


In this guide, we will cover:


Alternative Text: What It Is and Why It Matters 

Alternative text is a textual substitute for any type of non-text content present on a web page. A classic example of "non-text content" is images, but this category also includes videos, animations, or audio—essentially, all types of multimedia content.


What we explain here applies to all types of non-text content, but for simplicity, this guide will focus on images.


In the code of a web page, alternative text is typically inserted using the alt attribute of the <img> element, and it is not visible to all users. In fact, alternative text is only used when images cannot be displayed properly. There are essentially two cases:

  • Access through assistive technologies – Some users access the web using technologies that transform non-text content into more accessible formats. For example, blind users use screen readers that "read" the content of web pages aloud, or Braille displays that provide a tactile version of the text. In these cases, the description set through the alt text is read by the device to inform visually impaired users about what appears on the page.
  • Blocked or failed image loading – Users who connect from areas with poor internet access or through outdated devices may struggle to load graphical resources, especially if they are large. Some users may also have intentionally disabled image loading in their web browser. In these cases, the alternative text is displayed instead of the missing image.


Beyond these scenarios, alternative text also serves another important function: it provides descriptions and contextual information to search engine crawlers, helping them properly index and classify images.


To summarize, alt text is important because it:

  • Improves accessibility.
  • Helps address technical loading issues.
  • Contributes to the SEO optimization of pages.


WCAG Guideline 1.1

Within the framework of the WCAG Guidelines, which establish the criteria for creating accessible web pages, the guideline concerning alternative text is 1.1 and is very specific: 


Guideline 1.1 - Provide text alternatives for any non-text content so that it can be converted into other forms people need, such as large print, braille, speech, symbols, or simpler language.


For every image on a page, a text alternative must be provided. In other words, every image should have an alt attribute, even if, as we will see, this attribute may correctly remain empty (alt="" or null).


How to Write an Effective Alternative Text

Now that we have established that every image should have its own alternative text, we need to understand how it should be written to fulfill its purpose correctly.


Let’s start with a clarification: alternative text is NOT just a simple description of the associated image, but rather a textual alternative to it. This means that the alternative text must convey an equivalent content and serve the same function as the image. For this reason, it should be written considering the context in which the image appears. Depending on the context, the alt text for the same image might vary significantly.


Take, for example, a photo of a steaming cup on a desk: it could be a purely decorative image in a blog article that does not add anything to the text; it could also be a product photo for a cup sold in an online store; or the product being sold might be the desk, not the cup. Only the context can clarify what content needs to be conveyed and what function the image serves on the page. Once these elements are identified, we can determine how to use them to create effective and useful alternative text.


In general, a good alternative text should be:

  • Precise and equivalent in representing both content and function.
  • Concise. Content and function should be expressed as succinctly as possible without sacrificing accuracy. Alternative texts that are too long can be cumbersome for screen reader users: ideally, they should not exceed 125 characters to ensure they are read fully without being cut off.
  • Not redundant nor should it repeat information already provided in the surrounding text. Additionally, screen readers can recognize that a resource is an image and announce "image" along with the alt text: therefore, there is no need to include "image of" or "photo of" in the alternative text.


Let's put what we’ve explained into practice with an example:


Case 1Case 2Case 3Case 4

Amelia Earhart was the first woman to fly solo across the Atlantic and a pioneer of aviation. She is considered an icon of courage and determination.
Amelia Earhart, aviator

Amelia Earhart was the first woman to fly solo across the Atlantic and a pioneer of aviation. She is considered an icon of courage and determination.
Amelia Earhart, aviator

Amelia Earhart was the first woman to fly solo across the Atlantic and a pioneer of aviation. She is considered an icon of courage and determination.
Amelia Earhart was the first woman to fly solo across the Atlantic and a pioneer of aviation. She is considered an icon of courage and determination.

 

In all four cases, we have the same image and the same text, but in cases 2, 3, and 4, a caption is added. In cases 3 and 4, there is also a link: in case 3, only on the image, while in case 4, on both the image and the caption together. How does the alternative text vary?


Let's start by considering the content and function of the image. The content informs the user that this is Amelia Earhart, while her attire and the presence of the airplane in the background communicate that she was an aviator.


Based on this, a good solution for the image in Case 1 could be: alt="Amelia Earhart, aviator".


A formulation like "Image of the aviator Amelia Earhart" would be redundant. A screen reader would read: "Image, Image of the aviator Amelia Earhart."


Similarly, an alt text like "Amelia Earhart, aviation pioneer and first woman to fly solo across the Atlantic" would not be correct because it includes information that is not part of the image and is redundant compared to the following text.


Moving on to Case 2: if we kept the same alt text as in case 1, "Amelia Earhart, aviator," we would be duplicating the caption text exactly, creating redundancy. In this case, since the content is already presented in the adjacent text, leaving the alternative text empty alt="" might be the best choice.


In Case 3, the image is a link, meaning it has a function in addition to its content. Since no adjacent text describes the function of the link, this must be conveyed within the alt text. Here, the best choice might be alt="Amelia Earhart, aviator" because the redundancy is necessary to correctly explain the function of the image.


In this case, "The Wikipedia entry on Amelia Earhart, aviator" is not a correct alternative content because it provides a different message than the image.


Similarly, "Read more" is not appropriate because it does not provide sufficient information and is out of context.


Compared to Case 3, Case 4 is more accessible because the image and the caption are within the same link. In this case, any redundancy can be avoided, leaving the alt="" so that screen readers will read "Link, Image, Amelia Earhart, aviator."


Special Cases: Decorative Images, Buttons, Logos, and Complex Images

When considering how to correctly write alternative text for images, there are specific cases worth mentioning. Let's start with decorative images.


A decorative image is an image that does not convey important content, has no function (e.g., it is not a link), and is used solely for page layout purposes. Since this type of image does not provide meaningful content, the best choice is to use an empty alternative text alt="".


#tip - Unsure whether an image should be considered "decorative"? Try asking yourself what would happen if the image were removed from the page. If the answer is that nothing significant would change because no content would be lost, then you can be reasonably sure that it is indeed a decorative image.


Another type of image you might need to handle is images used for buttons. If a button contains text, the best approach would be to use actual text rather than an image. However, in cases where using an image is unavoidable, it is necessary to provide an alt text that describes what the button will do when activated, such as "Search," "Submit," "Sign up," or "Place your order."


Many websites include their logo in the header of their pages, using it not only as a branding element but also as a link to return to the homepage. How should the alt text for this logo be handled? In general, simply stating the company's name is sufficient: alt="Acme Company". It is usually unnecessary to include the word "logo" or indicate that it links to the homepage, as this is a widely understood convention. Hearing a screen reader say "Link, Image, Acme Company" at the beginning of a webpage is enough for users to understand that it is a logo linked to the homepage.


Lastly, a webpage might contain a complex image, such as a chart, diagram, or map. In these cases, it is impossible to create an alternative text that is both short and sufficiently descriptive. The best solution might be to provide the alternative content not through the alt attribute but by using accompanying text near the image or a linked webpage.


Alt Text and SEO

As we have already mentioned, writing good alternative text is essential not only for the accessibility of a website but also for the SEO optimization of images. Google is perfectly capable of recognizing that a resource is an image, but a well-written alt text provides its crawlers with descriptions and contextual information that help index and classify images more effectively.


For this reason, every good SEO guide considers it an error NOT to include alt text for images.


Understanding this, many people tend to overdo it and stuff the alt text with keywords they want the page to rank for. This practice is also incorrect. Alt text is NOT a place for keyword stuffing, meaning it should not be overloaded with repeated keywords. This technique is now frowned upon by search engines themselves. Instead, alt text is a tool to describe the image for those who cannot see it. It is important to follow the guidelines we have previously discussed and, if possible, incorporate keywords naturally and only if they are genuinely relevant.


The Title Text

For both accessibility and SEO optimization, alt text is not the only attribute to pay attention to: we also need to consider the title text.


The title text plays a significantly smaller role in both page accessibility and image optimization: most screen readers ignore it, and it does not contribute to search ranking. Despite this, title text can enhance the user experience by providing additional information about an element. Generally, this information is displayed as a tooltip when the user hovers over the element with the mouse.


In general, the title text should complement but never replace alternative text and, consequently, should never be the only means of conveying important content. Best practices for writing an effective title suggest choosing a short, direct, and engaging phrase that complements what has already been included in the alternative text.


Managing Alternative Text in WebSite X5

As we have seen, the guideline addressing the management of textual alternatives is Guideline 1.1, which consists of a single success criterion: Criterion 1.1.1 Non-text Content.


This is one of the criteria integrated into WebSite X5 and is resolved in an assisted mode (see: Accessibility Criteria Implemented in WebSite X5).


In practice, WebSite X5 automatically inserts textual alternatives into the code for all graphic content it generates autonomously. This applies, for example, to navigation buttons in galleries, as well as icons and buttons in blog article cards and e-commerce product listings.


For all other non-text elements (images, animations, videos, audio) that you insert through various objects or graphic customizations, WebSite X5 requires you to enter an alternative text. It is your responsibility, in these cases, to determine whether the elements should be considered simple decorative elements or, if not, to write an equivalent text that fulfills the same function as the original content (see: Image Accessibility: The Importance of Alternative Text).



It is important to note that, as required by the guidelines, WebSite X5 provides for purely decorative images to be assigned a null alt text.


#tip - Success Criterion 1.1.1 also applies to Captcha. Currently, the WebSite X5 Captcha has not yet been made accessible; therefore, it is recommended to use Google reCaptcha instead. See: How to Choose the CAPTCHA to Use on Your Site?