Accessibility

Detects accessibility anti-patterns: missing alt text, non-semantic handlers, unlabeled inputs.

Rule ID:accessibility

Examples#

BadMissing alt text, div onClick, unlabeled inputs

// Image without alt
<img src="/hero.jpg" />

// div with onClick — not keyboard accessible
<div onClick={handleClick}>Click me</div>

// Input without label
<input type="email" placeholder="Email" />

// Non-descriptive link text
<a href="/docs">Click here</a>
<a href="/pricing">Read more</a>

GoodSemantic HTML, proper labels, keyboard accessible

// Descriptive alt text
<img src="/hero.jpg" alt="Dashboard showing project health score" />

// Button element — keyboard accessible by default
<button onClick={handleClick}>Click me</button>

// Labeled input
<label htmlFor="email">Email address</label>
<input id="email" type="email" placeholder="you@example.com" />

// Descriptive link text
<a href="/docs">View documentation</a>
<a href="/pricing">See pricing plans</a>

What It Detects#

mediumImage without alt attribute

Image missing alt attribute

Fix: Add descriptive alt text. For decorative images, use alt="" with role="presentation".

mediumNon-interactive element with onClick (div, span)

Non-semantic <{tag}> with onClick handler

Fix: Use <button> or <a> instead. If you must, add role="button" tabIndex={0} onKeyDown.

mediumForm input without associated label

<{tag}> without associated label

Fix: Add a label using htmlFor, aria-label, or wrapping <label>.

lowNon-descriptive link text ("click here", "read more")

Non-descriptive link text: "{text}"

Fix: Use descriptive text that makes sense out of context.

Configuration#

This rule is enabled by default. To disable it:

.vibertestrc.jsonjson

{
  "rules": {
    "accessibility": {
      "enabled": false
    }
  }
}

#020 Missing Compliance #022 Missing Project Standards