Create unique and informative alt text

***This document provides helpful tips to improve your site's accessibility. While it doesn’t guarantee 100% compliance, it’s a great starting point to make your website more inclusive and user-friendly.***

Identification

Alternative text for images should not be redundant with adjacent text (Rule ID: image-redundant-alt)

Applicable Standards

• Deque Best Practice

• WCAG Success Criterion 1.1.1 (Level A)

Impact

Minor level impact affecting:

• Blind users

• Deafblind users

Proper Implementation

• Use empty alt text when image is decorative or repeated in adjacent text

• Provide meaningful, non-redundant alt text for informative images

• Write alt text that conveys purpose and function for button images

• Avoid duplicating link or button text in alt attributes

• Focus on conveying meaning rather than describing appearance

Examples of Correct Usage

1. Meaningful alt Text for Informative Images:
   The alt text describes the content and context of the image, providing relevant information to screen reader users.

2. Empty alt Text for Decorative Images:
   The decorative image has empty alt text (alt=""), ensuring screen readers ignore it and focus only on meaningful content.

3. Functional alt Text for Button Images:
   The alt text ("Search") conveys the function of the button, enabling screen readers to understand its purpose.

4. Avoiding Redundancy with Adjacent Text:
   

   The alt text is empty because the adjacent text ("Call us at (123) 456-7890") already conveys the image's purpose.

5. Describing Infographic Content:
   The alt text summarizes the key information from the infographic, helping screen reader users understand the data.

Common Errors to Avoid

1. Redundant alt Text:
   The alt text ("Phone icon") is redundant because the adjacent text already conveys the same information, creating unnecessary verbosity for screen reader users.

2. Overly Detailed alt Text:
   The alt text includes unnecessary details (e.g., clothing color and wall description), making it verbose and harder to understand.

3. Missing alt Text for Informative Images:
   The image lacks alt text, leaving screen reader users unaware of its content or purpose.

4. Incorrect Use of alt for Decorative Images:
   The alt text unnecessarily describes a decorative image, creating noise for screen reader users.

5. Ambiguous alt Text:
   The alt text ("Chart") is too vague to provide meaningful context about the image.

Rationale

• Prevents screen readers from announcing the same text twice

• Reduces cognitive load for users

• Improves clarity of content

• Maintains efficient navigation

• Ensures meaningful information delivery

Evaluation Method

1. Inspect the Code

   • Verify that:

     • Every image has an appropriate alt attribute.

     • Decorative images use alt="".

     • Informative images have meaningful alt text that conveys purpose or context.

     • alt text avoids redundancy with adjacent text.
       
       

2. Test with a Screen Reader

   • Use a screen reader (e.g., NVDA, JAWS, or VoiceOver) to confirm:

     • The alt text is clear, concise, and provides relevant context.

     • Decorative images with alt="" are correctly ignored.

     • Images of buttons and links convey their function.
       
       

Evaluation Checklist