WCAG 1.4.12 Text Spacing — Testing Guide for Mobile & Web Apps

WCAG 1.4.12: Text Spacing Compliance Guide

WCAG 1.4.12: Text Spacing Compliance Guide

Understanding WCAG 1.4.12: Text Spacing

WCAG 1.4.12, Text Spacing, requires that users can adjust text spacing without loss of content or functionality. Specifically, assistive technologies or user preferences should be able to override default text spacing settings to a reasonable degree. This means the application must accommodate:

• Line Height: At least 1.5 times the font size.
• Paragraph Spacing: At least 0.1 times the font size.
• Letter Spacing (Kerning): At least 0.12 times the font size.
• Word Spacing: At least 0.8 times the font size.

These adjustments should not cause text to overlap, be cut off, or become unreadable. The core principle is that users who need wider spacing for readability should not be penalized with a broken user experience.

Why Text Spacing Matters: User Impact

This criterion directly benefits users with a range of cognitive and visual needs.

• Low Vision Users: Increased line and paragraph spacing significantly improves readability by reducing visual clutter and making it easier to distinguish between lines of text. This is crucial for users who magnify their screen or have difficulty tracking lines.
• Users with Dyslexia and Other Reading Disabilities: Wider spacing can improve reading fluency and comprehension by reducing visual crowding and making words and characters more distinct.
• Users with Cognitive Impairments: For individuals who find dense text overwhelming, increased spacing can make content more digestible and less cognitively demanding.
• Elderly Users: Many older adults experience age-related vision changes, such as presbyopia, which can make reading small or closely spaced text challenging.

Failure to meet this criterion can render your application effectively unusable for a significant portion of your user base, potentially leading to non-compliance with legal mandates like the EU's European Accessibility Act (EAA) and the U.S. Americans with Disabilities Act (ADA).

Common Violations and Examples

Violations of WCAG 1.4.12 often stem from fixed layouts or hardcoded spacing values that don't adapt to user-defined text styles.

#### Mobile App Violations

1. Overlapping Text in Profile Summaries:

• Scenario: A user with increased line height enabled on their Android device views a list of user profiles. The summary text below each username, which has default line spacing set in the app, now overlaps with the username above it.
• Impact: Unreadable profile information.

1. Truncated or Hidden Action Buttons:

• Scenario: In a mobile checkout flow, the "Next" button is positioned directly below a block of descriptive text. When a user increases paragraph spacing, the button is pushed down and partially obscured by the footer, or its text label gets cut off if the button height is fixed.
• Impact: Users cannot proceed through critical workflows.

#### Web App Violations

1. Clipped Text in Navigation Menus:

• Scenario: A user navigates to a complex website with a multi-level dropdown menu. They have a browser extension or OS setting to increase letter spacing. The characters in the menu items are too close together by default, and when the user's increased letter spacing is applied, the right edge of some characters is clipped by the menu's bounding box.
• Impact: Menu items become unreadable or indistinguishable.

1. Unreadable Form Labels and Input Fields:

• Scenario: On a registration form, labels are positioned directly above their corresponding input fields with minimal default spacing. A user who prefers larger paragraph spacing finds that the label text now visually merges with the input field's placeholder text or border.
• Impact: Difficulty identifying which label belongs to which input field, leading to errors.

1. Overlapping Content in Tables:

• Scenario: A web application displays data in a table. The table cells have fixed heights, and the text within them has tight default line spacing. When a user increases line height, the text in adjacent rows begins to overlap, making the table data incomprehensible.
• Impact: Critical data becomes unreadable.

Testing for WCAG 1.4.12 Compliance

A multi-pronged approach combining manual checks and automated tools ensures comprehensive coverage.

#### Manual Testing Steps

1. Enable Text Spacing Adjustments:

• Android: Go to Settings > Accessibility > Display size and text > Font size and Display size. Also, explore Settings > Accessibility > Text and display > High contrast text or Color correction as these can sometimes interact with text rendering.
• iOS: Go to Settings > Accessibility > Display & Text Size > Larger Text and Text Size. Also, check Settings > Accessibility > Per-App Settings for specific app overrides.
• Web Browsers (Desktop): Use browser developer tools to simulate different zoom levels and font size overrides. Extensions like "User JavaScript and CSS" can be used to inject custom CSS for testing. For OS-level text scaling, this is less common on desktops but can be found in display settings.

1. Navigate and Interact: Thoroughly browse through your application, focusing on areas with significant text content, forms, menus, and lists.

1. Observe for Overlap and Truncation: Pay close attention to:

