Non-Text Content Accessibility — Complete Guide

In this tutorial, you will learn about Non. We cover key concepts, practical examples, and best practices to help you master this topic.

Non-text content like images, icons, charts, and graphs must have text alternatives so all users, including those using screen readers, can perceive the information they convey.

What You'll Learn

• WCAG requirements for non-text content (Success Criterion 1.1.1)
• How to write effective alt text for different image types
• When to use null alt text and when to omit alt entirely
• Accessible icons, SVGs, and data visualizations
• Complex image descriptions for charts and diagrams

Why It Matters

• Non-text content is the most common Accessibility failure on the web
• Images convey information that is completely lost without alt text
• Proper alt text improves SEO rankings
• WCAG 1.1.1 is a Level A criterion, the minimum Compliance level

Real-World Use

• A news site provides detailed alt text for infographics
• An e-commerce site describes product images for blind shoppers
• A dashboard uses accessible chart descriptions and data tables
• A social media platform requires alt text on uploaded images

flowchart LR
  A[Non-Text Content] --> B{What Type?}
  B --> C[Informative Image]
  B --> D[Decorative Image]
  B --> E[Complex Graphic]
  B --> F[Functional Image]
  C --> G[Descriptive Alt Text]
  D --> H[Null Alt Text]
  E --> I[Long Description]
  F --> J[Alt Text = Function]

Understanding Non-Text Content

Non-text content includes images, icons, charts, graphs, diagrams, animations, videos, audio, and any other content that is not text. WCAG Success Criterion 1.1.1 requires text alternatives for all non-text content.

The text alternative must serve the equivalent purpose. A photograph of a product should describe what the product looks like. A chart should convey the data and trends. A decorative spacer image should be invisible to screen readers.

Image Types and Their Alt Text

Informative images convey information or concepts. Alt text should be a short description of the information.

Decorative images have no informational value. Use alt="" (null alt) to hide them from screen readers.

Functional images are links or buttons. Alt text should describe the function, not the image.

Complex images like charts and diagrams need both a short alt text and a long description.

Text in images should be avoided entirely. If unavoidable, the alt text must include the text.

Code Example: Alt Text by Image Type

<!-- Informative: product photo -->
<img src="blue-ceramic-vase.jpg"
     alt="Handcrafted blue ceramic vase with white floral pattern, 12 inches tall">

<!-- Informative: portrait photo -->
<img src="team-photo.jpg"
     alt="The DodaTech engineering team standing together in the office lobby">

<!-- Decorative: background pattern -->
<img src="subtle-pattern.png" alt="" role="presentation">

<!-- Decorative: spacer image -->
<img src="spacer.gif" alt="" aria-hidden="true">

<!-- Functional: linked logo -->
<a href="/">
    <img src="logo.svg" alt="DodaTech Home">
</a>

<!-- Functional: icon button -->
<button onclick="search()">
    <img src="search-icon.svg" alt="Search">
</button>

Expected output: Informative images are announced with their descriptions. Decorative images are skipped entirely. Functional images announce their purpose, not their appearance.

Code Example: Accessible Charts and Data Visualization

<!-- Chart with accessible data table fallback -->
<figure>
    <img src="quarterly-sales-chart.png"
         alt="Bar chart showing quarterly sales for 2025"
         aria-describedby="chart-desc">
    <figcaption id="chart-desc">
        Quarterly sales in 2025: Q1 $1.2M, Q2 $1.8M, Q3 $2.1M, Q4 $2.8M.
        Sales grew steadily throughout the year with the strongest growth in Q4.
    </figcaption>
</figure>

<!-- Data table equivalent for screen readers -->
<table aria-label="Quarterly Sales Data 2025">
    <caption>Quarterly Sales 2025</caption>
    <thead>
        <tr>
            <th scope="col">Quarter</th>
            <th scope="col">Revenue</th>
            <th scope="col">Growth</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Q1</td>
            <td>$1,200,000</td>
            <td>+5%</td>
        </tr>
        <tr>
            <td>Q2</td>
            <td>$1,800,000</td>
            <td>+50%</td>
        </tr>
        <tr>
            <td>Q3</td>
            <td>$2,100,000</td>
            <td>+17%</td>
        </tr>
        <tr>
            <td>Q4</td>
            <td>$2,800,000</td>
            <td>+33%</td>
        </tr>
    </tbody>
</table>

Expected output: Screen readers announce the chart and its description. The data table provides the same information in an accessible format. Sighted users see the chart, and screen reader users can navigate the data table.

Code Example: Accessible SVG Icons

<!-- Decorative SVG: hidden from screen readers -->
<svg width="24" height="24" aria-hidden="true" focusable="false">
    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
</svg>

<!-- Informative SVG: accessible icon -->
<svg width="24" height="24" role="img" aria-label="Warning" focusable="false">
    <path d="M12 2L1 21h22L12 2zm-1 7h2v6h-2V9zm0 8h2v2h-2v-2z" fill="#C62828"/>
</svg>

<!-- Linked SVG with text -->
<a href="/dashboard" aria-label="Dashboard">
    <svg width="32" height="32" aria-hidden="true" focusable="false">
        <rect x="2" y="2" width="12" height="12" rx="2" fill="#0066CC"/>
        <rect x="18" y="2" width="12" height="12" rx="2" fill="#0066CC"/>
        <rect x="2" y="18" width="12" height="12" rx="2" fill="#0066CC"/>
        <rect x="18" y="18" width="12" height="12" rx="2" fill="#0066CC"/>
    </svg>
</a>

Expected output: Decorative SVGs are ignored by screen readers. Informative SVGs announce their aria-label. Linked SVGs inherit the link's accessible name.

Common Mistakes

1. Missing alt attribute entirely — The screen reader reads the filename. Images named "IMG_5042.jpg" become a meaningless string of characters.
2. Redundant alt text — "Image of" or "Photo of" is redundant because screen readers already announce "image". Alt text like "image of a cat" should be "Cat playing with yarn."
3. Alt text that is too long — Alt text is not a novel. Keep it under 125 characters for most images. Use aria-describedby for long descriptions.
4. Alt text for decorative images — Every decorative image should have alt="". Including alt text makes screen readers announce it unnecessarily.
5. Using placeholder text in alt — "Product image" tells the user nothing about the specific product. Be descriptive.
6. Text in images — Text in images is pixel-based and cannot be read by screen readers, resized by users, or translated by browsers.
7. Ignoring complex images — Charts, diagrams, and infographics often have no text alternative. Always provide a data table or long description.

Practice Questions

1. What is WCAG Success Criterion 1.1.1? Non-text Content: All non-text content presented to the user must have a text alternative that serves the equivalent purpose.
2. When should you use null alt text (alt="")? For decorative images that do not convey information or serve a function.
3. What is the recommended maximum length for alt text? Keep alt text under 125 characters for most images. Use aria-describedby for longer descriptions.
4. How should you handle alt text for a linked logo? The alt text should describe the link destination, not the image. alt="Home" or alt="DodaTech Home".
5. Challenge: Take a data-heavy infographic from a news website and write: a short alt text, a long description using aria-describedby, and a data table equivalent. Ensure all three convey the same information.

FAQ

Mini Project

Create a photo gallery page with at least 8 images of different types: 3 informative product photos with descriptive alt text, 2 decorative background images with null alt, 2 functional icon buttons with function-based alt, and 1 complex infographic with both short alt text and a long description via aria-describedby. Also include a data table fallback for the infographic. Test with a screen reader to verify all images are handled correctly.

What's Next

Continue with Lesson 12: Multimedia Accessibility to learn how to make audio and video content accessible with captions, transcripts, and audio descriptions.