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 text, buttons, and other screen elements to audio and/or braille. If you are new to screen readers, I recommend watching a video to learn how it works.

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).

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:

<html
<head>
<title>Sweet Dreams</title>
<title>Or a Beautiful Nightmare</title>
</head>
<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:

<html>
<head>
<title>Sweet Dreams or a Beautiful Nightmare</title>
</head>
<body>
<main>
<h1>What do dreams mean?</h1>
<p>The possibilities are endless! Some questions to ask:</p>
<ul>
<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>
</ul>
</main>
</body>
</html>

How to Test This

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:

Credits

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)gmail.com.