Accessibility, Touch Targets, and Consistent UI Design in React Native

Course: React Native Training

Topic: Accessibility, Touch Targets, and Consistent UI Design

Course Link: React Native Training at JustAcademy

Demo Link: Register for a Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction to Accessibility and Consistent UI Design

Accessibility, touch targets, and consistent UI design are important concepts in React Native application development. They help developers create mobile applications that are easy to use, visually consistent, and accessible to people with different abilities.

React Native allows developers to build applications for Android and iOS using reusable components. By following accessibility guidelines, providing appropriately sized touch targets, and maintaining a consistent design system, developers can improve usability across different devices and screen sizes.

For example, a shopping application should allow users to navigate products, select quantities, add items to a cart, and complete purchases using clear labels, readable text, and easily tappable controls.

1.1 What Is Accessibility?

Accessibility means designing and developing applications that people with different abilities can understand and operate. This includes users with visual, hearing, motor, cognitive, or other accessibility needs.

In React Native, accessibility can be implemented through accessible component properties, descriptive labels, appropriate roles, clear feedback, sufficient contrast, and support for assistive technologies such as VoiceOver on iOS and TalkBack on Android.

1.2 What Are Touch Targets?

A touch target is the interactive area that users tap to perform an action. Examples include buttons, checkboxes, icons, navigation items, and clickable list rows.

Touch targets should be large enough and spaced appropriately so users can interact with them accurately, particularly when using a mobile device with one hand or when they have limited motor control.

1.3 What Is Consistent UI Design?

Consistent UI design means using the same visual and interaction patterns throughout an application. It includes consistent colors, typography, spacing, button styles, icons, navigation, and feedback messages.

Consistency helps users understand how the application works without having to learn a different interaction pattern on every screen.

2. Learning Objectives

After completing this topic, learners should be able to:

• Understand the fundamentals of mobile application accessibility.
• Use React Native accessibility properties correctly.
• Build buttons and interactive controls with suitable touch areas.
• Support screen readers on Android and iOS.
• Improve text readability, color contrast, and navigation.
• Create reusable UI components with consistent styling.
• Implement design tokens for colors, typography, and spacing.
• Test applications using accessibility tools and assistive technologies.
• Identify and fix common accessibility and UI consistency problems.

3. Importance of Accessibility in Mobile Applications

Accessibility is an essential part of application quality. An application may look attractive but still be difficult to use if its buttons are too small, its labels are unclear, or its content cannot be accessed by a screen reader.

3.1 Benefits of Accessible Design

• Improved usability: Clear labels and predictable interactions help users navigate the application.
• Inclusive experiences: People with different abilities can use the same essential features.
• Better navigation: Meaningful screen-reader announcements make interactive elements easier to understand.
• Reduced interaction errors: Appropriately sized touch targets help users select the intended controls.
• Improved readability: Suitable contrast, text sizes, and spacing make content easier to read.
• Consistent behavior: Reusable accessible components reduce differences between screens.

3.2 Examples of Accessibility Problems

4. Accessibility Features in React Native

React Native provides properties that help developers communicate the purpose, role, state, and behavior of UI elements to assistive technologies.

4.1 accessibilityLabel

The accessibilityLabel property provides a descriptive name for an accessible element. It is particularly useful for buttons containing icons without visible text.

import React from 'react';
import { View, Pressable, Text } from 'react-native';

export default function ProfileButton() {
  return (
    <View>
      <Pressable
        accessibilityRole="button"
        accessibilityLabel="Open your profile"
        onPress={() => console.log('Profile opened')}
      >
        <Text>Profile</Text>
      </Pressable>
    </View>
  );
}

In this example, the button exposes a clear purpose to assistive technologies. In a real application, replace the console statement with navigation or the appropriate action.

4.2 accessibilityRole

The accessibilityRole property identifies the type of element to assistive technologies. It helps users understand whether an element is a button, link, checkbox, header, image, or another supported role.

<Pressable
  accessibilityRole="button"
  accessibilityLabel="Submit registration"
  onPress={handleSubmit}
>
  <Text>Register</Text>
</Pressable>

Use a role that accurately represents the element's behavior. Do not describe a navigation link as a checkbox or a non-interactive label as a button.

4.3 accessibilityHint

The accessibilityHint property provides additional information about what happens when a user activates an element. Use it when the result is not already clear from the label.

