Mobile Accessibility Guidelines - Forms

Form layout must

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

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

Using the textAlignment property where appropriate, make sure that labels are visibly close to their associated form fields, avoiding extensive white space. Except for radio buttons and checkboxes, make sure labels are positioned above form fields in portrait mode, and either above or to the left of form fields in landscape mode. Position labels for checkboxes and radio buttons to the right of each field in both portrait and landscape mode.

Android

Using the android:textAlignment or android:gravity classes where appropriate, make sure that labels are visibly close to their associated form fields, avoiding extensive white space. Except for radio buttons and checkboxes, make sure labels are positioned above form fields in portrait mode, and either above or to the left of form fields in landscape mode. Position labels for checkboxes and radio buttons to the right of each field in both portrait and landscape mode.

Android Pass Example

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

Make sure that labels are visibly close to their associated form fields, avoiding extensive white space. Except for radio buttons and checkboxes, make sure labels are positioned above form fields in portrait mode, and either above or to the left of form fields in landscape mode. Position labels for checkboxes and radio buttons to the right of each field in both portrait and landscape mode. Lay forms out using CSS - do not use HTML tabular markup for layout purposes. Use CSS media queries to reposition content based on the device’s screen size.

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).

Outcome

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.