How to Fix Common WCAG Violations: Alt Text, Color Contrast, Form Labels

Start by running a free scan to identify which violations exist on your site. Then use this guide to fix them systematically.

1. Missing or Inadequate Alt Text (WCAG 1.1.1)

The problem: Images without alt attributes, or with non-descriptive alt text like “image” or “photo,” prevent screen reader users from understanding visual content.

How to fix it:

• Informational images: Add alt text that conveys the same information the image communicates visually. For a product photo: alt="Blue running shoe, side view, Nike Air Max 270".
• Functional images (icons used as buttons): Describe the action, not the icon. A magnifying glass search icon gets alt="Search", not alt="magnifying glass".
• Decorative images: Use an empty alt attribute (alt="") so screen readers skip them entirely. Alternatively, apply them as CSS background images.
• Complex images (charts, infographics): Provide a brief alt text summary and a longer description in surrounding text or linked to via aria-describedby.

Common mistakes: Do not start alt text with “Image of” or “Picture of” — screen readers already announce the element as an image. Keep alt text concise (under 125 characters when possible).

2. Insufficient Color Contrast (WCAG 1.4.3, 1.4.11)

The problem: Text that does not have sufficient contrast against its background is difficult or impossible to read for users with low vision or color blindness.

Required ratios:

• Normal text (under 18pt or 14pt bold): 4.5:1 minimum
• Large text (18pt+ or 14pt+ bold): 3:1 minimum
• UI components and graphical objects: 3:1 minimum (WCAG 2.1)

How to fix it:

• Use a contrast checker tool (browser DevTools, WebAIM Contrast Checker) to measure current ratios.
• Adjust either the text color or background color until the ratio meets the threshold. Usually darkening the text or lightening the background is sufficient.
• For text over images, add a semi-transparent overlay behind the text to guarantee contrast regardless of the image content.
• Do not forget placeholder text in form fields, which frequently fails contrast requirements.

3. Missing Form Labels (WCAG 1.3.1, 4.1.2)

The problem: Form inputs without programmatically associated labels leave screen reader users unable to determine what information to enter.

How to fix it:

• Use the <label> element with a for attribute matching the input's id. This is the most reliable method.
• If a visible label is not feasible in the design, use aria-label to provide an accessible name directly on the input.
• For groups of related fields (like a date split across day/month/year), wrap them in a <fieldset> with a <legend>.
• Placeholder text is not a substitute for a label. Placeholders disappear on input and are not reliably announced by all screen readers.

4. Keyboard Navigation Failures (WCAG 2.1.1, 2.1.2, 2.4.7)

The problem: Interactive elements that cannot be reached or operated via keyboard lock out users who cannot use a mouse, including screen reader users, people with motor disabilities, and power users.

How to fix it:

• Use native HTML elements (<button>, <a>, <input>) instead of <div> or <span> for interactive elements. Native elements have built-in keyboard support.
• If custom elements are necessary, add tabindex="0" to make them focusable and implement keyboard event handlers for Enter and Space keys.
• Eliminate keyboard traps — ensure users can always Tab away from any element. Modals and dropdowns are common trap points.
• Add visible focus indicators using CSS outline or box-shadow. Never set outline: none without providing an alternative visible focus style.
• Ensure the tab order follows the visual reading sequence. Avoid using positive tabindex values, which override natural DOM order.

5. Missing or Incorrect Heading Structure (WCAG 1.3.1, 2.4.6)

The problem: Pages without a logical heading hierarchy make it difficult for screen reader users to navigate and understand page structure. Screen reader users frequently navigate by headings.

How to fix it:

• Use exactly one <h1> per page for the main topic or page title.
• Nest headings logically: h2 for major sections, h3 for subsections within an h2, and so on. Do not skip levels (e.g., jumping from h2 to h4).
• Do not use heading elements for styling purposes. If you need large bold text that is not a section heading, use CSS classes instead.
• Every major content section should have a heading that describes its content.

6. Missing Page Language (WCAG 3.1.1)

The problem: Pages without a lang attribute on the <html> element prevent screen readers from using the correct pronunciation rules.

How to fix it: Add lang="en" (or the appropriate language code) to your <html> element. For content in a different language within the page, add lang attributes to the containing element.

7. Missing Skip Navigation Link (WCAG 2.4.1)

The problem: Without a skip link, keyboard users must Tab through the entire navigation menu on every page before reaching the main content.

How to fix it: Add a visually hidden link as the first focusable element on the page that jumps to the main content area. The link should become visible on focus so keyboard users can see it.

Testing Your Fixes

After implementing fixes, verify them:

1. Re-scan with ADA Scanner to confirm automated violations are resolved.
2. Tab through the page with keyboard only to verify all interactions work.
3. Test with a screen reader (NVDA on Windows, VoiceOver on Mac) to verify content is announced correctly.
4. Check contrast ratios in browser DevTools.