WCAG 1.1.1: Non-text Content

WCAG 1.1.1 Non-text Content is a foundational success criterion for web accessibility, ensuring that all users can access and understand information presented visually, audibly, or interactively. It mandates that any content that is not purely text must have a text alternative that serves an equivalent purpose.

This principle is crucial because many users rely on assistive technologies or different browsing methods that cannot directly interpret non-text content. Providing a text alternative allows this content to be transformed into formats such as large print, braille, speech, symbols, or simpler language, making it universally accessible.

Understanding WCAG 1.1.1: Non-text Content

The core idea behind WCAG 1.1.1 is to provide programmatic access to the information or function conveyed by non-text content. This means a text description or label should accurately represent what the non-text content does or shows, allowing assistive technologies to convey that information to users.

What is "Non-text Content"?

Non-text content encompasses a wide range of elements on a webpage. Examples include:

• Images: Photos, illustrations, diagrams, charts, graphs, maps, decorative images, image-based buttons, and logos.
• Graphical representations of text: Text that is rendered as an image.
• Audio content: Standalone audio files (e.g., podcasts, sound effects) where the audio is the primary source of information.
• Video content: Standalone video files (e.g., animations, video-only content) without synchronized audio.
• Form controls: Graphical buttons, image inputs.
• CAPTCHA: Images or audio used to verify that the user is human.
• Visual spacing/formatting: If used to convey information (e.g., a spacer image used for visual hierarchy).

Why WCAG 1.1.1 Matters for Accessibility

The provision of text alternatives is vital for several user groups and has broader benefits:

• Visually Impaired Users: Screen reader users cannot perceive images or other visual content. Text alternatives allow screen readers to convey the image’s content or purpose, ensuring equivalent access to information.
• Users with Cognitive Disabilities: Text alternatives can simplify complex visual information, or provide a choice of how content is consumed (e.g., reading a transcript instead of watching a video).
• Users with Limited Bandwidth: Users who browse with images turned off due to slow internet connections can still understand the page’s content if text alternatives are present.
• Search Engine Optimization (SEO): Search engine crawlers also rely on text alternatives to understand the content of images and other non-text elements, which can improve search rankings.
• Users of Text-Only Browsers: Some legacy or specialized browsers display only text content.

Success Criteria and Requirements (WCAG 2.0 & 2.1 Level A)

WCAG 1.1.1 outlines specific requirements based on the type and purpose of the non-text content:

1. Controls, Input: If the non-text content is a control or accepts user input (e.g., an image button, image input type), it must have a text alternative that describes its purpose (an accessible name).

2. Time-based Media: If the non-text content is time-based media (e.g., standalone audio or video), a text alternative that describes the content is required. For audio-only, a transcript. For video-only, a text description or transcript.

3. Test (CAPTCHA): If the non-text content is a CAPTCHA or other test of human interaction, text alternatives that identify and describe the purpose of the non-text content are provided, along with alternative forms of CAPTCHA using different modalities to accommodate different disabilities (e.g., an audio alternative for a visual CAPTCHA).

4. Decorative, Formatting, Invisible: If non-text content is purely decorative, used only for visual formatting, or is not presented to users, it must be implemented in a way that assistive technologies can ignore it. This often means providing a null (empty) alt attribute (alt="") for images or using CSS for backgrounds.

5. All Other Non-text Content: For all other non-text content, a short text alternative is required that serves the equivalent purpose of the non-text content. This is typically done using the alt attribute for <img> tags.

Practical Guidelines for Compliance

General Principles for Text Alternatives

• Identify the Purpose: Before writing a text alternative, understand why the non-text content is on the page. Is it informative, functional, or decorative?
• Provide Equivalent Purpose: The text alternative should convey the same information or achieve the same function as the non-text content. It’s not just a literal description, but a description of its meaning or action within context.
• Context is Key: The appropriate text alternative depends heavily on the context in which the non-text content appears.

Specific Content Types and Best Practices

Images

• Informative Images: Images that convey information essential to understanding the content. Provide a concise, descriptive alt attribute that communicates the image’s content or purpose.

  <img src="product-features.png" alt="Product features include a 10-hour battery life, waterproof design, and integrated GPS.">

• Functional Images (e.g., Image Buttons, Image Links): Images that perform an action or are part of a link. The alt attribute should describe the action or destination, not just the image itself.

  <a href="/cart"><img src="shopping-cart.png" alt="Go to Shopping Cart"></a>

  <input type="image" src="search-icon.png" alt="Search">

