A handful of issues account for most accessibility failures. Work through them here: read what breaks, compare the before/after, and tick each fix to watch the violation count fall to zero.
The same rules power automated scanners like axe — and this very site gates every pull request on them. Learn more in the recipes.
Screen readers announce nothing for an image with no alt attribute — the content is simply lost.
Before
<img src="/chart.png" />After
<img src="/chart.png" alt="Revenue grew 24% in Q2" />An input with only a placeholder has no accessible name, so assistive tech cannot tell users what to type.
Before
<input type="email" placeholder="Email" />After
<label for="email">Email</label>
<input id="email" type="email" />A button containing only an icon (or an SVG) has no text, so it is announced as just "button".
Before
<button><svg ...></svg></button>After
<button aria-label="Close dialog"><svg aria-hidden="true" ...></svg></button>Light-grey text on white falls below the 4.5:1 ratio, making it unreadable for low-vision users.
Before
color: #b5b5b5; /* 1.9:1 on white */After
color: #595959; /* 7:1 on white */Removing the outline with no replacement leaves keyboard users unable to see where focus is.
Before
:focus { outline: none; }After
:focus-visible { outline: 2px solid #0070f3; outline-offset: 2px; }Jumping from <h1> straight to <h4> breaks the document outline that screen-reader users navigate by.
Before
<h1>Title</h1>
<h4>Section</h4>After
<h1>Title</h1>
<h2>Section</h2>