We detected an element functioning as a button missing a button role

We detected an element functioning as a button missing a button role — rule summary

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

Description

When custom elements are used to create button-like functionality, they must be assigned the appropriate ARIA role to ensure that assistive technologies understand their purpose. Without the proper role, users of screen readers and other assistive technologies may be unable to identify or interact with these controls correctly.

How to fix

When creating custom button elements, always add role="button" and appropriate ARIA attributes to ensure accessibility:

<div class="custom-button" 
     role="button"
     tabindex="0"
> Whenever possible, use the native <button> element instead of creating custom buttons, as it provides built-in accessibility and behavior.