Writing Effective Alt Text: Creating Equitable Access to Meaningful Images

Alternative text (alt text) is a critical component of web accessibility that enables users with visual impairments to understand image content. As we explored in our previous article on distinguishing between meaningful and decorative images, knowing which images require alt text is the first step in accessibility compliance. This guide takes the next logical step: how to write effective alt text once you’ve identified images that need it.

Beyond accessibility compliance, well-crafted alt text also contributes to improved SEO performance. Learn more about how alt text can boost your search rankings.

Understanding Alt Text Requirements

WCAG Compliance Fundamentals

WCAG Success Criterion 1.1.1 (Non-text Content) requires that all non-text content presented to users has a text alternative that serves an equivalent purpose. This Level A requirement states:

“All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.”

For organizations seeking AA compliance, meeting this Level A criterion is mandatory. Let’s explore how to implement this requirement effectively and defensibly.

Legal Considerations

From a legal standpoint, insufficient or missing alt text has been cited in numerous digital accessibility lawsuits, including high-profile cases such as Gil v. Winn-Dixie, National Federation of the Blind v. Target Corporation, and Robles v. Domino’s Pizza. In these cases, the absence of alt text was considered evidence of inaccessible design that could potentially violate the ADA.

Organizations can mitigate legal risk by:

1. Establishing clear alt text guidelines
2. Implementing quality control procedures
3. Documenting compliance efforts
4. Conducting regular audits
5. Addressing accessibility feedback promptly

Legal departments should focus on reviewing and approving the organization’s overall accessibility policies, training procedures, and quality control measures. This systematic approach creates a more defensible position should accessibility complaints arise.

Alt Text Best Practices by Image Type

Informational Images

Informational images convey specific data, concepts, or information that supplements the surrounding content. These images typically express a single concept or simple piece of information that can be described concisely. Remember, alt text is not needed if the specific data, concepts, or information within the image is already present in the surrounding content.

Examples include a simple photo of a product, a basic bar chart showing one data point, or a logo.

Best Practice: Describe the information being conveyed rather than the visual characteristics.

Example:

<!-- Poor alt text -->
<img src="chart.jpg" alt="Bar chart with blue and red bars">

<!-- Effective alt text -->
<img src="chart.jpg" alt="Q3 sales exceeded targets by 23% across all regions except North, which fell 7% below projections">

Informational images require alt text that captures their core message without becoming excessively verbose. Focus on what a sighted user would learn from the image rather than describing every visual detail.

Complex Images

Complex images contain multiple elements, relationships, or detailed information that cannot be adequately described in brief alt text alone. Examples include infographics, multi-step process diagrams, detailed maps, or charts comparing multiple data points over time.

Best Practice: Provide a concise summary in the alt text, then offer a more comprehensive description using one of several accessible methods.

Two-tiered approach:

1. Write alt text that summarizes the image’s main purpose
2. Provide a detailed description through one of these methods:

Option 1: Using aria-describedby (recommended modern approach)

<img src="process-flow.jpg" alt="Five-step compliance implementation process" aria-describedby="process-description">
<div id="process-description" class="sr-only">
  The compliance implementation process begins with an initial audit, followed by prioritizing issues, developing remediation plans, implementing fixes, and conducting validation testing. Each step includes specific deliverables and stakeholder checkpoints.
</div>

The class="sr-only" is a commonly used CSS utility class that makes content visible to screen readers but hidden visually on the page. This technique allows you to provide detailed descriptions for screen reader users without cluttering the visual display for sighted users. To implement this, add this CSS to your stylesheet:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

This approach ensures the detailed description is programmatically associated with the image through the aria-describedby attribute, making it accessible to assistive technology while remaining hidden from visual display.

Option 2: Using figure with figcaption

<figure>
  <img src="process-flow.jpg" alt="Five-step compliance implementation process">
  <figcaption>
    <h4>WCAG Compliance Implementation Framework</h4>
    <p>This diagram illustrates our comprehensive five-phase approach to implementing accessibility standards:</p>
    <ol>
      <li><strong>Audit Phase:</strong> Conduct thorough assessment of current digital assets against WCAG 2.1 AA criteria, identifying all compliance gaps through automated and manual testing methods.</li>
      <li><strong>Prioritization Phase:</strong> Categorize issues by severity (critical, serious, moderate), impact on users, and technical complexity to create a strategic remediation roadmap.</li>
      <li><strong>Planning Phase:</strong> Develop detailed remediation specifications, assign resources, establish timelines, and create documentation procedures for maintaining compliance evidence.</li>
      <li><strong>Implementation Phase:</strong> Execute remediation work with regular quality assurance checkpoints, developer training, and incremental testing to ensure proper implementation.</li>
      <li><strong>Validation Phase:</strong> Perform comprehensive testing with assistive technologies, user testing with individuals with disabilities, and documentation of compliance achievements.</li>
    </ol>
    <p>Each phase requires formal stakeholder review and sign-off before proceeding to ensure alignment with organizational goals and compliance requirements.</p>
  </figcaption>
