Kiểm tra HTML theo các quy tắc WCAG 2.2, sao chép mẫu component ARIA dễ tiếp cận và rà soát checklist mức A/AA — tất cả chạy ngay trong trình duyệt.

Kiểm tra HTML

Mẫu ARIA

Checklist WCAG

HTML cần kiểm tra

<!DOCTYPE html>
<html lang="vn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; padding: 16px; }
    .card { border: 1px solid #ddd; border-radius: 8px; padding: 12px; margin: 12px 0; }
  </style>
</head>
<body>
  <nav>
    <a href="/"><img src="logo.png"></a>
    <a href="/products">Products</a>
    <a href="/blog">Blog</a>
  </nav>
  <div class="hero" style="color:#999999;background-color:#ffffff">
    <h1>Summer sale</h1>
    <p>Up to 50% off everything. <a href="/sale">Click here</a></p>
  </div>
  <h3>Newsletter</h3>
  <form>
    <input type="email" placeholder="Your email">
    <input type="text" name="phone" id="phone">
    <label for="country-select">Country</label>
    <select id="country"><option>Vietnam</option><option>Other</option></select>
    <input type="radio" name="plan" value="free"> Free
    <input type="radio" name="plan" value="pro"> Pro
    <div role="checkbox" tabindex="0">Accept the terms</div>
    <button><svg width="16" height="16" viewBox="0 0 16 16"><path d="M2 8h12"/></svg></button>
    <button type="submit" tabindex="3" style="outline:none">Subscribe</button>
  </form>
  <table class="card">
    <tr><td>Plan</td><td>Price</td></tr>
    <tr><td>Pro</td><td>$9</td></tr>
  </table>
  <div aria-hidden="true"><a href="/promo">Hidden promo</a></div>
  <span id="price-note">Prices include VAT.</span>
  <span id="price-note">Shipping is extra.</span>
  <p aria-describedby="price-note-2" aria-labeledby="price-note">Totals update live.</p>
  <iframe src="https://www.openstreetmap.org/export/embed.html"></iframe>
  <video src="promo.mp4" autoplay></video>
  <nav><a href="/privacy">Privacy</a></nav>
  <div role="buton" aria-pressed="yes">Share</div>
</body>
</html>

Kiểm tra ngay trong trình duyệt bằng DOMParser — không tải lên máy chủ và không chạy script nào trong HTML đã dán.

Xem trước & tô sáng

Cuộn tới phần tử

Bấm “Xem trong bản xem trước” ở một lỗi để khoanh vùng phần tử đó tại đây.

Dán HTML để xem bản xem trước.

Bản xem trước chạy trong sandbox: script, biểu mẫu và cửa sổ bật lên đều bị tắt, nên nội dung do JavaScript tạo sẽ không hiện. Khi bật “Cuộn tới phần tử”, khung luôn giữ ở vị trí phần tử được khoanh vùng.

Những gì được kiểm tra (41 quy tắc)