WCAG for Content — Writing and Editing for Compliance

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

Content creators achieve WCAG Compliance through descriptive alt text for images, plain language at lower secondary reading level, descriptive link text, clear headings, accessible tables, and error messages that suggest fixes.

What You'll Learn

You will learn the specific WCAG requirements that content creators must meet and how to write accessible content.

Why It Matters

Content is the reason users visit your site. If the content is not accessible, the whole purpose of the site is undermined.

Real-World Use

DodaTech's content team follows a WCAG content checklist: alt text for every image, plain language for all user-facing text, descriptive link text, and error messages that explain and suggest.

flowchart TD
  A[WCAG for Content] --> B[Alt Text]
  A --> C[Plain Language]
  A --> D[Link Text]
  A --> E[Headings]
  A --> F[Tables]
  A --> G[Error Messages]
  B --> H[1.1.1: describe content and function]
  C --> I[3.1.5: lower secondary reading level]
  D --> J[2.4.4: destination is clear]
  E --> K[1.3.1: logical hierarchy]
  F --> L[1.3.1: proper header cells]
  G --> M[3.3.3: identify and suggest fix]

Alt Text

1.1.1 Non-text Content

All non-text content must have a text alternative. Informative images need descriptive alt. Decorative images need empty alt.

How to Write Alt Text

Describe the content and function of the image. What information does it convey? What is its purpose on the page?

<!-- Good: descriptive alt for chart -->
<img src="growth-chart.png" alt="Line chart showing user growth from 10,000 in January to 50,000 in June 2026">

<!-- Good: alt for link image -->
<a href="/report.pdf">
  <img src="pdf-icon.png" alt="Download 2026 security report (PDF, 2.4 MB)">
</a>

<!-- Good: decorative image -->
<img src="divider-line.png" alt="">

Plain Language

3.1.5 Reading Level (AAA)

Content should be written at or below lower secondary education level. Use short sentences, active voice, and common words.

Plain Language Tips

One idea per sentence. Use you and we to speak directly. Define technical terms. Avoid jargon, idioms, and metaphors.

<!-- Before: jargon-heavy -->
<p>Please utilize the configuration panel to initiate a comprehensive threat assessment of your system.</p>

<!-- After: plain language -->
<p>Open Settings to start a full security scan of your computer.</p>

Descriptive Link Text

2.4.4 Link Purpose (In Context)

The purpose of each link must be determinable from the link text alone or from the link text combined with its context.

<!-- Bad: nondescriptive -->
<p>Click <a href="/report">here</a> to download the report.</p>

<!-- Good: descriptive -->
<p><a href="/report">Download the 2026 security report (PDF)</a></p>

Headings

1.3.1 Info and Relationships

Headings must be marked up with h1 through h6 elements and maintain a logical hierarchy.

<!-- Good: logical heading hierarchy -->
<h1>Durga Antivirus Pro Guide</h1>
  <h2>Installation</h2>
  <h2>Running a Scan</h2>
  <h3>Quick Scan</h3>
  <h3>Full System Scan</h3>

Tables

1.3.1 Info and Relationships

Data tables must use th elements for header cells and scope attributes to associate headers with data cells.

<table>
  <caption>Threats detected by month</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Threats detected</th>
      <th scope="col">Neutralized</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>145</td>
      <td>143</td>
    </tr>
  </tbody>
</table>

Error Messages

3.3.3 Error Suggestion (AA)

Error messages must describe the problem and suggest a fix.

<!-- Bad: unhelpful error -->
<p class="error">Error 0x87E10BD0</p>

<!-- Good: helpful error -->
<div role="alert">
  <p>The email address you entered is missing the @ symbol.</p>
  <p>Please enter a valid email address like: name@company.com</p>
</div>

Common Mistakes

1. Writing Alt Text like Images Are Not Needed

Alt text that says image of or photo of adds no value. Describe the content.

2. Using Complex Language

Technical jargon and long sentences overwhelm users with cognitive disabilities. Write at a grade 8 reading level.

3. Linking to Here or Read More

Screen reader users navigate by links. Click Here tells them nothing about the destination.

4. Skipping Heading Levels

Jumping from h2 to h5 breaks screen reader navigation. Headings must descend in order.

5. Creating Complex Tables

Tables with merged cells, no headers, or missing scope are inaccessible. Keep tables simple.

6. Writing Vague Error Messages

Something went wrong is unhelpful. Tell the user what went wrong and how to fix it.

7. Not Testing Content with Users

Content that seems clear to you may be confusing to others. Test with users who have cognitive disabilities.

Practice Questions

1. What WCAG criterion covers alt text?

1.1.1 Non-text Content (Level A).

2. What reading level is recommended for plain language?

Lower secondary education level (approximately grade 8 or age 14).

3. What is required for link text under WCAG?

The purpose of the link must be determinable from the link text alone or in context.

4. How should data tables be marked up for Accessibility?

Use th elements for header cells with scope attribute. Include a caption element.

5. Challenge: Rewrite a paragraph from your website in plain language. Aim for a grade 8 reading level. Use a readability checker to verify.

FAQ

Mini Project

Audit three pages of your website for content accessibility. Check alt text, reading level, link text, heading hierarchy, and error messages. Write a report with recommendations.

What's Next

Complete the WCAG Project to apply everything you have learned in this module. Build a compliance evaluation and remediation plan.