Skip to main content

Successfuly Implementing Alt Text for Images

Used to describe images, ensuring that users who cannot see the images still understand their content and purpos

Successfuly Implementing Alt Text for Images

Shawn Sandy (Ally.Cafe) ~

Introduction to Alt Text

Alternative text, commonly referred to as “alt text,” is an essential element in web accessibility. It is used to describe images, ensuring that users who cannot see the images still understand their content and purpose. This includes users who are blind or visually impaired and rely on screen readers, as well as users who have disabled images in their browsers for faster loading times or data conservation.

Why Alt Text Matters

  1. Accessibility: Alt text makes visual content accessible to users with disabilities, fulfilling the ethical obligation to create inclusive web content.
  2. SEO: Search engines use alt text to understand the content of images, which can improve search engine optimization (SEO).
  3. User Experience: Clear and concise alt text improves overall user experience by providing context and information that might otherwise be missing.

WCAG Guidelines on Alt Text

The Web Content Accessibility Guidelines (WCAG) 2.2 provide specific success criteria related to alt text:

1.1.1 Non-text Content (Level A)

  • Requirement: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
  • Purpose: Ensures that all users can access the information conveyed by images, videos, and other non-text elements.

Best Practices for Writing Alt Text

  1. Be Descriptive: Clearly describe the image’s content and function. For example, instead of writing “image,” write “a red apple on a wooden table.”
  2. Keep It Concise: Aim for brief descriptions, generally no more than a few sentences. Overly long alt text can overwhelm users.
  3. Context Matters: Tailor the alt text to the image’s context. For instance, an image of a chart should be described differently depending on the chart’s purpose and the surrounding text.
  4. Avoid Redundancy: Do not repeat information already provided in surrounding text. If the image’s purpose is explained nearby, the alt text can be shorter.
  5. Functional Images: For functional images (e.g., buttons or links), describe the function rather than the appearance. For example, “Submit button.”

Examples of Alt Text

Example 1: Decorative Image

<img src="decorative-image.jpg" alt="" />
  • Explanation: Decorative images do not convey important information and are marked with an empty alt attribute to be ignored by screen readers.

Example 2: Informative Image

<img src="apple.jpg" alt="A red apple on a wooden table" />
  • Explanation: This describes the image content clearly and concisely.

Example 3: Functional Image

<img src="submit-button.jpg" alt="Submit" />
  • Explanation: Describes the button’s function rather than its appearance.

Techniques and Failures

Techniques

  • G94: Providing short text alternatives for non-text content that serves the same purpose and presents the same information.
  • G95: Providing short text alternatives that identify the purpose of non-text content.

Failures

  • F30: Failure to provide text alternatives for images.
  • F65: Failure to provide an empty alt attribute on decorative images.

Screen Reader Support

Screen readers like JAWS, NVDA, and VoiceOver rely on alt text to convey image information to users. Properly implemented alt text allows these tools to read out the image descriptions, ensuring that visually impaired users receive the same information as sighted users.

Conclusion

Implementing alt text correctly is crucial for web accessibility, enhancing user experience for everyone. By following WCAG guidelines and best practices, you can ensure your web content is inclusive and accessible.

Recommended Length for Alt Text

The length of alt text should strike a balance between being informative and concise. Here are some guidelines to help determine the appropriate length:

  1. Conciseness: Alt text should typically be no longer than a few words to a short sentence. Aim for around 125 characters or less. This length ensures that the information is quickly accessible without overwhelming the user.

  2. Descriptiveness: While being concise, ensure that the alt text is descriptive enough to convey the essential information. Include only relevant details that help the user understand the image’s content or function.

Examples of Appropriate Alt Text Length

Short Descriptions

For simple images, a few words may suffice:

<img src="cat.jpg" alt="Orange tabby cat sleeping" />

Slightly Longer Descriptions

For more complex images, a short sentence may be necessary:

<img src="group-photo.jpg" alt="Five people standing in front of a mountain" />

Functional Images

For images serving as links or buttons, focus on their function:

<img src="search-icon.jpg" alt="Search" />

When Longer Alt Text is Needed

In some cases, more detail may be required, especially for images that convey complex information such as charts or diagrams. However, keep the description as concise as possible while still providing necessary context:

<img src="sales-chart.jpg" alt="Bar chart showing sales growth over five years, with significant increases in 2021 and 2022" />

Best Practices for Alt Text Length

  • Be Specific but Brief: Provide enough detail to convey the image’s purpose without unnecessary information.
  • Use Context: Rely on surrounding text to provide additional context, allowing the alt text to remain brief.
  • Avoid Redundancy: Do not repeat information that is already present in the text near the image.

By following these guidelines, you can create alt text that is both concise and informative, enhancing accessibility and user experience.

References

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue