Images and Graphics

Importance of Alternative Texts for Images and Graphics

Images and graphics serve various functions on websites, with alternative texts (also known as alt texts) being particularly crucial for users of screen readers. The alternative text acts as a substitute for the actual image, conveying its content. Here are some important aspects to consider:

Short and Concise Description

The alternative text should provide a brief and precise description of the image. Avoid excessive details and focus on the essential information the image conveys. A short text improves usability and avoids information overload. It is recommended to limit the text to a maximum of 255 characters, which corresponds to approximately three lines.

Avoiding Redundancy

Do not repeat information already present in the image context. The screen reader automatically indicates that it is an image, so this information does not need to be included in the alt text. For example, instead of writing “Image of a train,” “A train is entering the station” suffices.

Simple and Understandable Language

Use simple and understandable language. Complicated or technical terms should be avoided to ensure usability for all users. For example, “A man holding a cup” instead of “A male person holding a drinking vessel.”

Relevance and Context

The extent of an image description depends on the relevance of the graphic. The relevance of a graphic always depends on the context. Information already included in the main text does not need to be repeated in the image description. For example, a decorative image of a sailboat in a vacation catalog requires a shorter description than the same image in a specialized magazine about sailboats.

Techniques for Providing Image Descriptions

Besides the common alternative text, there are various alternatives for providing image descriptions:

1. ARIA-Label: Can be used to provide additional information.

   • Example: <img src="train.jpg" aria-label="A train is entering the station">

2. ARIA-DescribedBy: Points to an element containing a more detailed description.

   • Example: <img src="train.jpg" aria-describedby="imageDesc"><div id="imageDesc">A train is entering the station on a sunny day.</div>

3. Title Attribute: Can be used as a supplementary description but should not replace ARIA-Label.

   • Example: <img src="train.jpg" title="A train is entering the station">

4. Detail Tag in HTML: Allows for providing a collapsible description.

   • Example: <details><summary>Image Description</summary>A train is entering the station on a sunny day.</details>

5. Tooltips and Accordions: For longer descriptions, tooltips, links to new pages, or collapsible accordions accessible via keyboard can be used.

No Alternative Text for Certain Images

For some images and graphics, no alternative text should be provided:

• Background Images: These serve purely decorative purposes and should be defined in CSS and hidden from screen readers.
• Decorative Graphics: These have no informative value and should be given an empty alt attribute (e.g., <img src="decor.jpg" alt="">).
• Icons Related to Text: For example, a printer icon next to the text “Print.” Here, the alternative text should be left empty as the text already describes the function.

Function Instead of Image Description

For linked graphics or buttons, the function is typically described instead of the actual image description. For example, instead of “Right arrow,” the alt text should read “Next.” If a graphic both triggers a function and conveys information, both should be included in the alt text. Example: “Logo mtc.berlin - Go to homepage.”

Conclusion

Well-designed alternative texts for images and graphics are crucial for web accessibility. They should briefly, concisely, and functionally describe what is visible in the image or what function it performs. Avoid redundancies and complex language to maximize usability. Use supplementary techniques such as ARIA-Label and ARIA-DescribedBy to provide additional information when necessary.

---

Checklist for Images and Graphics

1. Alternative Texts:

   • Is the alternative text short and concise?
   • Does the alternative text avoid redundancies?
   • Is simple and understandable language used?
   • Is the alternative text limited to a maximum of 255 characters?

2. Image Description:

   • Is the image description relevant and context-dependent?
   • Does the image description avoid repeating information from the main text?
   • Are additional techniques such as ARIA-Label or ARIA-DescribedBy used?

3. No Alternative Text:

   • Are background images and decorative graphics provided without alternative text?
   • Do icons related to text have no alternative text?

4. Function Instead of Image Description:

   • Is the function described instead of the image content for linked graphics or buttons?
   • Are both function and information included in the alternative text for graphics that do both?

5. Technical Implementation:

   • Are alternative texts correctly implemented in the HTML code?
   • Are alternative methods such as tooltips, detail tags, or accordions used when longer descriptions are necessary?