Skip to content

Lab 2: Accessibility & Data

This lab consists of two parts worth 10 points each. Part A is about HTML semantic elements, and Part B is about JavaScript arrays and objects. Submit each part separately to Gradescope.

Part A: Accessible Madison 💜

Note: Headphones recommended! 🎧

Objectives

  • Evaluate a website’s accessibility using Axe
  • Use semantic tags to structure a document
  • Compare a website’s screen readability before and after following accessibility guidelines

Context

The un-engineered version of the JMU homepage has been successfully deployed. Now, people in remote locations (like space) have been able to learn about JMU’s programs! We have made some modifications to your page to change up some of the headings and include more content.

However, complaints are coming in from people who rely on screen readers. The page is not very accessible. We forgot to check it with Axe before publishing. We want to make sure everyone is welcome and able to be a part of JMU.

Accessibility issues with the un-engineered JMU home page

Getting Started

  1. Download this lab02.zip file (right-click, save as) and put it in a lab02 folder, in your CS343 folder (or somewhere else safe).
  2. Open it in VS Code and start a live preview/server using an external browser (e.g., Chrome, Firefox) to see the page (please do not just open the file in your browser: work smarter, not harder).

Step 1: Accessibility Audit 🔍

  1. Before diving too far into the code, use a screen reader to try and navigate the page. - We recommend cycling through headings (e.g., pressing H on Windows, or Ctrl+Alt+Cmd+H on Mac) and then using Up/Down to go through individual options.
  2. Take note of two things in particular and see how they affect the screen reader:
    • We accidentally made the headings progressively get smaller, from h1 to h6. We thought that each heading needed to be a unique number, without knowing what it actually meant. Oops!
    • The featured stories have titles, but they are only separated by <br> tags. The screen reader cannot distinguish between the title of a story and its actual content.
  3. Install the browser extension for the axe DevTools - Web Accessibility Testing. đŸȘ“

  4. In your browser, go back to your live preview of the JMU homepage.

    • Open the DevTools (press F12, or see other ways to open DevTools) and go to the Axe DevTools tab.

    • You will see a button to do a Full Page Scan for accessibility issues. Click it!

      Run Full Page Scan in Axe DevTools

  5. You should see 3 total issues.

    • Expand each issue to see more details about what is wrong, where the issue is located, and how to fix it.
    • Read these carefully!
  6. Finally, go back to VS Code and just look at the HTML for the page.
    • There are some weird things going on here!

Step 2: I Can Fix It! đŸ› ïž

Fix-It-Felix Jr. saying "I can fix it!"

  1. Go into the HTML code and fix the issues identified by Axe. We will take you step-by-step.
    • Have VS Code on one side, and your browser on the other.
    • Re-run Axe after you think you have fixed each issue.
  2. First, fix the identified issues:
    • Add alt-text to all your images, using the alt attribute. Provide a short description of each image.
    • Fix the <html> tag to include the page’s language: lang="en".
  3. Run Axe again to check if the errors have been resolved.
    • While we’ve fixed the errors, there are still some additional features that would help improve accessibility and screen reader navigation.

  4. In Axe, turn on Best Practices. You will see 8 additional issues.

    Axe DevTools Best Practices toggle

  5. First, let’s make sure to use heading tags correctly.

    • This is important for screen readers to navigate the page structure.
    • Keep the James Madison University text at the top as an <h1>.
    • Change all other heading tags (e.g., <h2>, <h3>, …) to <h2>.
  6. You can fix the “landmark” errors in Axe by using semantic elements to structure your document. Here is what to do:
    • Semantic tags to use: header, figure, nav, main, section, article, aside, footer, address.
    • You can change existing tags from a <div> or <p> to the corresponding semantic tag. For example: 
      <div id="top">
...
</div>
      can become 
      <header id="top">
...
</header>
    • Keep the id values, since they are useful for anchor links.
  7. Guide to follow:
    • Your body should have three immediate children: header, main, and footer.
    • Wrap the animated GIF image in a figure element.
    • The header should contain the nav (you will need to move some elements around).
    • “about”, “explore”, and “stories” should be section elements.
    • “give” should be an aside.
    • Each individual story should be inside its own article element.
      • Make each story’s title an h3 element.
    • Add or remove <p> and <br> tags as needed, making sure the format of the page still looks OK.
  8. Run Axe on your page again, if you have not done so already.
    • Confirm that you still have no issues and that the structural elements section now shows that your page contains appropriate semantic elements.

