Form layout

Must

Labels must be placed close to the relevant form control, and laid out appropriately.

Description

Labelling form controls helps users to understand what is required. Keep labels close to the associated form control to prevent users becoming disoriented, particularly users who magnify or zoom in on content.

Labels should precede associated controls, visually above or to the left of the input field. Labels for radio buttons and checkboxes visually work better to the right of the field, however, assistive technology such as screen readers must always speak the associated label before the input control. Labels for select lists may be included as the first item of the list itself.

IOS

Provide visible labels that are visually close to the associated form field, for example, using the frame location and the textAlignment property. Ensure there is limited white space between labels and fields. Keep labels above form fields in portrait layouts. Labels may be positioned to the side of form fields in landscape layouts.

ANDROID

Provide visible labels that are visually close to the associated form field, for example, using AutoLayout, the android:gravity or android:textAlignment attribute. Ensure there is limited white space between labels and fields. Keep labels above form fields in portrait layouts. Labels may be positioned to the side of form fields in landscape layouts.

HTML

Provide visible labels that are visually close to the associated form control. Use CSS media queries to remove empty space and position content into mobile friendly layouts. Also ensure that buttons in forms are not distanced from form elements.

TESTING

Procedures
  1. Activate the app with zoom enabled to two times magnification.
  2. Gain focus on each individual form field.
  3. Verify that the control is visually labelled.
  4. Verify the label is in close proximity to the control.
  5. Verify that the label placement is most effective for the layout (portrait or landscape).
  6. Verify that the label of the field is announced properly by a screen reader and matches the label’s on-screen text.
  7. Verify that the label when taken out of context clearly and uniquely describes the purpose of the control and the action the user must take.
  8. Verify that any field constraints of the field are indicated in the accessible name announced by a screen reader.
Results

The following checks are all true:

  • On-screen controls are visually labelled with meaningful names which when taken out of context describe the control’s purpose;
  • The label must be in close proximity to the field;
  • The label must be placed in an effective location for the layout of the screen:
    - Above the field for portrait,
    - To the left of the field of landscape;
  • The label of the field is rendered properly via a screen reader and matches the label’s on-screen text;
  • Field constraints of the field are announced properly via a screen reader.