Parsing and validity
Overview – Parsing and validity
User agents, including browsers and assistive technologies, need to accurately interpret and parse content. Defects in the markup can cause user agents to fail to parse it or to present the content differently.
WCAG Success Criterion 4.1.1 Parsing (Level A) specifies four markup requirements:
- 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.
Validate your markup with a tool such as The W3C Markup Validation Service. Validation reports generally catch each requirement’s defects.
The consequences to accessibility range from minimal to severe. Most modern browsers repair incomplete start or end tags, improper nesting and duplicate attributes. However, duplicate id attribute values can cause a screen reader to make incorrect associations between elements, such as the wrong label or description.
Elements have complete start and end tags
The tags can’t be missing any characters required by the HTML syntax, e.g.,
- start tags consist of an element name between less-than and greater-than characters:
<h1> - closing tags add a back slash:
</h1>
Elements are nested according to their specifications
Elements with a parent-child relationship are cleanly nested, with the start and end tags of the child element fully inside the start and end tags of the parent element.
Good example: the start and end list item tags are fully inside the parent list’s tags
HTML
Code begins
<ul>
<li>Corn</li>
<li>Tomatoes</li>
<li>Beans</li>
</ul>
Code ends
Good example: an inline strong element’s tags are fully nested inside the parent paragraph’s tags
HTML
Code begins
<p><strong>Important:</strong> Lock the door when you leave.</p>Code ends
Bad example: broken list
Both “list item with no parent list element” and “Text with no parent list item element” are caught by the W3C Validator.
HTML
Code begins
<body>
<h1>Fully-tagged heading</h1>
<p>Fully-tagged paragraph</p>
<p>Paragraph with no end tag (valid in HTML5)
<li>list item with no parent list element</li>
<ul>
Text with no parent list item element
</ul>
</body>
Code ends
Elements do not contain duplicate attributes
Ensure no attribute occurs more than once on any element.
Any IDs are unique
Ensure no id attribute value is repeated on any page view.
Id values are used by assistive technologies to associate labels and descriptions with elements, for header and cell associations in complex tables, and to define relationships in ARIA widgets (aria-owns, aria-controls, etc.). Duplicate id attribute values can sow confusion, and in the case of forms can lead to user input errors, with input fields misidentified or misdescribed.