Make sure that assistive tech can parse content

HTML code of a list with syntax errors
Image description: A code editor with a light green message in the upper right says, "2 errors" with the errors underlined in light green squiggly lines. The code in the editor is displayed below.

<ol> <li>First is the worst</il> <li>Second is the best<</li> <li>Third is the one with the treasure chest</li>

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Make sure that assistive tech (such as screen readers) can read and understand the code. This is accessible to people who rely on assistive tech.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.

Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.

Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.

In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.

According to the Wuhcag blog, parsing content means that browsers and assistive tech can read and understand the interface. In order to be understandable, the code must be clean, modern, and has no major errors. If there were errors, this might result in a screen reader saying strange and incomprehensible things, creating an inaccessible experience.

This references WCAG criterion 4.1.1 Parsing (Level A).

Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.

How to Implement This

Write code using best practices

The Digital A11y blog recommends the following best practices for writing clean HTML:

  • Use unique ids - duplicate id’s are confusing to assistive tech because they tend to retrieve information associated with the first id. Once the duplicate id is provided, assistive tech will not provide correct info even if other WAI-ARIA attributes are correct.
  • Nest elements according to their specification - HTML has specific standards for nesting that need to be followed.
  • Avoid duplicate attributes - this is redundant.
  • Make sure that HTML has both start and end tags - if not, the semantic information will spill over to the next element.

Here is an example of poorly written HTML:

<title>Sweet Dreams</title>
<title>Or a Beautiful Nightmare</title>
<li>What are your dreams, my friend?</li>
<h3>What do dreams mean?</h1>
<div>The possibilities are endless!</div>

There are several things wrong with that code! The errors are:

  • The <html> attribute doesn’t have proper start and end tags
  • There are duplicate <title> attributes
  • The <h1> heading is mislabeled <h3> in the start tag
  • There is a <li> list item that is not nested within a list (either ordered or unordered)
  • The body elements exist without a <body> tag or any other landmark elements

Here is (almost) the same code written so that assistive tech can parse it:

<title>Sweet Dreams or a Beautiful Nightmare</title>
<h1>What do dreams mean?</h1>
<p>The possibilities are endless! Some questions to ask:</p>
<li>What are your dreams, my friend?</li>
<li>Do you keep a dream diary?</li>
<li>Do you ever talk about your dreams?</li>

How to Test This

Manual Test
Semi-Automated Test
Automated Test

Most text editors built for engineering such as Atom, Sublime, and Notepad++ have built-in syntax highlighting and error detection. Use a text editor with these tools to help ensure you are consistently writing clean code.

To check and validate the code, here are some markup validators:

Here are some guides to debugging:


No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)