Sufficient Techniques — Meeting WCAG Criteria with Tested Methods

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

WCAG sufficient techniques are tested, approved methods for meeting success criteria, documented by W3C with code examples, ensuring reliable Accessibility across different browsers and assistive technologies.

What You'll Learn

You will learn what sufficient techniques are, how to find and apply them, and the most common sufficient techniques for important success criteria.

Why It Matters

Sufficient techniques save you from reinventing solutions. They are tested, documented, and approved by W3C. Following them ensures your implementation is correct.

Real-World Use

DodaTech's component library references sufficient techniques for each WCAG criterion. When building a new component, developers start with the sufficient technique and customize from there.

flowchart TD
  A[Sufficient Techniques] --> B[Find technique]
  A --> C[Apply to your context]
  A --> D[Test with AT]
  A --> E[Document conformance]
  B --> F[W3C Techniques page]
  B --> G[Understanding document links]
  C --> H[Adapt examples to your design]
  D --> I[Verify with screen reader]
  E --> J[Note which technique was used]

What Are Sufficient Techniques?

Sufficient techniques are documented methods that, when implemented correctly, satisfy a success criterion. They are maintained by the W3C and updated as technology evolves.

Categories of Techniques

HTML techniques (H##), CSS techniques (C##), ARIA techniques (ARIA##), scripting techniques (SCR##), general techniques (G##), and SMIL techniques (SMIL##).

Common Sufficient Techniques

H44: Using Label Elements to Associate Text Labels with Form Controls

<label for="username">Username</label>
<input type="text" id="username" name="username">

H30: Providing Link Text That Describes the Purpose of a Link

<a href="/report-2026.pdf">Download 2026 annual security report (PDF)</a>

ARIA12: Using role heading to Identify Headings

<div role="heading" aria-level="2">Scan Results</div>

G18: Ensuring that a Contrast Ratio of at Least 4.5:1 Exists

/* 4.6:1 contrast ratio */
.text-primary {
  color: #005fcc;
  background: #ffffff;
}

// G18 contrast check helper
function getContrastRatio(hex1, hex2) {
  const l1 = getLuminance(hex1);
  const l2 = getLuminance(hex2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return ((lighter + 0.05) / (darker + 0.05)).toFixed(2);
}

function getLuminance(hex) {
  const [r, g, b] = hex.match(/[A-Fa-f0-9]{2}/g).map(c => {
    const v = parseInt(c, 16) / 255;
    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

console.log(getContrastRatio('#005fcc', '#ffffff'));

Expected output:

4.60

How to Use Sufficient Techniques

Find the criterion in WCAG. Read its Understanding document. Identify the sufficient techniques. Choose the one that fits your context. Implement following the documentation. Test with assistive technology.

Common Mistakes

1. Using Advisory Instead of Sufficient

Advisory techniques alone do not guarantee conformance. Check if a technique is marked as sufficient or advisory.

2. Copying Code Without Understanding

Technique examples are simplified. Adapt them to your context rather than copying blindly.

3. Not Testing After Implementation

Following a sufficient technique does not guarantee your implementation is correct. Always test.

4. Using Old Techniques for New WCAG Versions

Techniques specific to WCAG 2.0 may not cover 2.2 criteria. Check version compatibility.

5. Ignoring Multiple Sufficient Options

Different contexts call for different techniques. Review all options before choosing one.

6. Not Documenting Which Technique Was Used

Documenting your techniques supports your conformance claim and helps future maintainers.

7. Assuming One Technique Covers All Cases

Some criteria are best met by combining multiple techniques. Complex widgets may need several techniques.

Practice Questions

1. What is a sufficient technique?

A tested, documented method that guarantees a success criterion is met when implemented correctly.

2. What are the categories of WCAG techniques?

HTML (H##), CSS (C##), ARIA (ARIA##), Scripting (SCR##), General (G##), and SMIL (SMIL##).

3. What is the sufficient technique for associating labels with form controls?

H44: Using label elements to associate text labels with form controls.

4. How do you find sufficient techniques for a criterion?

Read the Understanding document for the criterion. It includes links to all applicable sufficient techniques.

5. Challenge: Pick a success criterion you need to implement. Find its sufficient techniques. Choose one and implement it in a test page.

FAQ

Mini Project

Create a techniques reference for the 10 WCAG criteria most relevant to your project. For each criterion, list the primary sufficient technique with a code example.

What's Next

Learn about Advisory Techniques for improving accessibility beyond the minimum requirements. Then explore Common Failures to understand what to avoid.