Common Failures — WCAG Failure Patterns to Avoid

In this tutorial, you will learn about Common Failures. We cover key concepts, practical examples, and best practices to help you master this topic.

WCAG failures are documented patterns that violate success criteria, including F16 (missing alt text), F42 (using events without keyboard), F69 (no label association), and F73 (creating layout tables with incorrect markup).

What You'll Learn

You will learn the most common WCAG failure patterns, how to detect them, and how to fix them in your code.

Why It Matters

Failures are the most direct path to non-Compliance. Understanding common failures helps you avoid them during development rather than discovering them during audits.

Real-World Use

DodaTech's code review checklist includes the top 10 WCAG failures. Developers check for these patterns before submitting code for review.

flowchart TD
  A[WCAG Failures] --> B[Structure failures]
  A --> C[Interaction failures]
  A --> D[Content failures]
  A --> E[Design failures]
  B --> F[F16: no alt text]
  B --> G[F46: incorrect fieldset]
  C --> H[F42: click without keyboard]
  C --> I[F54: mouse-only event]
  D --> J[F24: auto-advancing carousel]
  D --> K[F30: using text-only captions]
  E --> L[F73: table for layout]
  E --> M[F14: color-only indicators]

Common Failure Patterns

F16: Failure of 1.1.1 Due to Missing Alt Text on Images

Every img element must have an alt attribute. Missing alt causes screen readers to read the file name.

<!-- FAILURE: F16 -->
<img src="chart.png">

<!-- FIX: add descriptive alt -->
<img src="chart.png" alt="Bar chart showing 40 percent growth in Q2">

F42: Failure of 2.1.1 Due to Using Click Events Without Keyboard

Using onclick on a div without keyboard support excludes keyboard users.

<!-- FAILURE: F42 -->
<div onclick="activate()">Activate</div>

<!-- FIX: use a button element -->
<button onclick="activate()">Activate</button>

F69: Failure of 3.3.2 Due to Not Associating Labels with Form Controls

Inputs without associated labels are invisible to screen readers.

<!-- FAILURE: F69 -->
<input type="text" placeholder="Enter your name">

<!-- FIX: associate a label -->
<label for="name">Name</label>
<input type="text" id="name" name="name">

F73: Failure of 1.3.1 Due to Creating Layout Tables with Incorrect Markup

Using table elements for layout rather than CSS creates confusion for screen readers.

<!-- FAILURE: F73 -->
<table>
  <tr>
    <td>Left column</td>
    <td>Right column</td>
  </tr>
</table>

<!-- FIX: use CSS grid or flexbox -->
<div style="display: grid; grid-template-columns: 1fr 1fr;">
  <div>Left column</div>
  <div>Right column</div>
</div>

F14: Failure of 1.4.3 Due to Using Color Alone to Convey Information

Status indicators that use only color are invisible to color blind users.

/* FAILURE: F14 */
.status-error {
  color: red; /* only red, no icon or text */
}

/* FIX: add an icon or text indicator */
.status-error::before {
  content: "[Error] ";
  color: #d32f2f;
}

F24: Failure of 2.2.2 Due to Auto-Advancing Content Without Pause

Auto-rotating carousels and articles that advance without user control violate 2.2.2.

// FAILURE: F24 — carousel auto-advances with no pause
setInterval(() => nextSlide(), 3000);

// FIX: allow user to pause
let interval = setInterval(() => nextSlide(), 3000);
document.getElementById('pause-button').addEventListener('click', () => {
  clearInterval(interval);
});

How to Detect Failures

Automated tools detect many failures. Manual testing catches the rest. Use axe-core or WAVE for automated detection. Review each failure pattern manually.

// Detect common failures in HTML
function detectFailures(html) {
  const failures = [];

  if (/<img(?!.*alt=)/.test(html)) {
    failures.push('F16: Image missing alt attribute');
  }

  if (/<div[^>]*onclick/.test(html)) {
    failures.push('F42: Div with onclick but no keyboard support');
  }

  if (/<table>[\s\S]*?<td>[\s\S]*?<td>/.test(html)) {
    failures.push('F73: Table used for layout');
  }

  return failures;
}

const sampleHtml = '<img src="photo.jpg"><div onclick="do()">Click</div>';
console.log(detectFailures(sampleHtml));

Expected output:

['F16: Image missing alt attribute', 'F42: Div with onclick but no keyboard support']

Common Mistakes

1. Not Knowing the Failure Number

Failure numbers (F16, F42) are useful references during code reviews. Learn the most common ones.

2. Fixing Symptoms Instead of Root Cause

If automated tools detect a failure, understand the root cause. The fix may be different from what you assume.

3. Creating New Failures While Fixing Others

Accessibility fixes can introduce new failures. Always re-test after changes.

4. Not Adding Failure Checks to CI/CD

Automate failure detection in your CI/CD pipeline. Catch failures before they reach production.

5. Ignoring Failures in Third-Party Components

Third-party components can introduce failures. Test them and wrap them if needed.

6. Assuming You Can Avoid All Failures

Some failures occur through content updates. Monitoring catches new failures introduced by content changes.

7. Not Training Team Members on Failures

Share common failures with your team. A trained team catches failures before they are committed.

Practice Questions

1. What is F16?

Failure of 1.1.1 due to missing alt text on images.

2. What is F42?

Failure of 2.1.1 due to using click events without keyboard support.

3. How do you fix F69 (no label association)?

Add a label element with a for attribute matching the input's id, or wrap the input in a label.

4. Why is using a table for layout a failure?

Tables expose structural information to screen readers (row, column, cell relationships) that is meaningless for layout.

5. Challenge: Run an automated tool on your website. Identify any F-number failures found. Fix three of them and document the fix.

FAQ

Mini Project

Create a failure detection checklist for your code review Process. List the top 10 failures relevant to your technology stack. Include code examples of each failure and its fix.

What's Next

Learn about Understanding Documents and how to use them as the authoritative reference for WCAG criteria. Then explore Conformance Claims and how to document your compliance.