We detected nested interactive elements nested within other interactive elements

We detected nested interactive elements nested within other interactive elements — rule summary

Field	Value
Rule code	Element_Interactive_Nested
WCAG conformance level	A
WCAG success criterion	4.1.2 Name, Role, Value
Must be fixed at source	Yes

Description

Interactive elements such as links, buttons, checkboxes, images, scrollbars, and sliders should not have interactive children. Assistive technologies, such as screen readers, may ignore or behave unpredictably when encountering such nesting.

How to fix

Ensure that interactive elements do not contain other interactive elements. For example, avoid nesting a button inside an a tag or placing an input inside a button element.

Example:

<!-- Bad Example -->
<a href="#"><button>Click me</button></a>

<!-- Good Example -->
<a href="#">Click me</a>