Skip to main content

Forms

Guideline: Forms

Selected1

StateI seeI hear
NormalThe LabelThe label and the input type

Focused

StateI seeI hear
FocusedThe LabelThe label and the input type
FilledThe LabelThe label, the value entered and the input type

Disabled/Read only

StateI seeI hear
Disabled/Read onlyThe LabelThe label, the value, input type and "disabled"

Validation

ValidationI can
SuccesfullMove to the next field using the "Next" keyboard button.
SuccesfulSubmit the form using the "Done" keyboard button.
InvalidMove to the next field using the "Next" keyboard button. I MUST not be trapped on the field
InvalidSubmit the form using the "Done" keyboard button.
note

Currently, React Native API does not provide a method to mark an input text as being in an error state. https://github.com/facebook/react-native/issues/30848

Testing

Procedures

  1. Turn on a Screen Reader.
  2. Focus the form field.
  3. Evaluate whether the label adequately and uniquely describes the component.

Error messages

  1. Turn on a Screen Reader.
  2. Focus the form field.
  3. Trigger a validation error
  4. Confirm that:
    • The error message is visible
    • The error message is announced by the Screen Reader

Outcome

Ensure all the following checks are true:

  • Ensure visual labels are available for all form fields.
  • Confirm that a screen reader announces all form field labels accurately.
  • Check that the label, even when isolated from context, distinctly and clearly conveys the control's purpose and the required user action.
  • Ensure that field constraints are appropriately announced by a screen reader.
  • Verify that required fields are distinctly indicated through a screen reader.

Error messages

  • The occurrence of an error is signaled:
    • The error is visibly displayed.
    • The error is announced by a screen reader.
  • Error messages offer clear insights and guidance on how to rectify it.

  1. The "selected state" indicates that a Screen Reader user has focused on the field but has not initiated any action yet.