A11y Linter

A11y Linter is a lightweight in-browser tool that audits pasted HTML forms for common accessibility issues based on WCAG 2.1 AA. Paste your form, click "Lint Form", and get instant feedback to improve your code’s accessibility.

---

Features

• Detects common A11y issues (missing labels, placeholders, input IDs, etc.)
• Export linting results as JSON
• Clean, responsive UI (no frameworks)
• Works 100% client-side,no setup needed

---

Usage

1. Open index.html in your browser.
2. Paste an HTML <form> into the textarea.
3. Click "Lint Form" to analyze it.
4. Click "Export as JSON" to download the results.

---

Good Example (Accessible)

<form>
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required aria-required="true" />

  <label for="message">Your message</label>
  <textarea id="message" name="message" required aria-required="true"></textarea>

  <button type="submit">Send</button>
</form>

✔️ Labels are associated with inputs
✔️ Semantic elements (<button>)
✔️ Inputs use name, required, aria-required

---

Bad Example (Inaccessible)

<form>
  <input type="email" placeholder="Email">
  <input type="text" placeholder="Your message">
  <input type="submit" value="Go">
</form>

⚠️ No <label> tags
⚠️ Relies only on placeholder text
⚠️ No name or aria attributes
⚠️ Inaccessible for screen readers and assistive tech

---

File Structure

.
├── index.html      # Main UI
├── script.js       # Linting logic
└── style.css       # Stylesheet

---

Author

Built with 💜 by Idil Saglam