• Text lines running into each other.
• Paragraphs merging.
• Text being cut off at the edges of containers.
• Buttons, links, or other interactive elements becoming obscured or unclickable.
• Content that shifts unexpectedly or breaks layout.

1. Test Critical Flows: Specifically test login, registration, checkout, search, and any other user journeys that are essential for core functionality.

#### Automated Tools

While manual testing is crucial for nuanced observation, automated tools can quickly identify potential issues.

• Browser Developer Tools: Most modern browsers (Chrome, Firefox, Edge, Safari) have accessibility auditing tools that can flag potential text spacing issues, especially when combined with simulated device settings.
• Linters and Code Analysis Tools: Static analysis tools can sometimes detect hardcoded line-height, padding, or margin values that might conflict with user preferences.
• Accessibility Testing Frameworks: Tools like SUSA (SUSATest) can integrate automated checks into your CI/CD pipeline.

#### Mobile-Specific Considerations

• Dynamic Type (iOS) & Font Scaling (Android): These are the primary mechanisms users employ. Always test with the largest font sizes and display scaling enabled.
• Layout Constraints: Ensure that UI elements are not rigidly constrained in height. Use flexible layouts that allow content to dictate the container size.
• Custom Fonts: If your app uses custom fonts, verify that their metrics are well-behaved when system text scaling is applied. Some custom fonts may not scale as predictably as system fonts.

Fixing WCAG 1.4.12 Violations

The solution typically involves using relative units and flexible layout techniques.

#### Code Examples

Web (CSS):

Avoid fixed line-height and padding on elements containing text. Use relative units:

/* Bad: Fixed line height */
.article-content p {
  line-height: 20px; /* Problematic */
}

/* Good: Relative line height */
.article-content p {
  line-height: 1.5; /* 1.5 times the font-size */
}

/* Bad: Fixed paragraph spacing */
.article-content p + p {
  margin-top: 5px; /* Problematic */
}

/* Good: Relative paragraph spacing */
.article-content p + p {
  margin-top: 0.1em; /* 0.1 times the font-size */
}

/* Bad: Fixed letter spacing */
h1 {
  letter-spacing: -1px; /* Problematic */
}

/* Good: Relative letter spacing */
h1 {
  letter-spacing: 0.05em; /* Adjust as needed, but relative */
}

Mobile (Android - XML Layouts):

Ensure TextView and other text elements use wrap_content for height and avoid hardcoded padding that could cause overlap when system font scaling is applied.

<!-- Bad: Fixed height, hardcoded padding -->
<TextView
    android:layout_height="50dp"
    android:padding="8dp"
    android:text="User comment..." />

<!-- Good: Flexible height, relative padding -->
<TextView
    android:layout_height="wrap_content"
    android:padding="8dp" <!-- dp units are generally okay, but consider if they interact poorly with scaling -->
    android:text="User comment..." />

Mobile (iOS - Storyboards/SwiftUI):

Use Auto Layout constraints that prioritize content size and avoid fixed heights. For UILabel in UIKit, ensure numberOfLines is set to 0 and lineBreakMode is appropriate. In SwiftUI, use .lineSpacing() and ensure containers are flexible.

// UIKit Example
let label = UILabel()
label.numberOfLines = 0 // Allows text to wrap to multiple lines
label.lineBreakMode = .byWordWrapping // Standard word wrapping
label.text = "This is a long label that needs to wrap..."

How SUSA Checks WCAG 1.4.12

SUSA (SUSATest) autonomously explores your application, simulating diverse user interactions and configurations. During its exploration, SUSA specifically targets WCAG 1.4.12 by:

1. Simulating User Persona Needs: SUSA includes personas like "Elderly" and "Accessibility" that are configured with increased text scaling, larger font sizes, and wider spacing preferences.
2. Dynamic Exploration: As SUSA navigates screens, it dynamically applies these text spacing adjustments.
3. Content Analysis: SUSA analyzes the rendered UI for overlapping text, truncated content, and elements that become inaccessible due to spacing changes.
4. Flow Tracking: Critical user flows (login, checkout, etc.) are monitored to ensure they remain functional and all content is visible even with adjusted text spacing.
5. Violation Reporting: SUSA identifies and reports specific instances where text spacing adjustments lead to usability issues, including screenshots and detailed descriptions, flagging them as accessibility violations.
6. Regression Script Generation: For web applications, SUSA auto-generates Playwright scripts, and for Android, Appium scripts. These scripts can be configured to include checks for text spacing issues, ensuring that future regressions are caught.

By integrating SUSA into your QA process, you gain an automated, persona-driven approach to identifying and rectifying WCAG 1.4.12 violations, ensuring your application is accessible to