Overlapping interactive elements

Interactive elements such as buttons, links, or input fields should not overlap. This ensures users can reliably identify, focus, and activate each control without confusion or ambiguity.

Overlapping interactive elements can:

• Obstruct navigation for screen reader users.
• Cause focus order confusion.
• Lead to incorrect touch target registration, making it difficult or impossible for users to tap the intended control, especially for users with motor disabilities or low vision.
• Violate reflow requirements when the layout breaks at higher zoom levels or on small screens.

Success criteria

The specific criteria for success are:

• Controls must be operable via keyboard without being obstructed by other elements.
• The logical navigation order must be maintained, preventing focus order confusion.
• Focus indicators must remain visible and not be hidden by overlapping elements.
• The meaningful reading or navigation sequence must be preserved, especially for users of assistive technologies.
• Controls must remain accessible and visible on small screens or at higher zoom levels, adhering to reflow requirements.
• The effective target area of interactive elements must be sufficient to prevent incorrect touch target registration.

How to fix

To prevent overlapping interactive elements violations, follow these steps:

• Design with clear spacing
  Ensure adequate visual and interactive spacing between all interactive elements during UI design.

• Remove or reposition overlaps
  Modify the layout so that each interactive component occupies a unique and distinct area on the screen.

• Avoid dynamic overlap
  Prevent interactive elements from being dynamically created or moved in a way that causes them to overlap existing controls.

• Test responsiveness
  Verify that elements maintain their distinct boundaries and do not overlap across various screen sizes, orientations, and zoom levels.

• Implement unambiguous hit targets
  Ensure the interactive area for each element is clearly defined and sufficiently large to preclude ambiguity when a user attempts activation.

• Verify functionality with assistive technologies
  Conduct thorough testing with keyboards and screen readers to confirm proper focus management and activation behavior.

Platform-specific implementation:

• Android
  • Use layout managers (e.g., LinearLayout, ConstraintLayout) effectively to ensure views with clickable="true" or focusable="true" attributes do not share common screen regions.
• iOS
  • Confirm that interactive UIView subclasses (e.g., UIButton, UITextField) do not exhibit intersecting frames. Ensure the resolution of auto-layout constraints does not lead to overlapping frames.
• React Native
  • Employ Flexbox properties (e.g., flexDirection, justifyContent, alignItems, margin, padding) to arrange components in a non-overlapping manner. Avoid using position: 'absolute' without careful consideration of other elements.
• Flutter
  • Use widgets like Row, Column, Padding, SizedBox, and Expanded to define clear spacing and prevent overlaps. If you are using Stack widgets, ensure that interactive widgets placed within the stack do not unintentionally obscure one another.

Example

The following example scan report highlights an overlapping interactive element violation with the UIButton element overlapping another element.

Fix

To correct this violation:

1. Identify the overlapping elements and their respective frames.
2. Fix the layout to ensure that the UIButton does not overlap with other interactive elements.
   • If you are using Auto Layout, adjust the button’s leadingAnchor, trailingAnchor, topAnchor, or bottomAnchor constraints (and potentially widthAnchor/heightAnchor) to resolve the overlap. For example, to shift it left to clear an overlap on its right, decrease the constant of its leadingAnchor. To shift it up from an overlap below, decrease the constant of its topAnchor.
   • If you are setting the frames programmatically, adjust the button.frame.origin.x or button.frame.origin.y properties to shift its position. For example, to move the button 10 points to the right, set button.frame.origin.x = 169. To move it 10 points down, set button.frame.origin.y = 399.

References

• Learn more about Meaningful Sequence WCAG: 2.1 - 1.3.2 (Level A) guideline

• Learn more about Meaningful Sequence WCAG: 2.2 - 1.3.2 (Level A) guideline

• Learn more about Reflow WCAG: 2.1 - 1.4.10 (Level AA) guideline

• Learn more about Reflow WCAG: 2.2 - 1.4.10 (Level AA) guideline

• Learn more about Keyboard WCAG: 2.1 - 2.1.1 (Level A) guideline

• Learn more about Keyboard WCAG: 2.2 - 2.1.1 (Level A) guideline

• Learn more about Focus Order WCAG: 2.1 - 2.4.3 (Level A) guideline

• Learn more about Focus Order WCAG: 2.2 - 2.4.3 (Level A) guideline

• Learn more about Focus Not Obscured (Minimum) WCAG: 2.2 - 2.4.11 (Level AA) guideline

• Learn more about Target Size (Minimum) WCAG: 2.2 - 2.5.8 (Level AA) guideline