In DITA, alternative text (alt text) and descriptions for images are added to provide accessibility and context to non-textual content. This is essential for users who rely on screen readers or assistive technologies.

Alt Text:

Alt text (short for alternative text) is a concise, alternative representation of an image or other non-text content. It is used to convey the essential information of the image to users who cannot see it. Alt text is typically used for decorative or non-complex images.

Descriptions are more detailed than alt text and are used when additional context is needed to understand the image fully. They provide a more comprehensive explanation of the image’s content and purpose.

Adding Alt Text and Descriptions:

In DITA, alt text can be added to an image using the @alt attribute within the <image> element.

Descriptions are added using the <desc> element. They can be associated with the <image> element or other elements like <fig>, which contains the image.

Example:

An image of a product logo requires alt text and a description.

<fig>
  <title>Company Logo</title>
  <desc>A high-resolution image of the company's logo, displaying the company name and a graphical representation of a globe.</desc>
  <image href="images/company_logo.png" alt="Company Logo: Company Name and Globe Icon"/>
</fig>

In this example, the <desc> element provides a detailed description of the image content, while the @alt attribute within the <image> element provides a concise alt text. This ensures that users with disabilities receive both a quick summary (alt text) and a detailed description of the image.