WCAG 1.4.5 Images of Text — Testing Guide for Mobile & Web Apps

WCAG 1.4.5, "Images of Text," mandates that text should be actual text, not embedded within images. This ensures that text is perceivable, adaptable, and distinguishable for all users, adhering to Lev

Ensuring Text Readability: A Practical Guide to WCAG 1.4.5 (Images of Text)

WCAG 1.4.5, "Images of Text," mandates that text should be actual text, not embedded within images. This ensures that text is perceivable, adaptable, and distinguishable for all users, adhering to Level AA conformance.

What WCAG 1.4.5 Requires

At its core, this criterion means you cannot present text content as part of an image file. This includes:

• Logos with text: If your logo contains words, those words must be represented as actual text.
• Graphical text elements: Any text that serves a functional purpose, like buttons, navigation labels, or headings, must be selectable, searchable, and resizable text.
• Text within UI controls: Text inside buttons, input fields, or other interactive elements must be real text.

The only exception is when the image of text is purely decorative and conveys no meaningful information.

Why WCAG 1.4.5 Matters

Failing to meet this criterion significantly impacts users with disabilities and those with specific needs:

• Visual Impairments: Users relying on screen readers cannot access text embedded in images. Screen readers can only interpret actual text elements.
• Cognitive Disabilities: Users with learning disabilities or dyslexia may find it challenging to read text within images, especially if font choices are poor or contrast is low.
• Low Vision: Users who magnify their screens will experience pixelation and blurriness when zooming into text within images, making it illegible.
• Technical Limitations: Users with slow internet connections or limited data may struggle to download image-heavy content. Text is generally more efficient to transfer.
• Search Engine Optimization (SEO): Search engines cannot index text within images, hindering discoverability.

Adherence to WCAG 1.4.5 is crucial for compliance with regulations like the European Accessibility Act (EAA) and the Americans with Disabilities Act (ADA), ensuring digital inclusivity and avoiding legal repercussions.

Common Violations and Examples

Here are typical scenarios where WCAG 1.4.5 is violated:

#### Mobile Apps

1. Button Labels as Images:

• Violation: A "Submit Order" button is an image file (e.g., submit_button.png).
• Impact: Screen readers announce "image" instead of "Submit Order," leaving blind users unable to understand the button's function. Magnified views become pixelated.

1. Promotional Banners with Text:

• Violation: A splash screen or promotional banner displays "Limited Time Offer: 50% Off!" as a JPEG or PNG.
• Impact: Users with low vision cannot zoom in to read the details clearly. Users with screen readers miss the offer entirely.

1. App Name/Logo in Image:

• Violation: The app's primary logo, which includes the app's name, is a single image file.
• Impact: Screen readers might announce "company logo" but not the app's name, making it difficult for users to identify the application.

#### Web Applications

1. Navigation Menu Items as Images:

• Violation: Navigation links like "Home," "Products," and "Contact Us" are rendered as individual image files.
• Impact: Users with screen readers cannot navigate the site effectively. Text is unselectable for copy-pasting.

1. Error Messages or Status Updates as Images:

• Violation: A success message like "Your payment was processed successfully" or an error message like "Invalid credentials" is displayed as an image.
• Impact: Users relying on assistive technologies are unaware of the outcome of their actions.

1. Captchas Using Text in Images:

• Violation: Traditional CAPTCHAs requiring users to decipher distorted text within an image.
• Impact: This is a significant barrier for users with visual impairments and can be frustrating for many others.

How to Test for Compliance

Testing for WCAG 1.4.5 involves a combination of manual checks and automated tools.

#### Manual Testing Steps

1. Inspect UI Elements: Systematically examine all text-based elements on your application.
2. Use Browser Developer Tools (Web): Right-click on suspected text elements and select "Inspect" or "Inspect Element." Check the tag's src attribute. If the text is within an tag (and not purely decorative), it's a violation. Also, check for text rendered via CSS background-image for functional elements.
3. Simulate Screen Reader Behavior (Mobile & Web):

• Mobile: Enable TalkBack (Android) or VoiceOver (iOS). Navigate through your app. Does the screen reader announce functional text correctly, or does it say "image"?
• Web: Use browser extensions like NVDA, JAWS, or ChromeVox. Navigate your web app and listen to how elements are announced.

1. Text Selection and Copy-Pasting: Attempt to select and copy text from all visible text elements. If you cannot select and copy text from what appears to be text, it's likely an image of text.
2. Zoom and Magnification: Zoom into text elements using browser zoom or operating system magnification tools. If text becomes pixelated or unreadable, it's a potential violation.

#### Automated Tools

• Browser Extensions: axe DevTools, WAVE (Web Accessibility Evaluation Tool) are excellent for web applications. They can flag images containing text.
• Static Analysis Tools: Many linters and code quality tools can be configured to check for common patterns of image-based text, though they may not catch all instances.
• Dynamic Testing Platforms: Platforms like SUSA can explore your application and identify these issues automatically.

#### Mobile-Specific Considerations

• Content Descriptions (Android): For images that *must* convey information and are not purely decorative, ensure they have meaningful contentDescription attributes. However, for functional text, it should be actual text.
• Accessibility Labels (iOS): Similar to Android, ensure functional text is not part of an image. If an image *is* used for functional text, it needs an appropriate accessibilityLabel.
• Native Text Components: Prioritize using native text views and labels provided by Android and iOS SDKs.

How to Fix Violations

The primary fix is to replace images of text with actual text elements.

#### Web Application Fixes

• Replace tags: If a navigation link is an image, replace it with an tag containing text.

    <!-- Violation -->
    <a href="/products">
        <img src="images/products_nav.png" alt="Products">
    </a>

    <!-- Fix -->
    <a href="/products">Products</a>

• Use CSS for Styling: Apply styling (fonts, colors, sizes) to actual text elements using CSS, rather than embedding text in background images for functional components.
• Decorative Images: For purely decorative images that happen to contain text, ensure they have an empty alt attribute (alt="") so screen readers ignore them.

    <ImageButton
        android:src="@drawable/ic_save"
        android:contentDescription="@string/save_button_description"/>

    let saveButton = UIButton(type: .system)
    saveButton.setImage(UIImage(systemName: "square.and.arrow.down"), for: .normal)
    saveButton.accessibilityLabel = "Save"