Common Violations
Our platform executes millions of audits. Here are the most prevalent violations developers encounter and the proper methods for resolving them under WCAG 2.2.
Low Color Contrast
WCAG 1.4.3 Contrast (Minimum)
The Issue: Text and interactive elements do not have enough contrast against their background. This severely impacts users with low vision or color blindness.
The Fix: Ensure a contrast ratio of at least 4.5:1 for normal text and 3.0:1 for large text (18pt+ or 14pt+ bold).
Missing Alternative Text
WCAG 1.1.1 Non-text Content
The Issue: Images (`<img>`) lack an `alt` attribute. Screen reader users will have no way of understanding the context or purpose of the visual.
The Fix: Always add an `alt` attribute. If the image is purely decorative, use an empty string `alt=""` so assistive tech ignores it rather than announcing the filename.
Inaccessible Buttons & Links
WCAG 4.1.2 Name, Role, Value
The Issue: Using a `<div>` with an `onClick` handler instead of native interactive elements. This prevents keyboard navigation and hides the interaction state from screen readers.
The Fix: Use native `<button>` and `<a>` tags. If you absolutely must use a generic element, add `role="button"` and ensure it has a `tabindex="0"` alongside keyboard event listeners.
Missing Form Labels
WCAG 3.3.2 Labels or Instructions
The Issue: Input fields rely solely on visual placeholders. When a user begins typing, the placeholder disappears, leaving cognitive and vision-impaired users without context.
The Fix: Use an explicit `<label for="id">` paired directly with the input element. If the design does not allow for a visible label, use `aria-label` or `aria-labelledby`.