Parsing for designers

This post marks the beginning of my five part series diving into more developer-focused WCAG success criteria that might for designers who don't code to follow.

4.1.1 Parsing breakdown

The purpose of success criteria 4.1.1 Parsing is to ensure browsers and assistive technologies can render content reliably, without creating any accessibility barriers for users. The W3C definition is as follows:

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.

If you're like me and your eyes glazed over after seeing the words "markup language" here are the four areas of focus in this success criteria, which we'll dig into each individually:

1. Complete start and end tags
2. Nested according to specification
3. Duplicate attributes
4. Unique IDs

Parsing requirements

Luckily, all of these requirements can be caught by an automated testing plugin so there is no need to comb through a thousand lines of code. However, it is helpful to know exactly what is happening with each of these callouts so you can work with your developers on remediation efforts.

Complete start and end tags

First, a little background on web page development:

• Web developers build pages using HTML, a programming language
• HTML uses tags to provide browsers with instructions about the web page
• Tags are comprised of elements, which are the objects on the page like a heading, paragraph, or image
• Tags are always enclosed in angle brackets: < >

This requirement is calling out that tags are required at the start of an element as well as at the end, which shouldn't come as a surprise to a web developer as tags usually travel in pairs anyway. For example, to indicate that a section of text is a paragraph, the developer would open the paragraph with a <p> tag and close it with a closing paragraph tag, which looks like </p>. An opening tag and closing tag must appear for all elements on a web page.

Nested according to specification

Continuing our tag conversation... Tags can be nested within each other. For example: <div><p>This paragraph is nested inside a division</p></div>

The order of nested tags is important. A common mistake when nesting is to close the parent element before the element it contains (its child) has been closed. For example: <p>This word is <strong>bold</p></strong>

This would result in an incorrect overlapping of elements that might cause rendering problems for browsers or assistive technology.

Duplicate attributes

Attributes are qualities that describe an element, like an images alternative text or a video players height. If the same attribute is used more than once on an element, the browser or assistive technology may not be able to render it correctly.

Unique IDs

An ID attribute is used to identify the element when styling with CSS or linking/scripting it with JavaScript. IDs must be unique within the whole HTML document. If they are repeated, it can affect assistive technologies as they tend to retrieve information that is associated with the first ID; Any duplicative instances may not provide the correct information even if other WAI-ARIA attributes are correct.

Note on WCAG 2.2

It is possible that this success criteria becomes obsolete when WCAG 2.2 releases. The reason behind this is because modern parsers are smart enough to recognize these errors and fix them based on the surrounding structure. If errors remain after the parser, many accessibility specialists believe violations should instead be tied to 1.3.1 Info and Relationships, which I've conveniently already written about here.

‍