Building Accessible Input Labels

In this lesson, you will learn how to use the accessibilityLabel prop to ensure that screen readers can effectively communicate the purpose of your text inputs to visually impaired users.

Why Accessibility Matters

When a user with a screen reader navigates your app, they don't "see" the text floating above a TextInput. If you simply place a Text component next to an input, the screen reader may skip the label entirely or treat the input as an unlabeled box, leaving the user guessing what information is expected.

In React Native, we bridge this gap by providing a descriptive label directly to the component.

Using accessibilityLabel

The accessibilityLabel prop acts as an invisible, semantic tag that screen readers read aloud when the input gains focus. Instead of just relying on layout, you describe the field’s purpose.

Consider this example of a basic email input:

import { TextInput } from 'react-native';

const EmailInput = () => {
  return (
    <TextInput
      placeholder="e.g. john@example.com"
      accessibilityLabel="Email address"
      accessibilityHint="Enter your primary email address for account recovery"
      keyboardType="email-address"
    />
  );
};

Best Practices for Labels

1. Be Concise: The accessibilityLabel should be short and direct (e.g., "Username," "Password," "Phone Number").
2. Use Hints for Context: If the input requires specific instructions—like formatting or security requirements—use accessibilityHint. This gives the user extra context without cluttering the primary label.
3. Avoid Redundancy: You don't need to include the word "input" or "field" in the label; the system automatically identifies the component type for the user.

By explicitly defining these properties, you ensure that every user can successfully navigate your forms, regardless of how they interact with their device. This simple habit transforms your application from a visual interface into an inclusive experience.

Key Takeaway: Use the accessibilityLabel prop to provide a clear, screen-reader-friendly description for every TextInput, ensuring all users understand the purpose of your form fields.