Mobile Accessibility Testing: WCAG Compliance for iOS and Android

// Proper accessibility label example
button.accessibilityLabel = "Add to cart"
button.accessibilityHint = "Adds item to your shopping cart"
button.accessibilityTraits = .button

// Bad example - lacks context
button.accessibilityLabel = "Add" // Too vague

// Creating custom rotor for table sections
let customRotor = UIAccessibilityCustomRotor(name: "Sections") { predicate in
    // Custom navigation logic
    return UIAccessibilityCustomRotorItemResult(
        targetElement: nextSection,
        targetRange: nil
    )
}
accessibilityCustomRotors = [customRotor]

// Announce changes to screen reader users
UIAccessibility.post(
    notification: .announcement,
    argument: "Cart updated with 3 items"
)

// Notify of layout changes
UIAccessibility.post(
    notification: .layoutChanged,
    argument: firstNewElement
)

// Decorative images
decorativeImage.isAccessibilityElement = false

// Informative images
productImage.accessibilityLabel = "Blue running shoes, size 10"

// Complex images (charts, diagrams)
chartView.accessibilityLabel = "Revenue chart"
chartView.accessibilityValue = "Q1: $50K, Q2: $75K, Q3: $100K, Q4: $125K"

// Button with clear description
addButton.contentDescription = "Add item to cart"

// ImageView with meaningful description
productImage.contentDescription = "Red leather wallet with gold zipper"

// Decorative images - hide from TalkBack
decorativeIcon.importantForAccessibility =
    View.IMPORTANT_FOR_ACCESSIBILITY_NO

// Group related items
containerLayout.contentDescription = "User profile card"
containerLayout.importantForAccessibility =
    View.IMPORTANT_FOR_ACCESSIBILITY_YES

ViewCompat.addAccessibilityAction(
    emailItem,
    "Delete email"
) { view, arguments ->
    deleteEmail(view)
    true
}

ViewCompat.addAccessibilityAction(
    emailItem,
    "Mark as read"
) { view, arguments ->
    markAsRead(view)
    true
}

// Announce dynamic content changes
statusTextView.accessibilityLiveRegion =
    View.ACCESSIBILITY_LIVE_REGION_POLITE

// For urgent announcements
errorTextView.accessibilityLiveRegion =
    View.ACCESSIBILITY_LIVE_REGION_ASSERTIVE

// Programmatic announcement
view.announceForAccessibility("Upload complete")

// Mark view as heading for navigation
titleTextView.accessibilityHeading = true

// Or using ViewCompat
ViewCompat.setAccessibilityHeading(titleTextView, true)

// iOS Example
saveButton.accessibilityLabel = "Save document"
saveButton.accessibilityHint = "Saves your document to cloud storage"

// Android (as discussed in [Cross-Platform Mobile Testing: Strategies for Multi-Device Success](/blog/cross-platform-mobile-testing)) (as discussed in [Appium 2.0: New Architecture and Cloud Integration for Modern Mobile Testing](/blog/appium-2-architecture-cloud)) Example
saveButton.contentDescription = "Save document"
saveButton.tooltipText = "Saves your document to cloud storage"

// Dynamic labels based on state
fun updatePlayButtonLabel() {
    playButton.contentDescription = when (mediaPlayer.isPlaying) {
        true -> "Pause audio"
        false -> "Play audio"
    }
}

// Shopping cart with item count
fun updateCartLabel(itemCount: Int) {
    cartButton.contentDescription = when (itemCount) {
        0 -> "Shopping cart, empty"
        1 -> "Shopping cart, 1 item"
        else -> "Shopping cart, $itemCount items"
    }
}

// iOS - Supporting Dynamic Type with proper contrast
extension UIColor {
    static func accessibleText(on background: UIColor) -> UIColor {
        // Calculate luminance and return appropriate text color
        let backgroundLuminance = background.luminance()
        return backgroundLuminance > 0.5 ? .black : .white
    }

    func contrastRatio(with color: UIColor) -> CGFloat {
        let luminance1 = self.luminance()
        let luminance2 = color.luminance()
        let lighter = max(luminance1, luminance2)
        let darker = min(luminance1, luminance2)
        return (lighter + 0.05) / (darker + 0.05)
    }
}

// Bad: Color only indicates status
statusIndicator.setBackgroundColor(Color.RED) // Error state

// Good: Color + icon + text
statusIndicator.apply {
    setBackgroundColor(Color.RED)
    setImageResource(R.drawable.ic_error)
    contentDescription = "Error: Connection failed"
}

// Good: Pattern + color for charts
chartView.apply {
    // Use different patterns/textures for data series
    series1.pattern = Pattern.SOLID
    series2.pattern = Pattern.STRIPED
    series3.pattern = Pattern.DOTTED
}

