Are you from the public sector?
Are you from the public sector?
Test the complete functionality of AccessGO risk-free for 7 days free of charge.
Alt text is a key element of digital accessibility for websites. Accurate alt text makes images accessible to people with visual impairments, as screen readers can convey the content clearly. This not only fulfills an important requirement for inclusive websites, but also complies with the standards set by WCAG, BITV, and BFSG.
On this page, you’ll learn how to use alt text effectively, avoid common mistakes, and implement alternative text in a practical way. You’ll also get an overview of testing methods and learn how to make your image descriptions accessible.
Alt text is the primary means of making images on websites accessible to all users. In the context of digital accessibility, properly written alt text ensures that visual content can be understood by people with visual impairments or when images are not displayed. As an integral part of the HTML structure, alt text is included in the tag and read by screen readers.
The importance of alt text is enshrined in international web standards such as the WCAG (Web Content Accessibility Guidelines), as well as in Germany’s BITV (Barrier-Free Information Technology Ordinance) and the BFSG. Unlike detailed image descriptions or supplementary text surrounding an image, alt text is concise, specific, and directly embedded in the code. It describes only what is relevant to understanding the image’s content.
| Aspect | Significance for Alt Text |
|---|---|
| Placement in the code | Directly within the tag as the “alt” attribute |
| Target audience | People with visual impairments, screen reader users |
| Regulatory Reference | Required under WCAG, BITV, BFSG |
| Difference from image descriptions | Alt text is short and functional; image descriptions can be more detailed |
Alternative text is intended to make the essential information in an image accessible to all users. It should be written in a way that concisely and clearly conveys the image’s content without providing unnecessary details. For screen reader users, alternative text is often the only source of information about the image, which is why clarity and relevance are of the utmost importance.
A fundamental principle is the distinction between informative and decorative images. While informative images must be described using meaningful alternative text, purely decorative graphics do not require alt text or are given an empty alt attribute. It is important that the alt text does not contain redundant information that is already included in the body text or elsewhere on the page.
7 days unrestricted access. No payment details required.
The success criteria for alt text are clearly defined in WCAG 2.1 and BITV 2.0. In particular, WCAG criterion 1.1.1, “Non-text Content,” requires that every piece of non-textual content be provided with an equivalent textual alternative. BITV 2.0 adopts these requirements and specifies them for the German-speaking region. It is crucial that alternative texts are not only present but also appropriate in content and understandable to the respective target audience.
Various assessment methods are used to evaluate the quality of alt text, such as manual audits or automated tools. The evaluation is often based on scales that assess the appropriateness, conciseness, and relevance of the alternative text. An image is considered accessible under legal requirements only if all criteria are met.
| Criteria for success | Evaluation criteria |
|---|---|
| WCAG 2.1 – 1.1.1 Non-text Content | Presence, Adequacy, and Comprehensibility of Alt Text |
| BITV 2.0 – Section 4: Accessible Design | Verification of complete and meaningful alternative text, use of rating scales |
The practical review of alt text on websites is conducted systematically and involves both manual and automated methods. Editors and developers use checklists to ensure that all relevant images are provided with meaningful alt text. This process not only verifies the presence and quality of the alt text but also ensures that it aligns with the image’s function and the page’s context.
Various tools are available for verification, enabling efficient checks. Automated verification tools detect missing or empty alt attributes, while manual audits assess the appropriateness of the content. Common errors such as generic alt text, redundancies, or overlooking decorative images can be avoided through structured verification processes and clear lines of responsibility.
| Tool/Method | Area of application |
|---|---|
| Screen Reader Test | Assessment of the actual user experience and comprehensibility |
| Automated accessibility tools (e.g., axe, WAVE) | Detection of missing or empty alt attributes, quick overview |
| Checklists for Editors | Ensuring the quality and consistency of alt text |
| Code review by developers | Technical verification of the correct inclusion of alt text in HTML |
For the practical implementation of alt text, a structured approach is recommended: First, the image type is determined – is it an informative, decorative, or complex image? Subsequently, the alt text is formulated to describe the central image content concisely and purposefully. Practical examples help to identify and adequately meet typical requirements for photos, graphics, or logos.
The integration of alternative texts occurs in most Content Management Systems (CMS) directly when uploading or editing an image. Editors ensure that the alt text is neither too general nor too detailed, while developers ensure the technical integration. The following table shows how implementation is handled in various CMS and what particular attention should be paid to in each case.
| CMS | Specifics of Alt Text Integration |
|---|---|
| WordPress | Alt text can be entered directly in the media editor and edited later |
| TYPO3 | Alt text fields are available in the image properties; specifications can be defined project-wide |
| Drupal | Alt text is a mandatory field when uploading images; validation possible via modules |
| Joomla | Alt text is maintained when inserting images in the editor; post-processing possible at any time |
Schedule a free consultation and speak with one of our experts.
Alt text plays a central role in digital accessibility within the framework of legal requirements. According to BFSG, BITV, and the international WCAG, companies and public bodies are obliged to design digital offerings in such a way that they are accessible to all people, including people with disabilities. The provision of alternative texts for images is a concrete and verifiable requirement that contributes to digital inclusion.
In contrast to other regulatory requirements, which relate to data protection, technical security, or general user-friendliness, the alt text requirement explicitly aims at barrier-free information transfer. Fulfilling these requirements is an important step to promote non-discrimination in the digital space. This does not provide legal guarantees or liability promises, but practical guidance for implementation.
In practice, typical errors repeatedly occur when creating alternative texts. The most common include overly general or irrelevant descriptions, missing alt texts for informative images, and incorrect labeling of decorative graphics. Automatically generated alt texts can also be problematic, as they are often inaccurate or not context-specific. These errors mean that screen reader users have no or insufficient access to image content.
Misunderstandings also often arise in distinguishing between decorative and informative images. If a decorative element is not labeled as such, it can disrupt the user flow. To overcome these challenges, a clear review strategy is recommended: diligence in manual formulation, avoidance of redundancies, targeted control of automatic suggestions, and consistent training of all involved parties.
| Source of Error | Solution Approach |
|---|---|
| General or meaningless alt texts (“Image”, “Graphic”) | Align descriptions with the specific image content |
| Automatically generated alt texts without contextual relevance | Manual review and adjustment before publication |
| Unclear labeling of decorative images | Provide decorative elements with an empty alt attribute |
| Lack of editor training | Provide targeted training and checklists |
Alt text, captions, and long descriptions fulfill different tasks in conveying image information. While alt text provides a concise, functional description for screen readers and when images are not displayed, the caption serves as an supplementary explanation in the visible page context. The longdesc attribute or a separate long description is used when complex graphics or infographics need to be explained in detail.
The choice of the correct information type depends on the image content and the information needs of the users. Alt text is sufficient for simple, clearly understandable images, while complex representations require a detailed description. A caption is suitable when additional contextual information is relevant to all users. It would be incorrect to place identical content multiple times in alt text and caption or to use longdesc unnecessarily.
| Information Type | Application Area and Example |
|---|---|
| Alt Text | Concise description: “Portrait photo of Max Mustermann” |
| Caption | Supplementary info: “Max Mustermann at the 2024 award ceremony” |
| Longdesc / Detailed Description | Detailed explanation of a complex infographic, e.g., as a separate page |
7 days unrestricted access. No payment details required.
Complex graphics, diagrams, and infographics place special demands on the accessible design of alternative texts. A simple alt text is usually not sufficient to convey all relevant information. Instead, a two-stage strategy is recommended: The alt text provides a brief summary of the image content, while a detailed description – for example, via the longdesc attribute or a supplementary text section – explains the details in a structured manner.
For structured image descriptions, essential content, contexts, and key messages should be clearly organized. Practical examples show that for bar charts, the most important values and trends should be described; for process graphics, the individual steps; and for infographics, the central statements. This ensures that all user groups have access to the information contained.
| Image Type | Recommended Description Method |
|---|---|
| Bar Chart | Summary in alt text, detailed values and trends as longdesc or running text |
| Process Graphic | Alt text with overview, detailed step-by-step explanation provided as supplement |
| Infographic | Alt text with key message, structured long description for contexts and details |
Alt text should generally be between 80 and 150 characters long. It must accurately and clearly describe the image’s content without going off on unnecessary tangents. Alt text that is too short often does not provide enough information, while text that is too long can overwhelm users of screen readers. The goal is to strike a balance that succinctly summarizes the essentials.
Alt text is an essential component of accessible websites and plays a key role in making digital content accessible to all user groups. Properly creating and integrating alt text is not only a legal requirement, but also improves the user experience and promotes digital inclusion.
It is essential to craft alternative text that is precise, clear, and contextually appropriate—tailored to the type and function of the image. Common mistakes, such as inaccurate, overly long, or missing alt text, can be avoided through structured review processes, training, and appropriate tools. Alt text can also be effectively used for search engine optimization, as long as accessibility remains the top priority.
Check your homepage with the AccessGO quick check.
Identify risks and barriers according to WCAG standards.
Images may only be used without alt text if they are purely decorative and have no informational value, such as graphic separators or background patterns. In this case, the alt attribute is technically set to (empty). If this rule is applied incorrectly, important content may be lost to users of screen readers, or navigation may be unnecessarily complicated.
Images may only be used without alt text if they are purely decorative and have no informational value, such as graphic separators or background patterns. In this case, the alt attribute is technically set to (empty). If this rule is applied incorrectly, important content may be lost to users of screen readers, or navigation may be unnecessarily complicated.
Alt text is used exclusively to describe images, while ARIA labels are used to provide additional labeling and descriptions for any elements on a webpage. In the context of accessibility, an ARIA label supplements semantic information when no suitable HTML element or attribute is available. Both methods can be combined, but their content should not contradict or duplicate each other.
Alt text should always be written in the language of the website. Automated tools such as WAVE or axe can detect missing or untranslated alt text, but they do not provide quality control for the content itself. Manual reviews by editors are therefore essential to ensure linguistic and content accuracy. Developers should ensure that the language is correctly specified in the HTML code so that screen readers can read the alt text correctly.
Tools such as WAVE, axe, and Siteimprove help with creating and checking alt text by identifying missing or incorrect alternative text. Many content management systems (CMS) also offer features for managing and translating alt text for multilingual websites. Special care is required during localization, as automatic translations are often inaccurate. Manual review by editors therefore remains essential.
