BEFORE & AFTER GALLERY · 8 PATTERNS

Before &
After

Eight common accessibility failures shown side by side with their fixes. Drag the divider to compare. Each pattern includes the WCAG criterion violated, the automated failure count, and the exact code change required.

Form Labels

3.3.2 Labels or Instructions · Level A
3 AUTOMATED FAILURES· before
NO AUTOMATED FAILURES· after

Placeholders disappear on input and are never exposed to screen readers as labels. Every input needs a persistent, programmatically associated label.

Inaccessible← DRAG TO COMPARE →Accessible
INACCESSIBLE50% · 50%ACCESSIBLE

CONTACT FORM

Screen reader announces: "edit text" — no label.

CONTACT FORM

Screen reader announces: "First name, edit text".
CODE CHANGE
✕ BEFORE
<!-- No label — placeholder only --><input  type="text"-  placeholder="First name"/>
✓ AFTER
<!-- Visible, persistent label -->+<label for="first-name">First name</label><input  type="text"  id="first-name"+  name="first-name"  autocomplete="given-name"/>