// iOS - Ensure minimum touch target
class AccessibleButton: UIButton {
    override var intrinsicContentSize: CGSize {
        let size = super.intrinsicContentSize
        return CGSize(
            width: max(size.width, 44),
            height: max(size.height, 44)
        )
    }

    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        let expandedBounds = bounds.insetBy(dx: -10, dy: -10)
        return expandedBounds.contains(point)
    }
}

// Android - Minimum touch target with ViewCompat
fun ensureMinimumTouchTarget(view: View) {
    ViewCompat.setMinimumWidth(view, 48.dp)
    ViewCompat.setMinimumHeight(view, 48.dp)
}

// Add touch delegate for small clickable areas
val parent = smallIcon.parent as View
parent.post {
    val delegateArea = Rect()
    smallIcon.getHitRect(delegateArea)

    // Expand touch area by 12dp in all directions
    delegateArea.inset(-12.dp, -12.dp)

    parent.touchDelegate = TouchDelegate(delegateArea, smallIcon)
}

<!-- Android Layout Example -->
<LinearLayout
    android:orientation="horizontal"
    android:padding="8dp">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:minWidth="48dp"
        android:layout_marginEnd="16dp"
        android:text="Cancel" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:minWidth="48dp"
        android:text="Confirm" />
</LinearLayout>

// iOS - Custom focus order
override var accessibilityElements: [Any]? {
    get {
        return [
            titleLabel,
            descriptionLabel,
            primaryButton,
            secondaryButton,
            closeButton
        ]
    }
    set {}
}

// Skip decorative elements
decorativeView.isAccessibilityElement = false

// Android - Accessibility traversal order
titleTextView.accessibilityTraversalBefore = descriptionTextView.id
descriptionTextView.accessibilityTraversalBefore = actionButton.id

// Group related content
cardView.apply {
    importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_YES
    contentDescription = "Product card: ${product.name}, ${product.price}"
}

// iOS - Trap focus within modal
override func accessibilityPerformEscape() -> Bool {
    dismissModal()
    return true
}

// Ensure focus moves to modal when shown
UIAccessibility.post(notification: .screenChanged, argument: modalTitle)

// Announce when new content loads
recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        if (isLastItemVisible && loadingMore) {
            recyclerView.announceForAccessibility(
                "Loading more items"
            )
        }
    }
})

// Support Dynamic Type
titleLabel.font = UIFont.preferredFont(forTextStyle: .headline)
titleLabel.adjustsFontForContentSizeCategory = true

// Custom fonts with Dynamic Type scaling
let customFont = UIFont(name: "CustomFont", size: 17)!
bodyLabel.font = UIFontMetrics(forTextStyle: .body)
    .scaledFont(for: customFont)
bodyLabel.adjustsFontForContentSizeCategory = true

// Listen for size changes
NotificationCenter.default.addObserver(
    forName: UIContentSizeCategory.didChangeNotification,
    object: nil,
    queue: .main
) { _ in
    self.updateLayout()
}

<!-- Use sp units for text sizes -->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    android:textAppearance="?attr/textAppearanceBody1" />

// Handle extreme font scaling
fun isLargeFontScale(): Boolean {
    val fontScale = resources.configuration.fontScale
    return fontScale >= 1.3f
}

// Adjust layout for large text
if (isLargeFontScale()) {
    linearLayout.orientation = LinearLayout.VERTICAL
} else {
    linearLayout.orientation = LinearLayout.HORIZONTAL
}

# Launch from Xcode
Xcode > Open Developer Tool > Accessibility Inspector

# Features:
# - Inspection mode (hover over elements)
# - Audit tab (automated checks)
# - Color contrast analyzer
# - Element hierarchy viewer

# Run accessibility audit from terminal
xcrun simctl spawn booted log stream --predicate \
  'subsystem == "com.apple.accessibility"' --level=debug

# Install from Google Play Store
# Or via ADB:
adb install accessibility-scanner.apk

# Usage:
# 1. Enable scanner in Accessibility settings
# 2. Tap floating action button
# 3. Navigate to screen to test
# 4. Tap checkmark to scan

func testAccessibility() {
    let app = XCUIApplication()
    app.launch()

    // Verify elements are accessible
    let addButton = app.buttons["Add to cart"]
    XCTAssertTrue(addButton.exists)
    XCTAssertTrue(addButton.isHittable)

    // Check accessibility labels
    XCTAssertEqual(
        addButton.label,
        "Add to cart"
    )

    // Verify minimum touch target
    let frame = addButton.frame
    XCTAssertGreaterThanOrEqual(frame.width, 44)
    XCTAssertGreaterThanOrEqual(frame.height, 44)
}