</figure>

The example above demonstrates how <figure> and <figcaption> work together to provide a rich, detailed description of complex content. This approach is particularly useful when:

1. The image requires extensive explanation that would be too lengthy for alt text
2. The description benefits from structured formatting (headings, lists, paragraphs)
3. The description provides value to all users, not just those using screen readers
4. The content logically belongs with the image as a single unit of information

Unlike the sr-only approach, the figcaption is visible to all users. The alt text still provides a concise summary for screen reader users, while the figcaption provides the detailed explanation that benefits everyone.

Option 3: Adjacent description in the content

<img src="process-flow.jpg" alt="Five-step compliance implementation process">
<h3>About the Five-step Compliance Implementation Process Diagram</h3>
<p>The diagram illustrates our five-step approach to accessibility implementation. The process begins with an initial audit, followed by prioritizing issues, developing remediation plans, implementing fixes, and conducting validation testing. Each step includes specific deliverables and stakeholder checkpoints.</p>

The key difference between complex and informational images is the amount of information they convey. While informational images might be adequately described in a single alt text attribute, complex images require this supplementary description to provide equitable access to all the information they contain.

Images of Text

WCAG discourages using images of text unless essential (such as logos). When necessary, the alt text should contain the exact text in the image.

Example:

<img src="quote.jpg" alt="'Innovation distinguishes between a leader and a follower.' - Steve Jobs">

Functional Images

Functional images serve as interactive elements or triggers for actions within the user interface. Unlike decorative images (which are purely aesthetic), functional images convey information that’s necessary for users to understand available actions or system status.

Best Practice: There are two technically compliant approaches for handling functional images, each with specific implementation contexts:

Approach 1: Image with descriptive alt text

Use this approach when the image alone serves as the interactive element:

<!-- Button containing only an image -->
<button>
  <img src="magnifying-glass.png" alt="Search">
</button>

Approach 2: Image with aria-hidden + visible or visually hidden text

Use this approach for icon+text combinations to avoid redundant announcements:

<!-- Button with visible text label -->
<button>
  <img src="magnifying-glass.png" aria-hidden="true">
  <span>Search</span>
</button>

<!-- Or button with visually hidden text label -->
<button>
  <img src="magnifying-glass.png" aria-hidden="true">
  <span class="sr-only">Search</span>
</button>

Implementation Decision Matrix

Scenario	Recommended Approach	Rationale
Icon-only UI controls	Approach 1: alt text	Ensures screen reader users receive function description
Icon with visible text label	Approach 2: aria-hidden	Prevents redundant announcements of both alt text and label
Icon in context requiring additional description	Custom approach using aria-describedby	Provides supplementary information beyond basic function

CSS Icon Considerations

For icons implemented via CSS (background images or icon fonts), different techniques apply:

<!-- Icon font with appropriate accessibility -->
<button>
  <span class="icon icon-search" aria-hidden="true"></span>
  <span class="sr-only">Search</span>
</button>

The critical distinction between functional and decorative images lies in user need: if removing the image would impair the user’s ability to understand or operate the interface, it’s functional and requires an accessible name through one of these implementation patterns.

Decorative Images

Decorative images are purely aesthetic elements that don’t add information to the content. These images serve visual design purposes only and could be removed without affecting the user’s understanding of the page content. Read more about how to determine if an image is decorative or meaningful.

Best Practice: Use empty alt text (alt="") to instruct screen readers and assistive technologies to skip the image.

Example for HTML images:

<!-- Correct implementation for decorative images -->
<img src="decorative-divider.png" alt="">

The empty alt="" attribute is the WCAG-recommended approach for decorative images. It explicitly tells assistive technologies that this image should be ignored, as it contains no meaningful content.