<Pressable
  accessibilityRole="button"
  accessibilityLabel="Delete saved address"
  accessibilityHint="Removes this address from your saved addresses"
  onPress={handleDelete}
>
  <Text>Delete address</Text>
</Pressable>

Hints should be concise and useful. Avoid repeating the label or adding unnecessary announcements.

4.4 accessibilityState

The accessibilityState property communicates the current state of an element. Depending on the component and platform, states can include disabled, selected, checked, busy, and expanded.

<Pressable
  accessibilityRole="checkbox"
  accessibilityLabel="Accept terms and conditions"
  accessibilityState={{ checked: accepted }}
  onPress={() => setAccepted(!accepted)}
>
  <Text>{accepted ? 'Accepted' : 'Not accepted'}</Text>
</Pressable>

The example assumes that accepted and setAccepted are defined in the component. In production, consider using a native or well-tested checkbox component where appropriate.

4.5 accessible Property

The accessible property controls whether a view is treated as an accessible element. It can be useful when a group of related content should be announced together or when a container needs deliberate accessibility behavior.

<View accessible={true}
  accessibilityLabel="Order summary"
>
  <Text>Order Summary</Text>
  <Text>Total: ₹1,500</Text>
</View>

Use grouping carefully. Making a parent accessible can change how its children are exposed to assistive technologies, so verify the result on both Android and iOS.

5. Screen Readers and Assistive Technologies

A screen reader reads accessible content aloud and allows users to navigate interactive elements without relying on sight. React Native applications should provide meaningful announcements for important controls and dynamic content.

5.1 VoiceOver on iOS

VoiceOver is Apple's screen reader for iOS. Users can move between accessible elements, hear labels and roles, and activate controls using supported gestures.

Developers should test labels, element roles, focus order, modal behavior, and important state changes with VoiceOver enabled.

5.2 TalkBack on Android

TalkBack is Android's screen reader. It announces accessible elements and provides gestures for navigating and activating controls.

Developers should verify that buttons have meaningful labels, interactive elements can receive focus, and state changes are communicated correctly.

5.3 Testing Screen-Reader Output

1. Enable VoiceOver on an iOS device or simulator.
2. Enable TalkBack on an Android device or emulator.
3. Navigate through every important screen using assistive technology.
4. Listen to the announcements for buttons, inputs, images, and navigation items.
5. Confirm that interactive elements expose appropriate roles and states.
6. Check that dialogs and menus do not create confusing focus behavior.
7. Correct missing labels, redundant announcements, and inaccessible controls.

6. Touch Targets and Their Importance

Touch targets should be large enough to interact with comfortably. A visible icon and its actual interactive area are not necessarily the same size. A small icon can still have a larger touch area when the component is implemented correctly.

6.1 Recommended Touch Target Sizes

Important: Android dp and iOS pt are density-independent layout units, not raw physical pixels. These are common design recommendations, not universal guarantees that every control is accessible.

6.2 Creating Larger Touch Areas with hitSlop

React Native provides hitSlop to expand the area in which a supported touchable element can be activated without changing its visible dimensions.

import React from 'react';
import { Pressable, Text } from 'react-native';

export default function IconAction() {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel="Close dialog"
      hitSlop={10}
      onPress={() => console.log('Dialog closed')}
      style={{
        width: 44,
        height: 44,
        alignItems: 'center',
        justifyContent: 'center'
      }}
    >
      <Text style={{ fontSize: 22 }}>×</Text>
    </Pressable>
  );
}

The example gives the control a 44-by-44 layout area and adds a touch extension. Remember that hitSlop cannot extend beyond the parent view's bounds, and overlapping touch targets may still produce confusing results.

6.3 Creating a Comfortable Button

import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

export default function PrimaryButton({ title, onPress }) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={title}
      onPress={onPress}
      style={({ pressed }) => [
        styles.button,
        pressed && styles.pressed
      ]}
    >
      <Text style={styles.buttonText}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    minHeight: 48,
    paddingHorizontal: 20,
    paddingVertical: 12,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 8,
    backgroundColor: '#175CD3'
  },
  pressed: {
    opacity: 0.8
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600'
  }
});

This reusable button includes a minimum height, readable text, padding, and a pressed state. Ensure the actual width and height remain suitable for the content and platform, and check contrast and enlarged text behavior.

