Design controls for easy operation

With custom controls, developers have an additional responsibility to ensure that the control can be operated effectively by people with disabilities, beyond ensuring keyboard operation and visible focus indication. This is particularly important for supporting effective touchscreen interaction, for example via a smartphone.

  • Make sure that the control is big enough to operate. The size should be large enough that people with reduced dexterity or vision can activate it without undue effort, with using a mouse, through touch or other input method. The BBC Mobile Accessibility guidelines recommend that actionable controls are at least 9.6mm wide, or 44 by 44 pixels on a standard smartphone screen, so that they are large enough for users to activate.
  • Make sure that controls are sufficiently spaced apart. For all controls, including custom controls, follow best practice in usable interface design to ensure that adjacent controls are spaced apart sufficiently to minimize the chance of the wrong control being inadvertently activated.
  • Make sure that controls are positioned to minimize impact of error. Be careful when placing pairs of controls where inadvertently selecting one instead of the other could have significant consequences (such as adjacent Save and Delete buttons).
  • Make sure that controls have sufficient color contrast. Active user interface components (e.g., buttons) and meaningful graphics must be distinguishable by people with moderately low vision. For this to occur, the visual presentation of user interface components and graphical objects need to have a contrast ratio of at least 3:1 against adjacent colors.
  • Make sure that content can be operated using simple inputs on a wide range of pointing devices. Any functionality that operates by using multipoint or path-based gestures, can be operated with a single pointer (e.g., finger, stylus, eye-gaze, head pointer), unless a multipoint or path-based gesture is essential. Single pointer functionality is especially important for people with mobility impairments.
  • Design interfaces to minimize accidental or erroneous input by users. It is critical for people with motor impairments and/or cognitive disabilities to be able to cancel a pointer function in order to prevent unintended results. For this guideline to operate successfully, developers need to ensure that completion of the action occurs when a user releases a pressed mouse button, lifts a finger or pointer, or releases a key (i.e., up event, not the down event) and the user can abort the action or undo it after completion. The down event can be used, if essential (e.g., piano-playing simulation).
  • Make sure that functions that are triggered by moving a device can also be operated by conventional user interface components. For people with limited mobility, for those whose device must remain in a fixed position, and for others with a variety of needs, it's critical that another method beyond device motion (e.g., tilting, shaking) exists to complete a task.

Testing

For each custom actionable control:

  • View the control on an Android or iOS smartphone. Measure the size of the control. Is it at least 9.6mm across?
  • Is there sufficient spacing between the control and any neighboring active controls?
  • Do neighboring controls have sufficient error handling capability so that inadvertently selecting one does not have irreversible consequences?
  • Does the control (e.g., button) have at least a 3:1 contrast against adjacent colors? [Hint: Test with color contrast analyser. See 'Graphical Objects and User Interface Components section.]
  • Can the control be activated with a single input?
  • Can the control be activated on the up event?
  • Can functions that are triggered by moving a device also be operated by conventional user interface components?

Resources

Related Techniques

✎ Technique: Non-text contrast

The contrast of icons and graphical objects is just as important as that of text. Use sufficient contrast for all elements on the screen, with a minimum contrast ratio of 3:1.

✎ Technique: Pointer gestures

All operations must use simple gestures that need only a single touch. If the site or application does use multi-touch gestures, be sure to also provide simple interfaces. 

✎ Technique: Motion actuation

Ensure that functions that are triggered by moving a device or by gesturing towards the device can also be operated by more conventional user interface components.

✎ Technique: Hit areas

Interactive elements should not be difficult to select or activate when using a mouse or a touchscreen.

Generous sizing and spacing is important, and their implied visual “hit area” should correspond to the control’s active area.