<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 -
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:
<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
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.