Skip to main content

Ensure HTML Parses Correctly Without Errors

WCAG 2.1 Ultimate Guide
Disabilities Affected: Hearing, Visual
Success Criterion: 4.1.1
Level: A
WCAG Link
Web pages must use valid HTML according to their specification. This means elements should have complete start and end tags (or be correctly self-closing), elements should be nested properly, attributes should be valid and correctly formatted, and IDs must be unique on a page.

Why It Matters

Assistive technologies (like screen readers) rely on browsers parsing the HTML correctly to build an internal representation (the Accessibility Tree) of the page. Invalid HTML (like unclosed tags, improperly nested elements, or duplicate IDs) can confuse the browser’s parser, leading to an incorrect or incomplete accessibility tree. This can cause assistive technologies to behave unpredictably, skip content, or fail entirely.

Fixing the Issue

Write clean, valid HTML. Use an HTML validator (like the W3C Markup Validation Service) to check your code for errors. Ensure all non-void elements (like <div>, <p>, <a>) have corresponding closing tags. Nest elements correctly (e.g., a <span> inside a <p>, not the other way around if the <span> contains block elements). Ensure all attribute values are enclosed in quotes. Make sure the id attribute value is unique for every element that uses it on a single page. Use the correct DOCTYPE declaration.

Good Code Example

Well-formed, valid HTML:

  • <h1>Correctly Nested Content</h1>
  <p>This paragraph contains a <strong>strong</strong> element, which is properly closed.</p>
  <div id="unique-section-1">
    <p>Content within a div.</p>
  </div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>

  • Correctly Nested Content

    This paragraph contains a strong element, which is properly closed.

    Content within a div.

    • List item 1
    • List item 2

Bad Code Example

HTML with parsing errors:

  • <h1>Parsing Errors Example
  <p>
    </p><div>Block content inside paragraph.</div><div id="content-area">Some content</div><section id="content-area">More content</section><ul>
    <li>Item 1
    </li><li>Item 2</li>
  </ul><a href="/about/">About Us</a></h1>

  • Parsing Errors Example

    Block content inside paragraph.
    Some content
    More content
    • Item 1
    • Item 2
    About Us
Search Ultimate Guide
Tablet displaying an eBook cover titled 'Integrating Accessibility Compliance Into Your Budget' by AccessiTREE. The cover features a digital tree with accessibility-related icons, symbolizing inclusive design and compliance.
Free eBook
Integrating Accessibility Compliance Into Your Budget
A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling
Learn More
Need Help with Compliance?
Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.
Schedule Consult