WCAG 1.1.1 Non-text Content — Testing Guide for Mobile & Web Apps

WCAG 1.1.1, Non-text Content, is a foundational accessibility requirement. It mandates that any information conveyed by non-text elements must also be available in text format. This ensures users who

Ensuring WCAG 1.1.1 Compliance: A Developer's Guide to Non-Text Content

WCAG 1.1.1, Non-text Content, is a foundational accessibility requirement. It mandates that any information conveyed by non-text elements must also be available in text format. This ensures users who cannot perceive non-text content, such as images, audio, or video, can still access the same information. Think of it as providing a text alternative for every piece of non-textual information.

Why WCAG 1.1.1 Matters: Real Users, Real Impact

Non-compliance with WCAG 1.1.1 directly impacts millions of users. This includes:

• Visually Impaired Users: Those using screen readers rely on text alternatives to understand images, charts, and other visual information. Without them, these elements are invisible and their content inaccessible.
• Users with Cognitive Disabilities: Some users may benefit from the clarity and simplicity of text descriptions over complex graphical elements.
• Users in Low-Bandwidth Environments: Text alternatives can load faster and consume less data than images or videos, improving usability for those with limited connectivity.
• Search Engine Optimization (SEO): Search engines primarily read text. Properly described images and media improve discoverability and indexing.

Adherence to WCAG 1.1.1 is not just a best practice; it's a legal requirement in many jurisdictions, including under the EU's European Accessibility Act (EAA) and the Americans with Disabilities Act (ADA) in the United States. Failure to comply can lead to legal challenges and reputational damage.

Common WCAG 1.1.1 Violations and Examples

Violations of this criterion often stem from neglecting to provide equivalent text for non-text elements.

1. Informative Images Without Alt Text:

• Web: An image of a graph showing sales trends without a descriptive alt attribute.
• Mobile (Android/iOS): An image within an app depicting a product feature, but it lacks a content description for screen readers.

1. Decorative Images Lacking Null Alt Text:

• Web: A purely decorative border image or icon that doesn't convey information, but is not marked as alt="".
• Mobile (Android/iOS): An ornamental graphic element in the app's UI that serves no functional purpose and isn't marked as importantForAccessibility="no" or equivalent.

1. Complex Charts and Graphs Without Text Summaries:

• Web: A bar chart illustrating user demographics without a linked text summary or table detailing the data points.
• Mobile (Android/iOS): A visual representation of data within an app that isn't accompanied by a textual explanation of the findings.

1. Audio/Video Content Without Transcripts or Captions:

• Web: A video tutorial embedded on a website without a transcript or captions.
• Mobile (Android/iOS): An in-app video explaining a process that lacks audio descriptions or synchronized captions.

1. CAPTCHAs Without Text Alternatives:

• Web: A distorted text CAPTCHA that is difficult for visually impaired users to decipher, without an audio alternative.
• Mobile (Android/iOS): An image-based CAPTCHA in a registration flow that doesn't offer a text-based alternative or audio challenge.

Testing for WCAG 1.1.1 Compliance

A multi-pronged approach combining manual checks and automated tools is most effective.

#### Manual Testing Steps

1. Identify All Non-Text Elements: Systematically review your application (web pages or app screens) and list every image, icon, audio file, video, chart, and other non-textual component.
2. Check for Text Equivalents: For each identified non-text element, determine if equivalent information is provided in text.

• Informative Images: Do they have descriptive alt text (web) or content descriptions (mobile)?
• Decorative Images: Are they marked as decorative (e.g., alt="" for web, importantForAccessibility="no" for Android)?
• Complex Data Visualizations: Is there a summary or data table available?
• Audio/Video: Are transcripts and/or captions provided?

1. Verify Quality of Text Equivalents:

• Conciseness and Accuracy: Is the text brief but informative? Does it accurately reflect the content of the non-text element?
• Contextual Relevance: Does the text alternative make sense in the context where the non-text element appears?

1. Test with Assistive Technologies:

• Screen Readers: Use VoiceOver (iOS), TalkBack (Android), or NVDA/JAWS (web) to navigate your application. Listen to how non-text elements are announced.
• Magnification Tools: Ensure text alternatives remain readable and understandable when zoomed.