• Complex Images (Charts, Graphs, Diagrams): Images containing a significant amount of information that cannot be concisely conveyed in a short alt attribute. Provide a short alt attribute (e.g., "Sales performance chart") and a more detailed, longer description either on the page, in a linked document, or using aria-describedby.

  <img src="quarterly-report.png" alt="Quarterly sales report chart, showing a 15% increase in Q3. Refer to 'Detailed Report' link for full data." aria-describedby="report-desc">

  <p id="report-desc">The chart illustrates a steady growth across all product lines...</p>

• Decorative Images: Images that serve no functional purpose and convey no information (e.g., purely aesthetic backgrounds, stylistic borders, spacer images). They should be hidden from assistive technologies using an empty alt attribute (alt="") or by using CSS background images.

  <img src="decorative-border.png" alt="">

  <div style="background-image: url('hero-pattern.svg');"></div>

• Images of Text: Avoid using images for text unless absolutely necessary (e.g., logos). If used, the alt attribute must contain exactly the text shown in the image.

  <img src="company-logo.png" alt="Acme Corporation">

Audio and Video

• Audio-Only Content: Provide a text transcript of all significant speech and non-speech audio events. This can be embedded on the page or linked.

  <audio controls src="podcast.mp3">Your browser does not support the audio element.</audio>

  <a href="podcast-transcript.html">Read transcript of this podcast</a>

• Video-Only Content: Provide a text description or transcript that conveys the visual information. For short videos, a textual summary may suffice. For longer or complex videos, a detailed text description of the actions and visuals is needed.

  <video controls src="silent-tutorial.mp4"></video>

  <p>A detailed description of the video content follows:</p>

  <div class="video-description">[Detailed description of the tutorial steps, visual cues, and outcomes shown in the video]</div>

Form Controls and CAPTCHA

• Graphical Form Controls: Ensure all non-text controls have an accessible name. This can be the alt attribute for <input type="image">, or a visually hidden label, aria-label, or text within a <button> for graphical buttons.

  <button><img src="edit.svg" alt="Edit item"></button>

• CAPTCHA: CAPTCHAs are a common accessibility barrier. You must provide a text alternative describing the CAPTCHA’s purpose and offer at least one alternative method of verification, such as an audio CAPTCHA, a text-based question, or an alternative challenge (e.g., "I am not a robot" checkbox).

  <img src="visual-captcha.png" alt="Visual CAPTCHA: Type the characters 'G7XyR' shown in the image.">

  <label for="captcha-input">Enter characters:</label>

  <input type="text" id="captcha-input">

  <a href="#audio-captcha">Listen to an audio CAPTCHA</a>

Examples of Correct and Incorrect Implementations

Images

Informative Image (Correct)

Informative Image (Incorrect – too vague)

Image Link (Correct)

Image Link (Incorrect – redundant alt)

Decorative Image (Correct)

Decorative Image (Incorrect – missing alt or alt with content)

CAPTCHA

CAPTCHA (Correct)

CAPTCHA (Incorrect – no alternative)

Best Practices and Common Pitfalls

Best Practices

• Contextual alt Text: Always write alt text based on the image’s function and meaning within its surrounding content.
• Concise Yet Descriptive: Strive for clarity and brevity. Avoid keyword stuffing.
• Unique alt for Links: Ensure alt text for image links clearly describes the link’s destination or function, especially if there’s no visible text link nearby.
• Use CSS for Decoration: Whenever possible, use CSS background-image for purely decorative images to keep them out of the accessibility tree.
• Audit Regularly: Periodically check your site for missing or inadequate text alternatives, especially after content updates.
• User Testing: Involve users with disabilities in your testing process to identify real-world accessibility issues.

Common Pitfalls

• Missing alt Attributes: The most common error. Screen readers often announce the image file name if no alt is present, which is unhelpful.
• Generic alt Text: Using values like alt="image", alt="graphic", or alt="logo" when the image is informative.
• Redundant alt Text: Providing alt text that duplicates adjacent visible text (e.g., an image of a product icon next to the product name, where both link to the product page). For such cases, the image’s alt should be empty (alt="") if the text link is descriptive enough, or the image could be visually hidden if feasible.
• Treating All Images as Decorative: Incorrectly using alt="" for images that convey important information.
• Relying Solely on title Attribute: The title attribute is not an equivalent alternative for non-text content. It’s often used for supplementary information, and its support by assistive technologies varies.
• Not Providing Alternatives for CAPTCHAs: This creates an insurmountable barrier for many users.
• Images of Text Without Equivalent alt: If you use an image for text, the alt text must literally contain the text in the image.

Conclusion

WCAG 1.1.1 Non-text Content is fundamental to creating an inclusive web. By consistently providing accurate and contextually relevant text alternatives for all non-text content, you empower users of assistive technologies and improve the overall usability of your website. Adhering to this criterion ensures that everyone, regardless of their abilities, can access and understand the information you present.