WCAG Compliance SEO Rule

Check web accessibility compliance including alt text, form labels, heading hierarchy, language declaration, and link text quality

What This Rule Checks

Checks images for missing alt attributes, form elements without labels (label/aria-label/aria-labelledby), heading hierarchy violations, missing HTML lang attribute, links with poor text, missing skip navigation, and focus indicator concerns.

Why It Matters for SEO & GEO

Accessibility is both a legal requirement (ADA, EAA) and an SEO benefit. Accessible sites reach wider audiences, have better semantic structure, and receive favorable treatment from search engines.

How to Fix

Add alt text to all images. Associate form elements with labels. Use proper heading hierarchy. Add lang attribute to HTML. Use descriptive link text. Add a skip navigation link.

Examples

Bad

<html><img src="photo.jpg"><a href="/page">Click here</a></html>

Good

<html lang="en"><img src="photo.jpg" alt="Team photo"><a href="/page">View our team page</a></html>

How VibeLinter Checks WCAG Compliance

VibeLinter’s accessibility/wcag-compliance rule performs these checks:

Images without alt — Errors when any <img> tag is missing the alt attribute entirely
Unlabeled form elements — Errors for text inputs, email, password, tel, textareas, and selects that lack associated <label>, aria-label, or aria-labelledby
Heading hierarchy — Warns about skipped heading levels (e.g., H2 followed by H4)
Language declaration — Errors when the <html> element is missing the lang attribute
Link text quality — Warns about links with empty text or generic text like “click here”, “read more”, or “more”
Skip navigation — Suggests adding a “skip to content” link for keyboard navigation
Focus indicators — Reminds to verify that focus outlines are visible when stylesheets are present

Configuration

// vibelinter.config.cjs
module.exports = {
  rules: {
    'accessibility/wcag-compliance': {
      enabled: true,
      severity: 'warning'
    }
  }
}

SEO Impact

WCAG compliance affects:

Search engine understanding — Semantic HTML and ARIA attributes help crawlers parse content structure
User reach — Accessible sites serve 15-20% more users who rely on assistive technologies
Legal compliance — ADA and European Accessibility Act require website accessibility
GEO (Generative Engine Optimization) — AI models rely on semantic HTML structure (labels, ARIA, headings) to accurately interpret page content; well-structured accessible pages are better understood and more accurately cited by AI systems