Destructive buttons aim to prevent accidental data loss. They are typically used for actions with irreversible consequences, such as closing an account, deleting files, or removing personnel records from a database.
Destructive buttons usually have the labels "Delete," "Remove," or "Cancel." Poorly designed destructive buttons can lead to significant data loss, frustrate users, and negatively impact user experience and your organization's reputation.
When adding buttons to your website, use the <button> HTML element, which is "an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology." ~ <button>: The Button element
Remember, HTML buttons inherit the default style of the user's operating system, but their appearance can be customized using CSS.
Let's examine best practices and WCAG guidelines to design destructive buttons that are both accessible and minimize the risk of unintended actions.
Common Design Pitfalls & How to Avoid Them
Misleading Labels
Buttons with ambiguous or misleading labels. For example, a button that reads "Proceed" but actually deletes data when activated.
Correct Misleading Labels - Use strong, unambiguous labels like "Delete Account" and "Cancel Subscription."
Like link text, button labels should be descriptive and self-explanatory, clearly indicating their purpose and intended action.
Lack of Confirmation
Buttons that perform actions without requiring user verification or confirmation dialog.
Add Safety Check and Confirmation Dialog - Ask the user to confirm their intention before allowing them to proceed with the destructive action. Inform them of what the consequences will be if they proceed. For example, tell the user, "Closing your account will delete all your data, and you will lose access to all account features. Are you certain you want to proceed?" Provide response buttons that are clear and succinct, such as "Cancel" and "Confirm."
Once the destructive button has been activated and the requested process has been completed, provide a brief, easily understandable confirmation. Include concise, easy-to-find contact information to help users with additional questions, concerns, or regrets.
Poor Visual Cues
Buttons that do not clearly indicate that they are clickable and fail to visually differentiate between the destructive and non-destructive buttons.
Check Color Choice, Target Size, Color Contrast, Focus and Fonts:
- Color Choice - The most common color choice for destructive buttons is red. However, for people with certain forms of colorblindness, red is non-distinguishable.
No matter the color you choose for your destructive button, you should also include a strong, unambiguous label and even a representative icon, if appropriate, directly on the button that clearly and concisely states the button's purpose. For example,
- Target Size - Destructive and non-destructive buttons should have a minimum target size of 24 X 24 CSS pixels or be "positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target.." This requirement is defined in WCAG SC 2.5.8: Target Size (Minimum) (Level AA). "Providing sufficient size, or sufficient spacing between targets, will reduce the likelihood of accidentally activating the wrong control."
- Color Contrast—To ensure your destructive and non-destructive buttons are visible to users with low vision, mobile users, and / or those in bright light conditions, ensure the button color and text color meet the minimum color contrast requirement of 4.5:1 set forth by WCAG SC 1.4.3: Contrast (Minimum) (Level AA).
- According to WCAG SC 2.4.7: Focus Visible (Level AA), users must be able to determine which interactive element has focus. To accomplish this, destructive and non-destructive buttons must have a clearly visible indicator to show when they have focus, and the focus indicator must have sufficient color contrast with both the button color and the background color. You must test to ensure focus is visible as some user agents may not always show a focus indicator or only show focus when the keyboard is used and neglect to show focus on mouseover.
-
Appearance and positioning are significant when providing a control that supports "destructive" actions. (See Harvard University's examples in the article titled "Techniques: Differentiating Controls")
Despite their ominous-sounding title, destructive buttons serve a useful purpose. However, we must be diligent in designing destructive buttons that are not only accessible but also clearly state their purpose and the consequences of activating them.
Resources