import androidx.test.espresso.accessibility.AccessibilityChecks

class AccessibilityTest {
    init {
        // Enable accessibility checks for all tests
        AccessibilityChecks.enable()
    }

    @Test
    fun testButtonAccessibility() {
        onView(withId(R.id.add_button))
            .check(matches(isDisplayed()))
            .check(matches(hasContentDescription()))
            .check(matches(hasMinimumTouchTarget(48.dp)))
    }
}

// Custom matcher for touch target size
fun hasMinimumTouchTarget(minSize: Int) = object : TypeSafeMatcher<View>() {
    override fun describeTo(description: Description) {
        description.appendText("has minimum touch target of $minSize")
    }

    override fun matchesSafely(view: View): Boolean {
        return view.width >= minSize && view.height >= minSize
    }
}

# Fastfile
lane :accessibility_tests do
  run_tests(
    scheme: "YourApp",
    devices: ["iPhone 14 Pro"],
    only_testing: ["YourAppUITests/AccessibilityTests"]
  )

  # Run custom accessibility audit
  sh("ruby scripts/accessibility_audit.rb")
end

# Custom audit script
def audit_accessibility
  violations = []

  # Check for images without accessibility labels
  violations += find_unlabeled_images

  # Check for small touch targets
  violations += find_small_touch_targets

  # Check for low contrast
  violations += find_contrast_violations

  if violations.any?
    fail "Found #{violations.count} accessibility violations"
  end
end

// build.gradle.kts
android {
    testOptions {
        unitTests {
            isIncludeAndroidResources = true
        }
    }
}

dependencies {
    androidTestImplementation("androidx.test.espresso:espresso-accessibility:3.5.1")
    androidTestImplementation("com.google.android.apps.common.testing.accessibility.framework:accessibility-test-framework:4.0.0")
}

// AccessibilityTest.kt
@RunWith(AndroidJUnit4::class)
class ContinuousAccessibilityTest {
    @get:Rule
    val activityRule = ActivityScenarioRule(MainActivity::class.java)

    @Before
    fun setup() {
        AccessibilityChecks.enable()
            .setRunChecksFromRootView(true)
            .setSuppressingResultMatcher(
                allOf(
                    matchesCheck(DuplicateSpeakableTextCheck::class.java),
                    matchesViews(withId(R.id.allowed_duplicate))
                )
            )
    }

    @Test
    fun testAllScreensAccessibility() {
        // Navigation through all major screens
        // Accessibility checks run automatically
        navigateToHome()
        navigateToProfile()
        navigateToSettings()
    }
}

#!/bin/bash
# .git/hooks/pre-commit

echo "Running accessibility checks..."

# Check for missing accessibility labels (iOS)
missing_labels=$(grep -r "UIImage\|UIButton" --include="*.swift" | \
  grep -v "accessibilityLabel" | wc -l)

if [ "$missing_labels" -gt 0 ]; then
  echo "Warning: Found UI elements potentially missing accessibility labels"
fi

# Check for hardcoded colors (should use semantic colors)
hardcoded_colors=$(grep -r "UIColor(red:" --include="*.swift" | wc -l)

if [ "$hardcoded_colors" -gt 5 ]; then
  echo "Warning: Found hardcoded colors. Consider using semantic colors for accessibility"
fi

# Run accessibility unit tests
npm run test:accessibility

if [ $? -ne 0 ]; then
  echo "Accessibility tests failed. Please fix before committing."
  exit 1
fi

echo "Accessibility checks passed!"

// accessibility-report.js
const fs = require('fs');
const { execSync } = require('child_process');

function generateAccessibilityReport() {
  const report = {
    timestamp: new Date().toISOString(),
    platform: process.env.PLATFORM,
    violations: [],
    warnings: [],
    passed: []
  };

  // Run automated tests
  const testResults = JSON.parse(
    execSync('npm run test:accessibility:json').toString()
  );

  // Categorize results
  testResults.forEach(result => {
    if (result.severity === 'error') {
      report.violations.push(result);
    } else if (result.severity === 'warning') {
      report.warnings.push(result);
    } else {
      report.passed.push(result);
    }
  });

  // Calculate compliance score
  const total = report.violations.length +
                report.warnings.length +
                report.passed.length;
  report.complianceScore =
    ((report.passed.length / total) * 100).toFixed(2);

  // Generate HTML report
  const html = generateHTMLReport(report);
  fs.writeFileSync('accessibility-report.html', html);

  // Fail build if critical violations found
  if (report.violations.length > 0) {
    console.error(`Found ${report.violations.length} accessibility violations`);
    process.exit(1);
  }

  console.log(`Accessibility compliance: ${report.complianceScore}%`);
}

generateAccessibilityReport();