✎ Technique: Differentiating controls

Source: https://accessibility.huit.harvard.edu/technique-providing-controls Parent: https://accessibility.huit.harvard.edu/techniques

Placement of controls affects their ease of use. For example, for a search feature, the “submit” button should be positioned right after the input field. Appearance and positioning are particularly important when providing a control that supports “destructive” actions, such as a “delete” or “clear” button. In these cases, ensure that these controls are clearly differentiated .

Examples

This example shows two closely spaced buttons, one to submit the form and one to reset the form fields to blank. The buttons are similarly sized and they’re positioned close together. So users could inadvertently select the “Reset Form” button, and they’d have to re-enter their information.

When juxtaposing two controls with potentially negative consequences, use two distinct controls. In this example the reset button is red, diminished in size and well spaced:

See also:

• Techniques
• Controls
• Screen reader
• Screen magnification
• Custom widgets and controls ✎
• Design controls for easy operation ✎
• Robust
• Understandable
• Blind
• Low vision
• Cognitive
• HTML