Skip to content

Website Analysis Using Accessibility Insights

Lab Overview

In this lab, you will use Accessibility Insights for the Web to evaluate a website for common accessibility issues. You should attempt each check yourself first and read the guides explination as to why the check matters. Afterward, you may reveal the provided answer to compare your findings.

Setup Instructions

  1. Open Microsoft Edge or Google Chrome.
  2. Download Accessibility Insights for the Web:
    • Visit the Accessibility Insights download page.
    • Select Add to Chrome or Add to Microsoft Edge, depending on your browser.
  3. Download this Color Contrast Checker
  4. Once installed, open the following website in your browser:
  5. Click the Accessibility Insights extension icon in your browser toolbar.
  6. Select “Quick assess.”

A new window will open with a step-by-step workflow for evaluating website accessibility.

Automated Checks

These first checks are fully automated; take a look at the types of errors the tool can find on its own.

Manual Accessibility Checks

Complete each of the following checks. Try to identify the issue on your own before revealing the answer. Make sure to read the guide's explanation of why the check matters.

1. Keyboard Navigation

Use only the keyboard (Tab, Shift+Tab, Enter) to navigate the page.

This website does not navigate to other pages, so do not activate buttons—only verify that they can receive focus.

Reveal Answer Failure: The **Donate** button cannot be accessed using the keyboard.

Verify that each link’s accessible name provides enough context when read out of context.

Reveal Answer Failure: Links with the accessible name **“More”** do not provide sufficient context.

3. Image Function

Determine whether images are marked correctly as meaningful or decorative.

Reveal Answer Failure: Several images that are marked as neither meaningful nor decorative fail this test. The image of the dog should be marked as **decorative**, not meaningful.

4. Focus Order

Navigate through the page using the keyboard and observe the order in which elements receive focus.

Reveal Answer Failure: The focus order is incorrect. Most notably, the top navigation bar is one of the last elements to receive focus.

5. UI Components (Color Contrast)

Open the color contrast checker you downloaded and check the contrast of the elements highlighted by the fast pass tool.

Reveal Answer Failure: Text in the yellow navigation bar does not meet contrast requirements and needs improvement.

6. No Missing Headings & Heading Level (Skipped)

Skip this check: Missing headings and heading level issues are not evaluated in this lab.

7. Bypass Blocks

Determine whether users can bypass repetitive content, such as headers. Here is an example of a website that has a successful skip link to bypass the nav bar. Use tabbing to see the skip link: Web Accessibility Platform for Businesses of All Sizes | AudioEye®

Reveal Answer Failure: There is **no way to skip past the header** using a keyboard or skip link.

8. Instructions (Skipped)

Skip this check for this lab.

9. Reflow

Zoom the page to 500%. For an official test, you would need to follow all th

This lab was developed by JMU CS Student Alex Furlich under the supervision of Dr. Michael Stewart Spring 2026.