Colliding Controls
This rule has been deprecated in favor of the WCAG 2.2 Touch Target Spacing rule and has been removed in v2.12.0. Touch Target Spacing covers colliding controls while considering the target size and spacing for usability.
Interactive views should not have intersecting bounds.
Impact
Issues found by Colliding Controls impact people using touch screens and people utilizing dynamic typography. Dynamic Type settings may automatically adjust the sizes of controls that contain text. A larger font may make controls larger, potentially causing overlap. Activating a control while it's overlapped with another may result in activating the wrong control.
Confirmation
- Look at the bounds of each control
- You will find one of the following:
- Inaccessible: A control's bounds intersect with another control.
- Accessible: None of the controls have overlapping bounds.
- If there are controls with text (such as buttons or links), try larger Dynamic Type sizes and repeat this process to ensure that the controls do not intersect with other controls when becoming larger.
How to Fix
UIKit
Improper constraints will result in an issue found by this rule. While every situation will be different, ensure that constraints provide adequate space between controls. If a constraint does not exist between two adjacent controls, you may need to add one to ensure they do not overlap when Dynamic Type updates to a larger setting.
SwiftUI
Overlapping controls cause an issue found by this rule. While every situation will be different, ensure that each control has proper view modifiers to limit overlapping of the bounds. It's recommended to use HStack and VStack views as parents. ZStack is another option but shouldn't be used for controls that contain text elements.