Every image on a website should have alt text. This is not merely a recommendation but a fundamental part of good web design. Alt text, short for alternative text, serves two crucial purposes: it makes your images understandable to search engines and enables people with visual impairments to fully comprehend your page's content. Yet alt text is forgotten, neglected, or poorly written on countless websites. In this article, you will learn why it is so important and how to use it correctly.
How screen readers process images: Screen readers like NVDA (Windows), VoiceOver (Apple), and TalkBack (Android) are software programs that read screen content aloud for blind and visually impaired people. These programs can interpret text, but they cannot see images. When an image has no alt text, the screen reader reacts differently depending on the software. Some just say "image," others read the file name, for example "IMG_20240315_142037.jpg." This is completely useless and frustrating for the user. Imagine navigating a website where every other element is simply announced as "image" without any context. You would leave the page immediately. That is exactly what blind users experience on poorly maintained websites. Good alt text, on the other hand, gives the user the same information that a sighted visitor gets from looking at the image.
What exactly is alt text? Alt text is a short descriptive text embedded in the HTML code of an image. It is displayed when the image cannot be loaded, for example due to a slow connection or an incorrect image path. In code, the alt attribute in the img tag contains the description. In addition to accessibility, alt text has another practical function: it appears as a placeholder while the image is still loading. This way, the visitor knows what to expect even before the page fully loads.
Google and alt text: Google can now analyze images to a certain degree using computer vision, but alt text remains the most reliable source of information about what an image shows. Google explicitly recommends using alt text in its official documentation. The recommendations are: describe the image content precisely and specifically, use relevant keywords where they fit naturally, avoid keyword stuffing (the excessive insertion of keywords), and purely decorative images should receive an empty alt text (alt=""). Images with good alt text appear more frequently in Google Image Search, which can be a significant source of traffic. Image search is especially relevant for e-commerce sites: many users search for products through Google Images first and reach the product page from there.
For SEO, alt text is an underestimated ranking factor. If you run an online shop with product images that have no alt text, you are missing a huge opportunity. Your products will not appear in Google Image Search. Since many users begin their product research there, this can have a direct impact on your revenue. Good alt text contains relevant keywords but does not feel forced or stuffed. Instead of "bag buy cheap leather handbag online," write "Brown leather handbag with zipper, front view." The second text is equally useful for humans and search engines.
The Web Content Accessibility Guidelines, or WCAG, define international standards for accessible web content. Under WCAG 2.1 criterion 1.1.1, all non-text content must have a text alternative. This applies to images, icons, graphics, and diagrams. In many countries, compliance with these guidelines is legally required for public institutions and increasingly for businesses as well. In the EU, the European Accessibility Act ensures that many digital products and services must be accessible starting in 2025. Violations can lead to significant fines. Alt text is a fundamental building block of accessibility.
5 rules for good alt text: First, describe what is visible, not what you interpret. Bad: "Happy family." Better: "Four people sitting at a dining table laughing, with a birthday cake." Second, be specific. Bad: "Dog." Better: "Golden Retriever lying on a green lawn holding a red ball in its mouth." Third, keep it brief. Under 125 characters is ideal because many screen readers truncate longer text. Fourth, do not start with "image of" or "photo of." The screen reader already announces that it is an image. Fifth, decorative images get an empty alt attribute (alt=""). A divider line image or a purely decorative background element needs no description and would only annoy screen reader users.
Different rules apply to different types of images. For infographics or charts, a short alt text is not sufficient. Here you should provide a detailed description of the data or statements, either in the alt text itself or in a separate text element on the page. For logos, the alt text is typically the company name, for example "Formidex Logo." For linked images, the alt text should describe where the link leads, not what is visible in the image. A linked arrow icon should say "Back to homepage," not "Green arrow pointing left." For images in articles that complement the text content, describe what the image shows and why it is relevant in context.
How the Formidex Alt Text tool works: The tool uses the vit-gpt2 model, a combination of Vision Transformer (ViT) and GPT-2. The model is about 300 MB in size and is loaded into your browser the first time you use it. The Vision Transformer divides the image into patches, small image sections, and converts them into a series of visual features. These features are then passed to the GPT-2 part of the model, which generates an English description sentence from them. The model recognizes objects, scenes, colors, and spatial relationships. Processing runs entirely in your browser. The generated descriptions are a good starting point that you can then adapt to your specific context.
Common alt text mistakes: The most common mistake is simply forgetting. Many content management systems make the alt attribute optional, and in the rush of daily work, it is often omitted. The second most common mistake is using the file name as alt text, for example "header-banner-new-v2-final.jpg." That helps no one. Another mistake is overloading with keywords: "shoes buy online cheap sneakers men women sale" is useful neither for screen reader users nor for Google. Overly generic texts like "image" or "photo" also add no value.
Implementing alt text in practice: If you have an existing website, start with the most important pages: the homepage, product pages, and the most visited subpages. Then work your way systematically through the rest. For new content, establish a workflow where alt text is written immediately when an image is uploaded. Many CMS systems like WordPress display an alt text field during image upload. Use it consistently. For websites with many images, the Formidex Alt Text tool can significantly speed up the process.
Alt text is not an annoying detail that you quickly handle at the end of a web project. It is an integral part of good web development. Take the time to write it carefully. Your visitors, whether visually impaired or not, and your Google ranking will thank you. With the Formidex Alt Text tool, you can speed up the process and ensure that no image goes without a description.