6.4 Spacing Between Touch Targets

Touch targets need sufficient separation so users can distinguish neighboring actions. Closely packed icons may cause accidental activation even when their individual dimensions appear acceptable.

• Keep frequently used actions easy to locate and reach.
• Avoid placing destructive actions directly beside primary actions without clear separation.
• Use consistent padding for buttons and icon controls.
• Check navigation bars, toolbars, list items, and compact forms on small screens.
• Consider one-handed use and the placement of important actions.

7. Text Readability and Typography Accessibility

Typography affects how quickly users can understand information. Small text, crowded lines, and inconsistent font weights can make an interface difficult to read.

7.1 Best Practices for Accessible Typography

• Choose readable font sizes for body text, headings, labels, and buttons.
• Use a clear hierarchy between titles, subtitles, body text, and supporting information.
• Avoid relying on very thin font weights for essential content.
• Allow text to wrap instead of clipping important information.
• Support user font scaling where possible.
• Test layouts with large accessibility text settings enabled.
• Use line spacing and paragraph spacing that support comfortable reading.

7.2 Supporting Dynamic Font Sizes

React Native's Text component supports font scaling. Avoid disabling it throughout the application simply to preserve a fixed layout.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function AccessibleMessage() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        Welcome Back
      </Text>
      <Text style={styles.description}>
        Sign in to continue to your account.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    marginBottom: 12
  },
  description: {
    fontSize: 16,
    lineHeight: 24
  }
});

The layout uses readable base font sizes and line height. Test the screen at larger font settings to make sure the content can wrap and scroll without overlapping or disappearing.

8. Color Contrast and Visual Accessibility

Color contrast is the difference in brightness between foreground content and its background. Insufficient contrast can make text, icons, and controls difficult to distinguish.

8.1 Contrast Recommendations

WCAG 2.2 provides widely used reference thresholds for digital content:

Large text generally means at least 18 pt regular or 14 pt bold under WCAG's defined criteria. The exact applicability of contrast requirements depends on the content and component.

8.2 Example of Accessible Colors

const colors = {
  primary: '#175CD3',
  textPrimary: '#101828',
  textSecondary: '#475467',
  background: '#FFFFFF',
  border: '#D0D5DD',
  error: '#B42318',
  success: '#027A48'
};

These values are example design tokens, not a guarantee that every possible color pairing meets WCAG requirements. Test each foreground and background combination, including button text, disabled states, borders, and error messages.

8.3 Do Not Depend on Color Alone

Important information should remain understandable without color perception. For example, a form error should include a descriptive message rather than displaying only a red border.

<View>
  <Text accessibilityRole="alert">
    Please enter a valid email address.
  </Text>
</View>

Check the behavior of announcements on both platforms. React Native's accessibility APIs and announcement behavior vary by operating system and component implementation.

9. Consistent UI Design Principles

A consistent interface creates predictable experiences. Users should encounter similar layouts, control behavior, visual styles, and feedback across different parts of an application.

9.1 Consistent Colors

Define a shared palette instead of assigning unrelated colors to each screen. Reuse semantic colors for primary actions, backgrounds, text, borders, errors, and success messages.

9.2 Consistent Typography

Use a defined scale for headings, body text, captions, and buttons. Consistent typography improves hierarchy and makes the application easier to scan.

9.3 Consistent Spacing

Use a spacing scale to control padding, margins, and gaps. A common scale might use increments of 4 or 8 units, adapted to the application's layout requirements.

9.4 Consistent Buttons and Inputs

Buttons with the same purpose should have similar dimensions, typography, colors, and interaction states. Text inputs should share consistent labels, borders, focus states, error messages, and spacing.

9.5 Consistent Navigation

Navigation patterns should remain predictable. Back buttons, tab bars, screen titles, and modal dismissal controls should behave consistently unless a clear platform-specific reason requires otherwise.

10. Creating Design Tokens in React Native

Design tokens are named values that represent reusable design decisions, such as colors, font sizes, spacing, border radii, and touch-target dimensions. They help maintain consistency and make global design changes easier.

10.1 Defining Design Tokens

// designTokens.js

