ARIA: When to Use It and the 'First Rule of ARIA'

ARIA (Accessible Rich Internet Applications) is a set of attributes that supplement HTML to convey roles, states, and properties to assistive technologies.

However, the First Rule of ARIA states:

'If you can use a native HTML element or attribute with the semantics and behavior you already require, then do so instead of re-purposing an element and adding an ARIA role, state or property to make it accessible.'

For example:

• Wrong: <div onClick={submit} role="button" tabIndex={0}>Submit</div> (requires manual keypress handlers, focus styling, and state management).
• Right: <button type="submit">Submit</button> (native keyboard support, enter/space triggers, disabled state, and native accessibility tree representation out of the box).