Mobile Accessibility: Building Inclusive Mobile Applications 2026

import SwiftUI

struct AccessibleProductCard: View {
    let product: Product

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            AsyncImage(url: product.imageURL) { phase in
                if let image = phase.image {
                    image
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                }
            }
            .frame(height: 200)
            .accessibilityHidden(true) // Decorative image

            Text(product.name)
                .font(.headline)
                .accessibilityLabel("Product name: \(product.name)")

            Text(product.price.formatted(.currency(code: "USD")))
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .accessibilityLabel("Price: \(product.price.formatted(.currency(code: "USD")))")

            Button("Add to Cart") {
                cart.add(product)
            }
            .buttonStyle(.borderedProminent)
            .accessibilityHint("Double tap to add this item to your shopping cart")
        }
        .padding()
        .accessibilityElement(children: .combine)
        .accessibilityLabel("\(product.name), \(product.price.formatted(.currency(code: "USD")))")
        .accessibilityAddTraits(.isButton)
        .accessibilitySortPriority(1)
    }
}

struct DynamicTypeExample: View {
    @ScaledMetric private var iconSize: CGFloat = 44
    @Environment(\.sizeCategory) private var sizeCategory

    var body: some View {
        HStack(spacing: 12) {
            Image(systemName: "person.circle.fill")
                .font(.system(size: iconSize))

            VStack(alignment: .leading) {
                Text("User Name")
                    .font(.body)
                Text("Online")
                    .font(.caption)
                    .foregroundStyle(.green)
            }
        }
        .padding()
        // Adjust layout for accessibility sizes
        .dynamicTypeSize(...DynamicTypeSize.accessibility3) { scale in
            switch scale {
            case .accessibility1...:
                VStack(alignment: .center, spacing: 8)
            default:
                HStack(spacing: 12)
            }
        }
    }
}

import UIKit

class AccessibleButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)
        configureAccessibility()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        configureAccessibility()
    }

    private func configureAccessibility() {
        isAccessibilityElement = true
        accessibilityTraits = .button
        accessibilityHint = "Double tap to perform action"

        // Ensure minimum touch target
        NSLayoutConstraint.activate([
            widthAnchor.constraint(greaterThanOrEqualToConstant: 44),
            heightAnchor.constraint(greaterThanOrEqualToConstant: 44),
        ])
    }

    override func accessibilityActivate() -> Bool {
        sendActions(for: .touchUpInside)
        UIAccessibility.post(notification: .announcement,
                           argument: "Button activated")
        return true
    }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.*
import androidx.compose.ui.unit.dp

@Composable
fun AccessibleProductCard(product: Product, onAddToCart: () -> Unit) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .semantics(mergeDescendants = true) {
                contentDescription = "${product.name}, ${product.price}"
                role = Role.Button
                onClick(label = "Add to cart", action = { onAddToCart(); true })
            }
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            AsyncImage(
                model = product.imageUrl,
                contentDescription = null, // Decorative image
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
            )

            Spacer(modifier = Modifier.height(8.dp))

            Text(
                text = product.name,
                style = MaterialTheme.typography.headlineSmall,
                modifier = Modifier.semantics { }
            )

            Text(
                text = "$${product.price}",
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )

            Spacer(modifier = Modifier.height(8.dp))

            Button(
                onClick = onAddToCart,
                modifier = Modifier
                    .fillMaxWidth()
                    .defaultMinSize(minHeight = 48.dp) // Touch target
                    .semantics {
                        contentDescription = "Add ${product.name} to cart"
                    }
            ) {
                Text("Add to Cart")
            }
        }
    }
}

<Button
    android:id="@+id/addToCartButton"
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:minWidth="48dp"
    android:contentDescription="@string/add_to_cart_description"
    android:focusable="true"
    android:nextFocusDown="@id/checkoutButton"
    android:nextFocusForward="@id/wishlistButton" />

<LinearLayout
    android:id="@+id/productCard"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:contentDescription="@string/product_card_description"
    android:focusable="true"
    android:importantForAccessibility="yes"
    android:accessibilityTraits="button" />