Step 3: Play it (again), Sam!

  1. Use the screen reader to navigate this improved version of your page.
    • Cycle through headings (pressing H on Windows, or Ctrl+Alt+Cmd+H on Mac) to skip to major parts of the page before drilling down into details.
  2. Note how changing the headings made a big difference to navigation.
    • Also note how your semantic tags affect what the screen reader says.
    • What about the giving part? Did making it an aside change anything?
  3. It might not feel like a large improvement, but think about someone who is expecting the page to behave a certain way.

Submission

Upload index.html to the assignment on Gradescope.

At this point of the semester, you have unlimited submissions. But you should not rely on Gradescope to test your code. The autograder takes a long time to run. Do yourself a favor and test your code before uploading.

Part B: Audit Data Analysis

Objectives

  • Process an array containing many objects
  • Access nested objects and nested arrays
  • Accumulate counts, totals, and derived results

Context

In Part A, you used Axe to evaluate a page’s accessibility. Many other free and commercial tools are available to evaluate accessibility, including WAVE (Web Accessibility Evaluation Tool) Dubbot, and Accessibility Insights, to name a few. See W3C’s Web Accessibility Evaluation Tools List for more.

Larger organizations like JMU run accessibility audits on a regular basis to identify content that needs to be improved. Audit tools generate reports in a variety of formats, such as HTML and PDF for humans to read, or JSON and CSV for computers to read. During this part of the lab, you will analyze data generated by accessibility audit tools.

Acknowledgement

Special thanks to Yusuf AĆŸÄ±k for releasing his accessibility-test data under the MIT license.

Provided Files

The following files are included in the zip archive you downloaded during Part A:

  • analysis.html – Open this file with Live Preview / Live Server.
  • analysis.js – Contains the function stubs you must implement.
  • reports.js – Contains the audit data your functions will analyze.

In analysis.html, notice that reports.js is loaded before analysis.js. Because of this order, a global variable named reports is available to all of your functions. Each object in the reports array represents the results of an accessibility scan for a single page.

Instructions

Each function should iterate over the global reports array and compute the required result. See the instructions in the documentation comments and the example return values below.

Important

Do not assume the dataset has only five reports. Your code must work correctly for any number of report objects.

  • totalIssues() returns an array like this: 
    [
  {"url": "https://cv.yusufasik.com/", "issues": 93},
  {"url": "https://github.com/velespitt", "issues": 21},
  {"url": "https://www.linkedin.com/in/velespit/?locale=tr_TR", "issues": 2},
  {"url": "https://yagizdokumaci.com/", "issues": 22},
  {"url": "https://yusufasik.com/", "issues": 25},
]
  • issuesByImpact() returns an object like this: 
    {
  "critical": 16,
  "serious": 70,
  "moderate": 77,
  "minor": 0,
  "bestPractices": 77,
  "needsReview": 0,
}
  • failedRules() returns an object like this: 
    {
  "color-contrast": 39,
  "scrollable-region-focusable": 1,
  "heading-order": 4,
  "landmark-one-main": 2,
  "region": 68,
  "image-alt": 16,
  "link-name": 28,
  "aria-hidden-focus": 1,
  "landmark-unique": 1,
  "page-has-heading-one": 2,
  "list": 1
}
  • criticalIssues() returns an array like this: 
    [
  {...},  // 1st issue
  {...},  // 2nd issue
  ...
  {...},  // nth issue
]
    Note: The above array is over 600 lines long.

Important

Use only simple for loops and if / else statements. Do not use array methods such as forEach, filter and map. (Don’t use arrow functions until we learn about them in class.)

Testing and Submitting

Open analysis.html with Live Preview/Server. Open the DevTools (press F12) and go to the Console tab. When finished, you should see the output similar to this:

Screenshot showing expected return values

Upload analysis.js to the assignment on Gradescope. The autograder will test your code with several different data sets.