Accessibility

prefer-semantic-html

Prefer semantic HTML over <div onClick> and redundant ARIA roles.

Detects two adjacent anti-patterns: <div> / <span> with click handlers (should be a <button>) and elements with redundant ARIA roles (a <nav> with role="navigation"). Both are AI-coding-agent staples — the model knows the syntax of every HTML element but defaults to div + click handler when in doubt.

Behavior

• Fixable: No.
• Suggestions: Yes.
• Maps to: WCAG 4.1.2 (Name, Role, Value).

Options

["warn", {
  "checkClickHandlers": true,
  "checkRoles": true
}]

Examples

Bad:

<div onClick={handleClick}>Submit</div>
<div role="navigation">...</div>

Good:

<button onClick={handleClick}>Submit</button>
<nav>...</nav>

Related rules

• aria-validationForbid invalid ARIA roles and unknown aria-* attributes.
• link-textForbid empty anchors and generic "click here" link text.
• heading-hierarchyEnforce sequential heading levels and at most one <h1> per file.

Use it

Enable prefer-semantic-html in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/prefer-semantic-html': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules