not found
Start building more accessible experiences
Compliance Data & Impact
Disabilities Affected
- Blind
- Deafblind
Requirement(s)
- User Agent Issue
WCAG Success Criteria
- 3.3.2 Labels or Instructions
Section 508 Guidelines
- 1194.21 (l) Form fields, directions, and cues
How to Fix the Problem
For each accessibility frame, manually check it and its subviews for an intersection between the frames, then change the size and position coordinate values to prevent the overlap.
Bad Example: Overlapping targets
In the visual representation below, two rectangle-shaped targets are shown, with one partially overlapping the other, making the targets difficult to touch with precision.
Broken Version Example:
In the following example, the green is the accessibility inspector, showing the area that would be highlighted with VoiceOver. If a user tries to select the button, with how the button is aligned, it might be difficult for them to select it (depending on how they use VoiceOver's controls):
In the following screen shot, we can see that one of the constraints for the button in this example has a negative value:
Fixed Version Example:
In the following fixed example, you can see that the label's view frame is distinct from the button, which is preferred:
Again, the following screen shot of the associated Constraints for the button in the fixed version example above. Notice how the 'vertical space' contstraint is a non-negative value:
Why it Matters
Overlapping targets can create irregularly-shaped target areas, making them more difficult for people to use. Users may touch the wrong target and activate the wrong feature.
When accessibility frames overlap, VoiceOver will have trouble focusing on the element. Only views that are accessibility elements and do not intersect with other accessibility elements are immune to this problem.
Due to the small size of mobile devices, interacting with active elements by using a screen reader to focus on elements can be difficult when ui-views have overlapping or intersecting accessibility frames.
Since the touch target area may extend beyond the visible bounds of an element, it is important to prevent users from unintentionally activating the wrong element. The touch zones must not overlap. There should be a buffer of at least six pixels of inactive space between adjacent actionable elements.
Rule Description
The Algorithm (in simple terms)
Detects which UIViews have overlapping accessibility frames. If accessibility frames overlap, VoiceOver will have trouble focusing on the element. Only views that are accessibility elements and do not intersect with other accessibility elements will pass. Non-accessibility elements will be inapplicable.
Resources
Deque University Course Pages (subscription required)
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: