9. Accessibility

Activity 9.01: Making a Page Accessible

Solution

1. To start, create a file called Activity 9.01.html and copy the code from activity_1_inaccessible.html into it.
2. Open that page in the browser and run the Axe accessibility checker in the developer tools.

   The following screenshot shows the results you should see for this page. There are five distinct issues, with multiple occurrences of some of the issues (form label issues):

   Figure 9.22: Issues with the page reported by Axe

3. The first issue to solve is changing the second label in the Rating the product section. It and the first label are associated with the same form field. Changing it to associate the label with the form field with the "rate-2" ID makes sense:

              <input type="radio" name="rating" value="1" id="rate-1">
              &lt...