#### Automated Tools for WCAG 1.1.1 Checks

Several automated tools can assist in identifying potential violations:

• Web:
• Browser Extensions: axe DevTools, WAVE, Lighthouse (built into Chrome DevTools).
• Command-Line Tools: pa11y, axe-core.
• Mobile (Android/iOS):
• Android Accessibility Scanner: A Google app that analyzes your app for common accessibility issues.
• iOS Accessibility Inspector: Part of Xcode, it helps identify accessibility issues in iOS apps.

These tools can flag missing alt text, incorrect alt text usage, and other common issues. However, they cannot fully determine the *quality* or *appropriateness* of the text alternative, which requires human judgment.

#### Mobile-Specific Considerations

• Android:
• Content Descriptions: For images and UI elements that convey information, use android:contentDescription in XML layouts or setContentDescription() in code.
• importantForAccessibility: For purely decorative elements, set android:importantForAccessibility="no".
• Accessibility Services: Test with TalkBack enabled to hear how elements are announced.
• iOS:
• Accessibility Labels: Use UIAccessibilityLabel to provide descriptive text for non-text elements.
• isAccessibilityElement and accessibilityTraits: For decorative elements, set isAccessibilityElement = false.
• Accessibility Inspector: Leverage Xcode's Accessibility Inspector to preview how VoiceOver will interact with your UI.

Fixing WCAG 1.1.1 Violations

The fix is generally straightforward: provide appropriate text alternatives.

#### Web Examples

Violation:

<img src="sales-chart.png" alt="">

Fix (Informative Image):

<img src="sales-chart.png" alt="Sales increased by 15% in Q3 2023 compared to Q2.">

Fix (Decorative Image):

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

Violation (Complex Chart):

<div id="chart"></div>
<script> ... chart rendering ... </script>

Fix:

<div id="chart"></div>
<script> ... chart rendering ... </script>
<p>
  <strong>Chart Summary:</strong> User demographics show a 60% increase in users aged 18-25, a 30% increase in the 26-40 age bracket, and a 10% decrease in users over 40.
</p>

#### Mobile (Android) Examples

Violation (XML):

<ImageView
    android:id="@+id/product_icon"
    android:src="@drawable/product_icon"
    android:contentDescription="@null" />

Fix (Informative Image):

<ImageView
    android:id="@+id/product_icon"
    android:src="@drawable/product_icon"
    android:contentDescription="@string/product_icon_description" />

In res/values/strings.xml:

<string name="product_icon_description">Icon representing the premium product features.</string>

Fix (Decorative Image):

<ImageView
    android:id="@+id/decorative_element"
    android:src="@drawable/decorative_graphic"
    android:importantForAccessibility="no" />

How SUSA (SUSATest) Checks for WCAG 1.1.1

SUSA's autonomous QA platform significantly streamlines WCAG 1.1.1 compliance testing. When you upload your APK or web URL, SUSA's intelligent exploration engine, driven by 10 distinct user personas (including those with accessibility needs), automatically navigates your application.

• Autonomous Discovery: SUSA identifies all non-text elements, including images, icons, and media, without requiring pre-written scripts.
• Persona-Based Testing: The "Accessibility" persona actively probes for missing or inadequate text alternatives. It simulates how a user relying on assistive technologies would interact with your app.
• Automated Analysis: SUSA analyzes the properties of these non-text elements. It checks for the presence of alt attributes on web and content descriptions on mobile.
• WCAG 2.1 AA Compliance: SUSA performs comprehensive WCAG 2.1 AA testing, which inherently includes WCAG 1.1.1 as a Level A criterion.
• Reporting: SUSA identifies crashes, ANRs, dead buttons, and crucially, accessibility violations like missing text alternatives. It provides clear reports detailing the specific elements that fail WCAG 1.1.1, often pinpointing the exact screen and component.
• Cross-Session Learning: With each run, SUSA becomes more adept at understanding your application's structure and identifying potential accessibility regressions.

By integrating SUSA into your development workflow, you gain an automated, continuous method for detecting WCAG 1.1.1 violations, ensuring your application is accessible to a wider audience and meets critical legal requirements.