HTML and Accessibility Debugging

Starting Code

To start, download the following files:

• debug.html
• debug2.html
• debug3.html

Instead of trying to examine the code manually, use the following tools to highlight potential problems:

• Your browser's developer tools (DOM inspector)
• W3 Nu Validator
• WebAIM WAVE

There are browser extensions for both HTML and WAVE validation. Using your browser's extension/add-on tool, search for "HTML Validator" (by Marc Gueury) and "WAVE Accessibility" (by WebAIM). These tools allow you to validate your code, even if it is just stored locally on your computer.

Step 1: HTML Debugging

Start by fixing debug.html. Almost of the problems with this file can be fixed with just the DOM inspector and the Nu Validator. (One may require WAVE.) Modify this file until the Nu Validator reports no errors or warnings. In addition, keep the following points in mind:

• You'll need to make sure you close all elements properly.
• Make sure to use a semantic landmark tag (<main>) to define the page layout.
• Eliminate the empty <a> element, moving the id attribute into the list tag.

A completed version of this step should match this screenshot.

Step 2: Accessibility Debugging

Next, proceed to debug2.html. Note that this file has no errors as reported by Nu Validator; all of the HTML code is well structured. However, this file has a number of accessibility problems that would make it unusable for individuals that rely on alternative devices, such as screen readers. Use the WAVE tool to identify these problems. For completeness, you must resolve all of the Errors, Contrast Errors, and Alerts.

To fix the semantic landmark alert, you should put the "Usability Debugging" within a <header>, the JMU logo in a <footer>, and the rest in <main>.

Some of the alerts (such as the alt text of the submission link) require you to change this to text of your own choosing. While there are no specific descriptions you must use, your descriptions must be appropriate and relevant. (For instance, do not just replace the text with nonsense like "bla bla bla".)

To fix the contrast errors, there must be sufficient difference between the text color and its background color. In this example, you can solve this by making sure the RGB values (hexadecimal digits) for the background are all at least c and the text color digits are at most 7.

A completed version of this step should match this screenshot.

Step 3: JavaScript Debugging

Finally, fix the JavaScript errors in debug3.html. There are three portions of code that all have errors of some sort. To fix all of them, you should use a combination of the console, the HTML validator and the WAVE accessibility tool.

Some of the errors that you need to fix are subtle. The are valid JavaScript, so they do not generate any errors in the console. However, the code is not correct because it is not producing the correct output. You will need to read and play with the code to fix them all.

A completed version of this step should match this screenshot.

Submission

While you are working, you can copy and paste your code directly into the Nu Validator. However, WAVE requires you to use a public URL, which you could publish on your w3stu account. Once you are finished, create a debug.zip file containing only the files debug.html, debug2.html, and debug3.html. Do not have the files in a subdirectory (folder) within the .zip file. Submit your debug.zip file to Gradescope.