Level A Robust WCAG 2.0+

Success Criterion 4.1.1: Parsing

Important Update for WCAG 2.2

Note: This success criterion has been marked as "obsolete" in WCAG 2.2, as modern browsers and assistive technologies are now robust enough to handle minor parsing errors. However, it remains part of WCAG 2.0 and 2.1, and writing valid HTML is still a best practice for accessibility and cross-browser compatibility.

Official W3C Definition

In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.

Web Content Accessibility Guidelines (WCAG) 2.1

Why This Criterion Matters

Invalid HTML can cause assistive technologies to misinterpret or fail to interpret content correctly. While modern browsers are forgiving of many errors, assistive technologies may not handle malformed markup gracefully, leading to accessibility issues.

Key Requirements

  • Complete tags: All elements have proper opening and closing tags
  • Proper nesting: Elements are nested correctly without overlapping
  • No duplicate attributes: Each attribute appears only once per element
  • Unique IDs: Every id attribute value is unique on the page

How to Meet This Criterion

Technique 1: Complete Tags

Good Example 
<!-- Good: All tags properly opened and closed -->
<div class="container">
    <p>This is a paragraph with <strong>bold text</strong>.</p>
    <ul>
        <li>First item</li>
        <li>Second item</li>
    </ul>
</div>
Bad Example 
<!-- Bad: Missing closing tags -->
<div class="container">
    <p>This paragraph is not closed
    <ul>
        <li>First item
        <li>Second item
<!-- Missing </ul>, </div> -->

Technique 2: Proper Nesting

Good Example 
<!-- Good: Correctly nested -->
<p>This is <strong><em>bold and italic</em></strong> text.</p>
Bad Example 
<!-- Bad: Overlapping tags -->
<p>This is <strong><em>bold and italic</strong></em> text.</p>

Technique 3: Unique IDs

Good Example 
<!-- Good: Each ID is unique -->
<label for="first-name">First Name</label>
<input type="text" id="first-name">

<label for="last-name">Last Name</label>
<input type="text" id="last-name">
Bad Example 
<!-- Bad: Duplicate IDs -->
<input type="text" id="name">
<input type="text" id="name">  <!-- Same ID used twice -->

Common Failures to Avoid

Failure Problem Solution
Duplicate IDs Labels and aria-describedby may reference wrong element Ensure all IDs are unique
Missing closing tags DOM structure unpredictable Close all elements properly
Overlapping elements Invalid structure Nest elements properly (LIFO)
Duplicate attributes Only first value used Remove duplicate attributes

Testing Methods

Validation Tools

Manual Checks

  1. Validate HTML: Run page through W3C validator
  2. Check for duplicate IDs: Search source for id=" and check uniqueness
  3. Review nesting: Ensure proper element hierarchy

Related Criteria

4.1.2 Name, Role, Value

UI components have accessible names and roles

1.3.1 Info and Relationships

Semantic structure for content

Additional Resources

On This Page

WCAG Overview Get Help