Skip to content

Clickable Element

Rule

Never bind the click event on a non-focusable element, like a div :

  • Keyboard accessibility - Users who navigate with keyboards can't access these elements because non-focusable elements can't receive keyboard focus. This excludes many users who rely on keyboard navigation, including those with motor disabilities.
  • Screen reader compatibility - Screen readers may not properly announce non-focusable elements as interactive, making them invisible to blind or visually impaired users.
  • No built-in states - Unlike proper interactive elements, div lack built-in states like :hover, :focus, :active, and :disabled which provide important visual feedback.
  • Missing semantic meaning - Using a div doesn't convey the element's purpose to assistive technologies or search engines.

Example

🚨 DON’T

<div (click)="doSomething()">Click me</div>

✅ DO

<button type="button" (click)="doSomething()">Click me</button>