Important technical distinction: For HTML images, aria-hidden="true" is unnecessary when empty alt text is already present, as this would create redundant code. However, for non-image decorative elements (like icons implemented with CSS, SVG icons, or div-based decorative elements), aria-hidden="true" is the appropriate method:

<!-- Decorative icon font -->
<span class="icon icon-decorative" aria-hidden="true"></span>

<!-- Decorative SVG -->
<svg aria-hidden="true" class="decorative-flourish">...</svg>

<!-- Decorative CSS background image -->
<div class="decorative-background" aria-hidden="true"></div>

When in doubt: If you’re uncertain whether an image is decorative or meaningful, it’s always safer to provide descriptive alt text. Incorrectly marking a meaningful image as decorative creates a more significant accessibility barrier than providing alt text for a decorative image. Read more about how to determine if an image is decorative or meaningful.

Writing Strategic Alt Text

Length Considerations

While WCAG doesn’t specify a maximum length for alt text, practical considerations suggest brevity where possible:

• Aim for 125-150 characters when feasible – this guideline emerges from several practical considerations:
  • Many screen readers pause or chunk announcements around this length
  • Mobile screen readers historically performed better with shorter descriptions
  • User experience research shows that concise descriptions are typically more effective
  • Organizations like WebAIM and accessibility auditing tools often recommend similar length guidelines
• For complex images, prioritize the most important information first, as users can’t “skim” alt text the way sighted users scan complex visuals
• Consider using the more detailed description techniques outlined in the Complex Images section when the necessary description exceeds these practical limits

It’s important to emphasize that providing an equivalent experience takes precedence over character count. Some images legitimately require longer descriptions to convey their full meaning, and in those cases, longer alt text is preferable to inadequate descriptions.

SEO-Friendly Alt Text

Alt text contributes to image SEO, but this should never compromise accessibility:

• Include relevant keywords naturally where appropriate
• Avoid keyword stuffing
• Ensure the description accurately represents the image
• Use specific rather than generic terminology

Read more about how alt text impacts SEO.

Context Awareness

The same image may require different alt text depending on its context and purpose:

Example: A company logo in the header

<img src="company-logo.png" alt="All Terrain Studios">

The same logo in a partner showcase:

<img src="company-logo.png" alt="All Terrain Studios, website accessibility partner since 2003">

Quality Assurance Protocols

Establishing Alt Text Review Procedures

For organizations implementing formal review processes:

1. Initial creation guidelines: Provide clear instructions to content creators
2. Technical validation: Ensure alt attributes exist for all non-decorative images
3. Compliance review: Verify alt text meets WCAG requirements:
   • Success Criterion 1.1.1 Non-text Content (Level A): All non-decorative images must have text alternatives that serve equivalent purposes
   • Success Criterion 1.4.5 Images of Text (Level AA): Text should be used instead of images of text except for logos or when essential
   • Success Criterion 1.4.9 Images of Text (No Exception) (Level AAA): For organizations aiming beyond AA, images of text cannot be used except for decoration or where a particular presentation is essential
   • Success Criterion 2.4.4 Link Purpose (In Context) (Level A): For linked images, ensure alt text clearly indicates link destination
   • Success Criterion 4.1.2 Name, Role, Value (Level A): Functional images have accessible names through proper alt text
4. Context review: Evaluate if alt text is appropriate for the content purpose
5. Legal review: Assess potential compliance risks

Common Pitfalls to Avoid

• Using “image of” or “picture of” (redundant with screen reader announcements)
• Including file names or image numbers
• Repeating the same information present in adjacent text
• Using overly technical terms without explanation
• Insufficient detail for important informational images

Implementing Alt Text at Scale

For large organizations managing numerous images:

1. Create an alt text style guide specific to your organizational content
2. Train content creators on accessibility requirements
3. Implement CMS validation that flags missing alt text
4. Conduct periodic audits of alt text quality
5. Document all processes for potential legal defense

Conclusion

Effective alt text is both an accessibility requirement and a strategic opportunity. By following these guidelines, organizations can ensure WCAG compliance while enhancing user experience and potentially boosting SEO performance. Remember that alt text should always prioritize providing equivalent information to all users, regardless of their abilities.

Creating defensible alt text practices involves not just writing appropriate descriptions but implementing systematic approaches to ensuring consistency, quality, and comprehensiveness across your digital presence.

This guide provides general information and should not be construed as legal advice. Organizations should consult with qualified legal professionals for specific guidance on compliance requirements.