Understanding SC 4.1.1 Parsing
4.1.1 Parsing: 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. (Level A)
Note: Start and end tags that are missing a critical character in their formation, such as a closing angle bracket or a mismatched attribute value quotation mark are not complete.
Parsing is all about writing a clean code “HTML, CSS OR JavaScript” in a manner that is understood by browsers & assistive technologies. Browsers & assistive technologies rely on the code in DOM & render the necessary information to the users. If the code is not written according to standards it can break the user experience of the application & assistive technology users will have a lot of problems to deal with.
There are four components to check to pass this SC:
- Elements have complete start and end tags: Make sure your HTML has start tags <> & end tags where ever applicable. When end tags are missed the semantic information of the element that is marked-up will spill over to the next element. This affects assistive technology users who rely on semantic information to browse the application.
- Elements are nested according to their specifications: HTML has certain standards & they apply very strongly here. You cannot have div tag inside a span & li tag inside a div without having ul or ol tags. Some of these bugs will show-up during automation testing & HTML validation. While all assistive technologies might not be affected, it is certainly a best practice to avoid these kinds of errors.
- Elements do not contain duplicate attributes: Duplicate attribute means providing the same attribute more than once to the same element. For example providing alt text twice for the img tag or using a title attribute to a form control twice. While these attributes might not affect assistive technologies, it certainly fails HTML validation
- Any IDs are unique: During development process developers need to make sure that any id provided for any element on the page is unique, if the id is not unique & given more than once to different elements it tends to fail automation. Duplicate id’s also affect assistive technologies as they tend to retrieve information that is associated with the first id. Once the duplicate id is provided assistive technologies will not provide correct information even if other WAI-ARIA attributes are correct. For example if first name & last name are provided with same id “id=username” screen readers tend to read both fields as first name once the association takes place. Duplicate id’s can be found through automation tools.
How to Test
This check point is little tricky to check as we need to have knowledge of HTML as we need to pick the failures manually. Use the WCAG 2.1 parsing error bookmarklet by Steve Faulkner… The process of how to use the bookmarklet is also explained in the blog.
Hay man, I am really liking articles on your website. They are made clearly, easy to digest and remember, regardless of English being my third language. Cheers.
Hello Charles,
It is good to hear that our articles are helping you. Thanks for stopping by & sharing this with us.