export const colors = {
  primary: '#175CD3',
  primaryPressed: '#1849A9',
  background: '#FFFFFF',
  surface: '#F9FAFB',
  text: '#101828',
  textSecondary: '#475467',
  border: '#D0D5DD',
  error: '#B42318'
};

export const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32
};

export const typography = {
  caption: 12,
  body: 16,
  subtitle: 18,
  heading: 24,
  pageTitle: 30
};

export const dimensions = {
  minimumButtonHeight: 48,
  iconButtonSize: 48,
  borderRadius: 8
};

10.2 Using Tokens in Components

import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';
import { colors, spacing, typography, dimensions } from './designTokens';

export default function SaveButton({ onPress }) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel="Save changes"
      onPress={onPress}
      style={styles.button}
    >
      <Text style={styles.label}>Save Changes</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    minHeight: dimensions.minimumButtonHeight,
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.sm,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: dimensions.borderRadius,
    backgroundColor: colors.primary
  },
  label: {
    color: '#FFFFFF',
    fontSize: typography.body,
    fontWeight: '600'
  }
});

Centralized tokens help developers update the application's visual language without manually changing every component. Validate contrast and sizing whenever token values are changed.

11. Building Reusable Accessible Components

Reusable components help enforce accessibility and design standards throughout an application. A shared component can provide consistent sizing, labels, visual states, and interaction behavior.

11.1 Accessible Icon Button

import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

export default function AccessibleIconButton({
  label,
  symbol,
  onPress,
  disabled = false
}) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityState={{ disabled }}
      disabled={disabled}
      hitSlop={4}
      onPress={onPress}
      style={({ pressed }) => [
        styles.button,
        pressed && !disabled && styles.pressed,
        disabled && styles.disabled
      ]}
    >
      <Text accessible={false} style={styles.icon}>
        {symbol}
      </Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    width: 48,
    height: 48,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 8
  },
  icon: {
    fontSize: 24
  },
  pressed: {
    opacity: 0.7
  },
  disabled: {
    opacity: 0.4
  }
});

Example usage:

<AccessibleIconButton
  label="Open settings"
  symbol="⚙"
  onPress={() => console.log('Settings opened')}
/>

The visible symbol is excluded from the accessibility tree so the button's descriptive label can communicate its purpose. In a production application, use an appropriate icon library if required and test how the component is announced on each target platform.

11.2 Consistent Form Inputs

Reusable input components should support descriptive labels, clear error messages, appropriate keyboard types, and predictable spacing.

import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export default function EmailField({ value, onChangeText, error }) {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Email address</Text>
      <TextInput
        value={value}
        onChangeText={onChangeText}
        accessibilityLabel="Email address"
        accessibilityHint="Enter your email address"
        keyboardType="email-address"
        autoCapitalize="none"
        autoCorrect={false}
        style={styles.input}
      />
      {error ? (
        <Text accessibilityRole="alert" style={styles.error}>
          {error}
        </Text>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 16
  },
  label: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 8
  },
  input: {
    minHeight: 48,
    borderWidth: 1,
    borderColor: '#667085',
    borderRadius: 8,
    paddingHorizontal: 12,
    fontSize: 16
  },
  error: {
    marginTop: 6,
    color: '#B42318',
    fontSize: 14
  }
});

In a larger form system, also define how errors are associated with fields, how focus moves to invalid inputs, and how validation feedback is announced. Avoid relying on placeholder text as the only field label.

12. Accessible Images, Icons, and Media

Images and icons should have appropriate accessibility behavior based on their purpose.

12.1 Informative Images

Images that communicate meaningful information should have a useful description. For example, a product image might be labelled with the product name when the image itself conveys relevant information.

<Image
  source={{ uri: productImage }}
  accessible={true}
  accessibilityLabel="Blue running shoes"
  style={{ width: 160, height: 160 }}
/>

12.2 Decorative Images

Purely decorative images should generally not create unnecessary screen-reader announcements. Depending on the component and platform, use the appropriate accessible configuration to keep decorative content out of the accessibility experience.

12.3 Icons in Buttons

When an icon is part of a button, ensure that the interactive control has a meaningful label. A magnifying-glass icon, for example, should communicate a purpose such as "Search" rather than relying on its appearance alone.

13. Responsive Layout and Platform Consistency

React Native applications run on devices with different screen dimensions, pixel densities, operating-system conventions, and input methods. A design should adapt to these differences without sacrificing accessibility.

