HTML best practicesWhat it checks and how to fix it

What it checks

Looks for buttons and links (with an href) that have no accessible name, more than 5 inline event handlers (onclick, onmouseover, onchange and the like), and a missing charset declaration. Any of these is a warning; a page with none passes.

Why it matters

An icon-only button or link with no text or label is announced as just "button" or "link", so screen reader users cannot tell what it does. Inline event handlers mix behaviour into markup and force a weaker Content Security Policy (they need 'unsafe-inline'). Without a declared charset, browsers may guess the encoding and garble accented characters.

How to fix it

Name icon-only controls, declare the charset first thing in <head>, and move inline handlers to scripts.

<head>
  <meta charset="utf-8">
</head>

<!-- Icon-only button and link with an accessible name -->
<button type="button" aria-label="Close menu">
  <svg aria-hidden="true">...</svg>
</button>
<a href="https://github.com/acme" aria-label="Acme on GitHub">
  <svg aria-hidden="true">...</svg>
</a>

Replace inline handlers with addEventListener:

<!-- Before -->
<button onclick="subscribe()">Subscribe</button>

<!-- After -->
<button id="subscribe">Subscribe</button>
<script>
  document.getElementById("subscribe").addEventListener("click", subscribe);
</script>