WCAG 2.0 Parsing Criterion is a PITA

Any change in WCAG 2.1? Nope, 2.1 parsing criterion is still a PITA

The WCAG 2.0 Parsing Criterion is a Pain In The Ass (PITA) because the checking of it throws up lots of potential errors that if required to fix, may result in a lot of extra work (in some cases busy work) for developers. This is largely due to the lack of robust tools for producing a set of specific issues that require fixing.

I have discussed the parsing criterion previously in WCAG 2.0 parsing error bookmarklet also providing a bookmarklet that helps to filter out some HTML conformance checker errors that are definitely (maybe) not potential accessibility issues.

IMPORTANT NOTE:

I am not saying here that checking and fixing HTML Conformance errors is not an important and useful part of web development process, only that fixing all HTML conformance errors is not a requirement for accessibility. There are good reasons to validate your HTML as part of the development process.

What the WCAG parsing criterion requires?

Is really, only, a very limited subset of the errors and warnings that may be produced when checking with the only available tools (i.e. HTML conformance checkers) for testing the WCAG parsing Criterion. You can use a HTML conformance checker to find such errors, but the errors that need fixing for accessibility purposes can often be needles in a haystack.

1. Complete start and end tags

note: but only when this is required by the specification

Examples of what happens:

This:

fieldset><input></fieldset>

Displays this on page:

fieldset>

or

This:

<img src="HTML5_Logo.png" alt="HTML5"
<p>test</p>

Produces this in DOM:

<img <p="" alt="HTML5" src="HTML5_Logo.png"> test
<p></p>

i.e. unintended empty p element with intended text not contained and a mutant attribute <p="" sprouted on the img element.

What this requirement does not mean

Adding end tags to every element:

 <input></input> ... <li>list item </li> ...

or self closing elements without end tags

 <input /> <img />

There are rules in HTML detailing which elements require end tags and under what circumstances:  Optional Tags. You can also find this information under Tag omission in text/html in the definition of each element in HTML.

4.5.9 The abbr element
…

Tag omission in text/html:

Neither tag is omissible

Good news is that most code errors of this type will be fairly obvious as they will show up as text strings in the rendered code or effect style/positioning of content and produce funky attributes in the DOM.

2. Malformed attribute and attribute values

quoted attributes

Any attributes that take text strings or a set of space-separated tokens or a set of comma-separated tokens or a valid list of integers, need to be quoted:

Do this:

<p class="poot pooter">some text about poot</p>
<img alt="The Etiology of poot." src="poot.png">

Not this:

//missing end quote on class attribute with multiple values: 
<p class="poot pooter>some text about poot</p>

//no quotes on class attribute with multiple values: 
<p class=poot pooter>some text about poot</p>

//missing start quote on alt attribute
<img alt=The Etiology of poot." src="poot.png">

//no quotes on alt attribute
<img alt=The Etiology of poot. src="poot.png">

Note: although some attributes do not require quoted values, the safest and sanest thing to do is quote all attributes.

Spaces between attributes

Do this:

<p class="poot" id="pooter">some text about poot</p>
<img alt="The Etiology of poot." src="poot.png">

Not this:

//no space between class and id attributes: 
<p class="poot"id="pooter">some text about poot</p>

//no space between alt and src attributes:
<img alt="The Etiology of poot."src="poot.png">

Further reading on attributes: Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup

3. Elements are nested according to their specifications

What this requirement means is that you cannot do something silly like having a list item li without it having a ul or ol as a parent:

<div>
<li>list item</li>  <li>list item</li> </div>

or multiple controls inside a label element:

<label>
first name <input type="text">  last name <input type="text"> </label>

Examples of what happens:

For “a list item li without it having a ul or ol as a parent” depending on browser, the semantics of the list item including  the role, list size and position of an item in the list, are lost. It also results in funky rendering across browsers.

For “multiple controls inside a label element” depending on the browser, the accessible name for each of the controls is a concatenation of the text inside the label, so in the example case, each control has an accessible name of “first name last name”. Also clicking, with the mouse, on either text label will move focus to the first control in the label element.

4. Elements do not contain duplicate attributes

Pretty simple, don’t do this:

<img alt="html5"  alt="html6">

Note: although this is a requirement in the WCAG criteria and a HTML conformance requirement, it causes no harm accessibility wise unless the 2nd instance of the duplicate attribute is one that exposes  required information, the usual processing behaviour for duplicate attributes is that the first instance is used, further instances are ignored.

5. Any IDs are unique

Again, pretty simple, don’t do this

<body>
...
<p id="IAmUnique">
...
 <div  id="IAmUnique"> 
... 
</body>

Note: although this is a requirement in the WCAG criteria and a HTML conformance requirement, it causes no harm accessibility wise unless the id value is being referenced by a relationship attribute such as for or headers or aria-labelledby etc.

Some further examples of HTML conformance errors that ARE NOT WCAG parsing criterion fails

• Unrecognized attributes:
  

  Error: Attribute event not allowed on element a at this point.

• Unrecognized Elements:
  

  Error: Element poot not allowed as child of element body in this context.

• Bad attribute values:
  

  Error: Bad value grunt for attribute type on element input.

• Missing attribute values:
  

  Error: Element meta is missing one or more of the following attributes: content, property.

• Obsolete elements and attributes:
  

  Error: The align attribute on the td element is obsolete.