13.1 Use Flexible Layouts

• Use Flexbox for adaptable screen layouts.
• Avoid fixed heights for content containers that must accommodate larger text.
• Allow long labels and button text to wrap where appropriate.
• Use scrolling containers for content that may exceed the available screen area.
• Test narrow screens and landscape orientation when supported.
• Check keyboard visibility and ensure important form controls remain reachable.

13.2 Handle Platform Differences

Android and iOS can differ in default controls, screen-reader behavior, system font rendering, and navigation conventions. Use platform-appropriate behavior when necessary, while keeping the overall experience consistent.

Consistency does not require every element to look identical on every platform. It requires the application to maintain a coherent design language while respecting familiar platform interactions.

14. Accessibility for Forms and Validation

Forms should make it easy to identify fields, enter information, understand validation rules, and correct errors.

14.1 Form Accessibility Best Practices

• Provide a visible label for every input.
• Use appropriate keyboard types for email addresses, numbers, and other input formats.
• Explain required fields clearly.
• Display errors near the relevant input.
• Provide specific instructions for correcting invalid data.
• Do not use color as the only indication of an error.
• Preserve user-entered data when validation fails.
• Test keyboard navigation and screen-reader announcements.

14.2 Example Validation Message

function validateEmail(email) {
  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return pattern.test(email);
}

const errorMessage = validateEmail(email)
  ? ''
  : 'Enter a valid email address.';

This example provides basic client-side validation only. Real applications should validate data on the server when necessary and should not treat a client-side check as a security boundary.

15. Loading, Feedback, and Interaction States

Accessible UI design includes communicating what happens after a user performs an action. Buttons, forms, and navigation controls should provide understandable feedback.

15.1 Button States

Consider the following states when building reusable controls:

• Default: The control is ready for interaction.
• Pressed: The interface provides visual feedback during activation.
• Disabled: The action is unavailable and its state is communicated appropriately.
• Loading: The interface indicates that an operation is in progress.
• Error: The interface explains what went wrong and how the user can recover.
• Success: The interface confirms that the action completed successfully.

15.2 Loading Feedback Example

import React from 'react';
import { Pressable, Text, ActivityIndicator } from 'react-native';

export default function SubmitButton({ loading, onPress }) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={loading ? 'Submitting form' : 'Submit form'}
      accessibilityState={{ disabled: loading, busy: loading }}
      disabled={loading}
      onPress={onPress}
      style={{
        minHeight: 48,
        paddingHorizontal: 20,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
      }}
    >
      {loading ? (
        <ActivityIndicator accessibilityLabel="Submitting" />
      ) : (
        <Text>Submit</Text>
      )}
    </Pressable>
  );
}

Test loading announcements on real devices and supported screen readers. For longer operations, provide appropriate status feedback and ensure the user can understand whether the operation has completed or failed.

16. Testing Accessibility and UI Consistency

Accessibility testing should combine automated checks, manual inspection, and real interaction with assistive technologies. No single test can identify every usability problem.

16.1 Manual Testing Checklist

• Navigate the application using VoiceOver and TalkBack.
• Confirm every important interactive control has a meaningful accessible name.
• Check that roles and states are announced correctly.
• Verify touch targets and spacing on small and large devices.
• Increase system text size and confirm that content remains usable.
• Check text and component contrast.
• Use the application without relying on color alone.
• Confirm dialogs, menus, and forms can be navigated correctly.
• Check that disabled, loading, success, and error states are understandable.
• Compare repeated components across all major screens.

16.2 Useful Testing Tools

• iOS Accessibility Inspector: Inspect accessibility properties and related issues in iOS applications.
• Android Accessibility Scanner: Identify certain accessibility problems in Android interfaces.
• VoiceOver: Test screen-reader interactions on Apple devices.
• TalkBack: Test screen-reader interactions on Android devices.
• Contrast checkers: Evaluate text and UI color combinations.
• React Native testing tools: Test component behavior, accessible labels, and interaction logic.

Automated tools are useful for detecting certain problems, but they cannot reliably determine whether every label is meaningful or whether a complete workflow is understandable.

17. Common Accessibility Mistakes and Solutions

18. Practical Project: Build an Accessible Profile Screen

In this project, create a profile screen that follows accessibility principles, uses comfortable touch targets, and maintains a consistent design system.

