Buttons (<button>)

Links (<a>)

Inputs (<input>, <textarea>, etc.)

Select dropdowns (<select>)

Clickable elements with tabindex or role="button"

Screen readers might skip announcing nested elements, leading to an empty tab stop. This can pose challenges for users with motor impairments, which can impact the user's experience.

Assistive technologies, like screen readers, often have difficulty interpreting nested controls. They may not convey the correct hierarchy or purpose of the elements, confusing users with disabilities.

Nested controls can create unpredictable focus behavior when users navigate using keyboards or screen readers, making it hard to access or activate specific elements.

When interactive controls are nested, user interactions (like clicks or taps) might trigger both the parent and child controls unintentionally.

Nesting of certain interactive elements, like buttons inside other buttons, violates semantic HTML rules. Therefore, browsers may not handle nesting consistently, leading to rendering or functionality issues.

Use Wrapper Elements: Instead of nesting, wrap interactive controls in non-interactive container elements (e.g., <div> or <span>) to group them visually.

Separate Functions: Ensure each control is self-contained and handles only its specific function.

Use ARIA Roles: If complex interactions are necessary, use ARIA attributes to explicitly define relationships between elements without nesting.