Accessibility

Visible labels and accessible names

Use label on text fields, switches and checkboxes so the purpose remains visible after entry. Input passes its label to the native text control. Button uses label as its accessible name unless you provide accessibilityLabel. IconButton requires label because a symbol alone cannot explain its action.

Keep the visible wording inside the accessible name: a Save button can be named Save profile name to add context. Describe the action rather than the drawing. Use Add item instead of Plus icon. An accessible name is not automatically a visible tooltip.

Errors need words as well as color

Input, Textarea, Password and InputMask pass the active hint or error to the native field as accessibilityHint. Set required and localize requiredLabel when a value is mandatory. This describes the requirement; validation remains your application’s responsibility.

NeuFormField is a presentation wrapper for projected content. It does not transfer its label, required state or messages to that control automatically. Bind accessibilityLabel and accessibilityHint on the actual native input. Reference the wrapper with #field and bind accessibilityLabelledBy to field.labelId so Android associates the visible label with a filled control, as the FormField example demonstrates. This component is distinct from Angular Signal Forms FormField.

A red border cannot tell the user how to recover. Pass invalid and a helpful error message together. Input renders its error with the native alert role when invalid is true and error is non-empty; otherwise a hint can explain the expected value. Decide when to expose validation, such as after touching the field or attempting to save.

Place the following component inside the root neu-theme of your application.

import { Component, signal } from '@angular/core';
import { Text, View } from '@ng-native/components';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuButtonComponent } from '@neural-ui/native/button';

@Component({
  selector: 'app-profile-name',
  imports: [Text, View, NeuInputComponent, NeuButtonComponent],
  template: `
    <view class="content">
      <text class="heading" accessibilityRole="header">Profile</text>
      <neu-input label="Full name" [(value)]="name"
        [required]="true" requiredLabel="Required"
        hint="Shown to your team" [invalid]="showError()" [touched]="showError()"
        error="Enter your name before saving." />
      <neu-button label="Save" accessibilityLabel="Save profile name" (pressed)="save()" />
      <text class="feedback">{{ feedback() }}</text>
    </view>
  `,
  styles: `
    .content { padding: 24px; gap: 16px; }
    .heading { color: var(--neu-text); font-size: 24px; font-weight: 600; }
    .feedback { color: var(--neu-text); }
  `,
})
export class ProfileNameComponent {
  readonly name = signal('');
  readonly showError = signal(false);
  readonly feedback = signal('');

  save(): void {
    this.showError.set(!this.name().trim());
    this.feedback.set(this.showError() ? '' : 'Profile name ready.');
  }
}

Review the whole screen

Test accessibility in your application

Use meaningful accessible names and check the complete screen with VoiceOver or TalkBack. Include enlarged text, focus order, validation messages and reduced motion in your application tests.