18.1 Project Requirements

• Display a profile image with an appropriate accessible description.
• Show the user's name and supporting profile information.
• Include accessible Edit Profile and Settings buttons.
• Use a shared color palette, spacing scale, and typography system.
• Ensure important buttons have appropriately sized touch areas.
• Support screen readers and readable text scaling.
• Provide visible feedback when an action is triggered.

18.2 Sample Project Code

import React from 'react';
import { View, Text, Image, Pressable, StyleSheet } from 'react-native';

export default function ProfileScreen() {
  const handleEditProfile = () => {
    console.log('Edit profile selected');
  };

  const handleSettings = () => {
    console.log('Settings selected');
  };

  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'https://example.com/profile.jpg' }}
        accessible={true}
        accessibilityLabel="Profile photo"
        style={styles.avatar}
      />

      <Text style={styles.name}>Alex Johnson</Text>
      <Text style={styles.subtitle}>Mobile App Developer</Text>

      <Pressable
        accessibilityRole="button"
        accessibilityLabel="Edit profile"
        onPress={handleEditProfile}
        style={styles.primaryButton}
      >
        <Text style={styles.primaryButtonText}>Edit Profile</Text>
      </Pressable>

      <Pressable
        accessibilityRole="button"
        accessibilityLabel="Open settings"
        onPress={handleSettings}
        style={styles.secondaryButton}
      >
        <Text style={styles.secondaryButtonText}>Settings</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FFFFFF'
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 16
  },
  name: {
    fontSize: 24,
    fontWeight: '700',
    color: '#101828',
    textAlign: 'center'
  },
  subtitle: {
    fontSize: 16,
    color: '#475467',
    marginTop: 8,
    marginBottom: 24,
    textAlign: 'center'
  },
  primaryButton: {
    minHeight: 48,
    alignSelf: 'stretch',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#175CD3',
    padding: 12,
    borderRadius: 8,
    marginBottom: 12
  },
  primaryButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600'
  },
  secondaryButton: {
    minHeight: 48,
    alignSelf: 'stretch',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F2F4F7',
    padding: 12,
    borderRadius: 8
  },
  secondaryButtonText: {
    color: '#101828',
    fontSize: 16,
    fontWeight: '600'
  }
});

Project note: Replace the example image URI with a valid image source. Connect the event handlers to actual navigation or editing logic before using the screen in a production application. Verify the final color combinations and test the layout with larger text settings.

18.3 Project Evaluation Checklist

• Are the buttons large enough and separated appropriately?
• Do screen readers announce meaningful labels and button roles?
• Does the text remain readable at increased system font sizes?
• Do the colors provide adequate contrast?
• Are spacing, colors, and typography consistent?
• Can users understand the result of each interaction?
• Does the screen behave appropriately on Android and iOS?

19. Best Practices for Production Applications

1. Design for accessibility from the beginning: Include accessibility requirements during wireframing and component design.
2. Build a shared component library: Reuse accessible buttons, inputs, cards, and navigation elements.
3. Use semantic accessibility properties: Provide meaningful labels, roles, and states.
4. Maintain adequate touch areas: Follow platform recommendations and avoid overlapping targets.
5. Support text scaling: Design flexible layouts instead of forcing content into fixed dimensions.
6. Validate contrast: Check text, controls, borders, and important visual states.
7. Keep feedback understandable: Explain loading, errors, disabled actions, and successful operations.
8. Test on both platforms: Confirm accessibility behavior using real devices or representative simulators.
9. Document design tokens: Define reusable values and rules for the entire application.
10. Review accessibility regularly: Re-test shared components when UI changes are introduced.

20. Interview Questions and Answers

Q1. What is accessibility in React Native?

Answer: Accessibility is the practice of designing mobile interfaces so people with different abilities can understand and use them. React Native supports accessibility properties that communicate the purpose, role, and state of interface elements to assistive technologies.

Q2. What is accessibilityLabel?

Answer: It provides a descriptive name for an accessible element. It is especially useful for icon buttons that do not contain visible text explaining their purpose.

Q3. What is accessibilityRole?

Answer: It identifies an element's semantic role, such as button, link, image, or header, helping assistive technologies communicate what the element does.

Q4. What is accessibilityHint?

Answer: It provides additional information about the result of activating an element. It should be used when the action is not already obvious from its label.