import { View, Text, TouchableOpacity, AccessibilityInfo } from 'react-native';
import { useCallback, useEffect, useState } from 'react';

function AccessibleProductCard({ product, onPress }: ProductCardProps) {
  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);

  useEffect(() => {
    const listener = AccessibilityInfo.addEventListener(
      'screenReaderChanged',
      setScreenReaderEnabled
    );
    AccessibilityInfo.isScreenReaderEnabled().then(setScreenReaderEnabled);
    return () => listener.remove();
  }, []);

  return (
    <TouchableOpacity
      onPress={onPress}
      accessibilityLabel={`${product.name}, $${product.price}`}
      accessibilityRole="button"
      accessibilityHint="Double tap to view product details"
      accessibilityState={{ selected: product.isSelected }}
      accessibilityLiveRegion="polite"
      style={[
        styles.card,
        screenReaderEnabled && styles.cardScreenReader,
      ]}
    >
      <Image
        source={{ uri: product.imageUrl }}
        accessibilityIgnoresInvertColors={false}
        style={styles.image}
      />
      <View style={styles.content}>
        <Text
          accessibilityRole="header"
          style={styles.title}
        >
          {product.name}
        </Text>
        <Text style={styles.price}>${product.price}</Text>
        <View style={styles.rating} accessibilityLabel={`Rating: ${product.rating} out of 5`}>
          <StarRating rating={product.rating} />
        </View>
      </View>
    </TouchableOpacity>
  );
}

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class AccessibleProductCard extends StatelessWidget {
  final Product product;
  final VoidCallback onTap;

  const AccessibleProductCard({
    super.key,
    required this.product,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Semantics(
      label: '${product.name}, ${product.currency}${product.price}',
      hint: 'Double tap to view product',
      button: true,
      onTapHint: 'Open product detail',
      child: GestureDetector(
        onTap: onTap,
        child: Card(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Semantics(
                excludeSemantics: true,
                child: Image.network(
                  product.imageUrl,
                  semanticLabel: null, // Decorative
                  fit: BoxFit.cover,
                  height: 200,
                  width: double.infinity,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(12),
                child: Semantics(
                  header: true,
                  child: Text(
                    product.name,
                    style: Theme.of(context).textTheme.headlineSmall,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12),
                child: Text(
                  '\$${product.price}',
                  style: Theme.of(context).textTheme.bodyMedium,
                ),
              ),
              Semantics(
                label: 'Rating: ${product.rating} out of 5',
                child: Padding(
                  padding: const EdgeInsets.all(12),
                  child: RatingBar(rating: product.rating),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// ✅ Good - 44+ point touch target
<TouchableOpacity
  style={{
    width: 48,
    height: 48,
    justifyContent: 'center',
    alignItems: 'center',
  }}
  hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
  onPress={handlePress}
>
  <Icon name="close" size={24} />
</TouchableOpacity>

// ❌ Bad - Small touch target
<TouchableOpacity onPress={handlePress}>
  <Text style={{ fontSize: 12 }}>x</Text>
</TouchableOpacity>

// ✅ Good - status with icon + text + color
function StatusBadge({ status }: { status: 'success' | 'error' | 'pending' }) {
  const config = {
    success: { icon: 'checkmark-circle', label: 'Completed', color: '#2E7D32' },
    error: { icon: 'alert-circle', label: 'Failed', color: '#C62828' },
    pending: { icon: 'time', label: 'In Progress', color: '#F57F17' },
  };

  const { icon, label, color } = config[status];

  return (
    <View style={styles.row}>
      <Icon name={icon} size={16} color={color} />
      <Text style={[styles.label, { color }]} accessibilityLabel={label}>
        {label}
      </Text>
    </View>
  );
}

// ❌ Bad - color only
<View style={status === 'success' ? styles.greenBg : styles.redBg} />

struct ScaledText: View {
    var body: some View {
        VStack(spacing: 12) {
            // Automatically scales with Dynamic Type
            Text("Headline")
                .font(.headline)
            Text("Body text that scales with system settings")
                .font(.body)
            Text("Caption")
                .font(.caption)

            // Fixed size - does NOT scale
            Text("Fixed size text")
                .font(.system(size: 14, weight: .medium))
                .dynamicTypeSize(...DynamicTypeSize.accessibility3)
        }
        .padding()
    }
}

@Composable
fun ScaledTextExample() {
    Column(modifier = Modifier.padding(16.dp)) {
        // sp units automatically scale with system font size
        Text(
            text = "Headline",
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = "Body text that scales with system settings",
            style = MaterialTheme.typography.bodyLarge
        )
        Text(
            text = "Caption text",
            style = MaterialTheme.typography.bodySmall
        )
    }
}

// Custom VoiceOver rotor actions
let customAction = UIAccessibilityCustomAction(name: "Add to Wishlist") { _ in
    WishlistManager.shared.add(product)
    UIAccessibility.post(notification: .announcement,
                        argument: "Added to wishlist")
    return true
}

productCard.accessibilityCustomActions = [customAction]

// Group related elements
productCard.shouldGroupAccessibilityChildren = true

// Post notifications for state changes
func didUpdateCart() {
    UIAccessibility.post(
        notification: .announcement,
        argument: "Item added to cart. Cart has \(cart.items.count) items."
    )
}

// Custom TalkBack actions
Button(
    onClick = { onAddToCart() },
    modifier = Modifier.semantics {
        customActions = listOf(
            AccessibilityAction("Add to wishlist") {
                wishlistManager.add(product)
                true
            }
        )
    }
) {
    Text("Add to Cart")
}

// Announce dynamic content changes
LaunchedEffect(newNotification) {
    if (newNotification != null) {
        AccessibilityManager.getInstance()
            .sendAccessibilityEvent(
                AccessibilityEvent.obtain().apply {
                    eventType = AccessibilityEvent.TYPE_ANNOUNCEMENT
                    text = listOf("New notification: ${newNotification.title}")
                }
            )
    }
}

// Set proper reading order with accessibilityElementsHidden
function AccessibleForm() {
  return (
    <View>
      <Text
        accessibilityRole="header"
        accessibilityLabel="Personal Information Section"
      >
        Personal Information
      </Text>
      <TextInput
        accessibilityLabel="Full name"
        placeholder="Full Name"
        returnKeyType="next"
      />
      <TextInput
        accessibilityLabel="Email address"
        placeholder="Email"
        keyboardType="email-address"
        returnKeyType="done"
      />

      <View accessibilityElementsHidden={true}>
        {/* Decorative background - skip in screen reader */}
        <BackgroundDecoration />
      </View>
    </View>
  );
}

function KeyboardNavigableList() {
  return (
    <View>
      {items.map((item, index) => (
        <TouchableOpacity
          key={item.id}
          onPress={() => handleSelect(item)}
          accessibilityRole="menuitem"
          // Focus management
          nextFocusDown={index < items.length - 1 ? `item-${index + 1}` : undefined}
          nextFocusUp={index > 0 ? `item-${index - 1}` : undefined}
        >
          <Text>{item.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

// Ensure elements have unique, speakable labels
function VoiceControlButton({ label, onPress }) {
  return (
    <TouchableOpacity
      onPress={onPress}
      accessibilityLabel={label}
      accessibilityIdentifier={label.toLowerCase().replace(/\s+/g, '-')}
    >
      <Text>{label}</Text>
    </TouchableOpacity>
  );
}

// Jest + React Native Testing Library
import { render } from '@testing-library/react-native';
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('product card has no accessibility violations', async () => {
  const { container } = render(<ProductCard product={mockProduct} />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

# GitHub Actions workflow
name: Accessibility Check
on: [pull_request]
jobs:
  accesslint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: dequelabs/axe-linter-action@v1
        with:
          api_key: ${{ secrets.AXE_API_KEY }}

// Design token system for accessibility
const accessibilityTokens = {
  minTouchTarget: 48,
  colorContrast: {
    normalText: '4.5:1',
    largeText: '3:1',
    uiComponents: '3:1',
  },
  typography: {
    body: { size: 16, lineHeight: 24 },
    largeBody: { size: 18, lineHeight: 28 },
    heading: { size: 22, lineHeight: 32 },
  },
  spacing: {
    touchTargetGap: 8,
  },
};