If your website has messy code, you need to fix it — otherwise, you could be creating barriers for users with disabilities.
The Web Content Accessibility Guidelines (WCAG) 2.1 addresses this issue in Success Criterion (SC) 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.
In other words, messy HTML, CSS, or JavaScript isn’t acceptable, regardless of whether your poor markup “breaks" your site when viewed visually.
Below, we’ll explain the importance of parsing and provide some tips for checking your website.
Why Parsing is Essential for Accessibility
Parsing is the process of converting code (or other text) into a data structure. Your website uses HTML and other tools to define the semantic structure of your content, which user agents can parse before presenting the content to the user.
If you use the HTML <p> tag, for instance, you’re sending a signal to user agents that says, “the next text on this page is a paragraph.” When you use </p>, you’re sending the message, “the paragraph is over.”
However, if you forget to use the </p> end tag, the semantic information continues into the next element. The user agent may assume that all of the content below the <p> tag is part of the same paragraph.
Related: Leveraging HTML for Web Accessibility
Parsing Correction
Many user agents have methods for parsing content with poor code. For example, if you put an extra space in an HTML tag, a browser may be able to determine that the space was a mistake and adjust the presentation as needed.
This is also true for screen readers (software that outputs text as audio or braille) and other types of assistive technologies. However, you shouldn’t depend on user agents to repair bad code — different web browsers and AT devices use different methods to perform the repairs.
Related: Assistive Technology 101: What You Need to Know
Duplicate ID Attribute Values
Of course, most developers validate their code before publishing content. Unfortunately, they may miss duplicate ID attribute values, which can cause issues for AT users.
The HTML ID attribute declares a specific, unique ID for an HTML element. This is especially important for screen readers, which use the ID attribute to present information to users.
This is a common issue with forms. If form fields have duplicate IDs, screen readers may read the wrong information for the second form field. This occurs because the screen reader associates the information with the first occurrence of the ID. When the software encounters another element with the same ID, the screen reader recalls that information — which may be inaccurate.
For example, if an HTML form uses “id=name" for fields requesting the user’s first name and last name, the screen reader may identify both fields as “first name.” The user won’t know how to complete the form.
Related: Why Form Labels and Instructions Are Important for Digital Accessibility
Quick Tips for Validating Your Website’s Code for Accessibility
Markup validation should be performed regularly as part of a broader web accessibility audit. Most parsing errors can be identified with automated tools.
The World Wide Web Consortium (W3C) offers a Markup Validation Service, which is an excellent starting point. However, the W3C’s markup validation is quite thorough, and you’ll need an experienced developer to determine whether errors and warnings require remediation.
The best practice is to use a careful approach when writing markup:
- Check that every HTML element has start and end tags where applicable.
- Nest elements according to their specifications.
- Check that elements do not contain duplicate attributes. For example, many content management systems automatically apply alternative text (alt text) for images; if you add alt text through HTML, the alt text may be duplicated, which can create an accessibility issue).
- Make sure any element IDs are unique.
- Use plain old semantic HTML (POSH) wherever possible. HTML works with all user agents, so it’s the best tool for declaring semantic information and structure.
Automated accessibility testing can help you find markup issues along with other barriers that may affect users with disabilities. Our free website analysis tests content against WCAG Level A/AA checkpoints, providing an overview of your website’s current level of accessibility.
For more guidance, send us a message to connect with a subject matter expert or read our free eBook: Essential Guide to ADA Compliance for Websites.