Q5. What is a touch target?

Answer: A touch target is the interactive area a user taps to activate a control. It should be sufficiently large and separated from neighboring controls.

Q6. What is hitSlop in React Native?

Answer: The hitSlop property expands the touchable region of supported interactive components without requiring the visible content to become larger.

Q7. What touch-target sizes are commonly recommended?

Answer: Android Material Design commonly recommends 48 × 48 dp, while Apple's guidance commonly recommends a 44 × 44 pt hit region. Developers should also consider spacing, content, and actual device behavior.

Q8. What are VoiceOver and TalkBack?

Answer: VoiceOver is Apple's screen reader, and TalkBack is Android's screen reader. Both help users navigate and interact with accessible application content.

Q9. What is consistent UI design?

Answer: Consistent UI design means using predictable visual styles and interaction patterns for colors, typography, spacing, buttons, inputs, navigation, and feedback.

Q10. What are design tokens?

Answer: Design tokens are named reusable values for properties such as colors, spacing, typography, dimensions, and border radii. They help maintain consistency across components.

Q11. Why is color contrast important?

Answer: Sufficient contrast improves readability and helps users distinguish text and important interface elements from their backgrounds.

Q12. How can developers test accessibility?

Answer: Developers can combine manual testing with VoiceOver, TalkBack, platform accessibility inspection tools, contrast checkers, and automated component tests.

Q13. Why should text scaling be supported?

Answer: Users may need larger text to read comfortably. Flexible layouts and appropriate text scaling help prevent content from becoming inaccessible.

Q14. Why are reusable UI components important?

Answer: Reusable components reduce duplication, standardize visual behavior, and make accessibility improvements easier to apply across the application.

Q15. What is the difference between visual consistency and platform consistency?

Answer: Visual consistency means maintaining a coherent design language throughout the application. Platform consistency means respecting familiar Android and iOS interaction conventions while preserving that shared design language.

21. Practice Exercises

1. Create a button with an accessible label, role, and minimum height of 48 units.
2. Build an icon-only Settings button and test its screen-reader announcement.
3. Create a registration form with visible labels and descriptive validation errors.
4. Define reusable color, spacing, and typography tokens in a separate file.
5. Test an application screen with larger system font settings.
6. Check the contrast ratio of a primary button and its text.
7. Build a profile screen containing accessible image and navigation controls.
8. Use VoiceOver and TalkBack to test the order in which controls are announced.
9. Compare buttons across three screens and standardize their design.
10. Prepare an accessibility checklist for a production React Native application.

22. Quick Revision Notes

• Accessibility: Makes an application usable by people with different abilities.
• accessibilityLabel: Describes the purpose of an accessible element.
• accessibilityRole: Communicates the element's role.
• accessibilityHint: Explains an action's result when additional information is helpful.
• accessibilityState: Communicates relevant states such as disabled, selected, checked, or busy.
• Touch targets: Should be large enough and separated appropriately for reliable interaction.
• hitSlop: Expands the touchable area of supported controls within applicable parent bounds.
• Typography: Should remain readable and support larger text where possible.
• Color contrast: Helps users distinguish content from its background.
• Design tokens: Centralize reusable visual values.
• Reusable components: Improve consistency and simplify accessibility maintenance.
• Screen-reader testing: Validates how users navigate and understand the interface.
• Cross-platform testing: Checks behavior on Android and iOS.

23. Conclusion

Accessibility, touch targets, and consistent UI design are fundamental to building high-quality React Native applications. Developers should provide descriptive accessibility labels, meaningful roles and states, adequately sized touch targets, readable typography, sufficient color contrast, and predictable interactions.

Reusable components and design tokens make these practices easier to maintain as an application grows. Combining automated checks with manual testing, VoiceOver, TalkBack, and real-device evaluation helps developers identify problems that visual inspection alone may miss.

By applying these principles throughout the development lifecycle, React Native developers can build mobile applications that are more inclusive, reliable, maintainable, and comfortable to use.

Additional Learning Resources

• Explore React Native Training at JustAcademy
• Register for a React Native Course Demo
• Visit the JustAcademy Website
• React Native Accessibility Documentation
• Web Content Accessibility Guidelines (WCAG) 2.2
• Android Accessibility Guide
• Apple Accessibility Design Guidelines