Skip to content

The Accessibility Report

The Accessibility Report analyzes your solution for issues that could prevent users with disabilities from effectively using your site. Building accessible websites isn't just good practice—it's essential for creating an inclusive web. The goal of this report is to help you level up as a developer by identifying areas for improvement. Use the feedback to practice refining and improving your code—this iterative process is how real growth happens.

Table of contents

  1. How it works
  2. Common issues detected
  3. Limitations of automated testing
  4. Acting on your report

The Accessibility Report checks your solution for issues that could stop people with disabilities from using your site. Accessible markup is a core part of good frontend work, and it's a skill worth building early. Use these findings to practice spotting and fixing issues as you go.

How it works

When you submit a solution, we use axe-core to run an automated audit of your code. axe-core tests against the Web Content Accessibility Guidelines (WCAG), the internationally recognized standard for web accessibility.

The report checks for issues including:

  • Missing or improper alternative text for images
  • Missing form labels
  • Incorrect heading hierarchy
  • Missing document language
  • Improper use of ARIA attributes

Going deeper with the AI code review

These automated checks catch concrete, rule-based issues. For feedback that looks at how your accessibility holds up across your whole solution, the AI code review scores your code across several dimensions, one of which is Accessibility. Pro members get it on every submission, and free members get one a month. See The AI Code Review to learn more.

Common issues detected

Missing alt text

Images need alternative text for users who can't see them.

Instead of:

<img src="profile.jpg">

Use:

<img src="profile.jpg" alt="Sarah Chen, Senior Developer">

For decorative images, use an empty alt attribute:

<img src="decorative-border.svg" alt="">

Missing form labels

Every form input needs an associated label.

Instead of:

<input type="email" placeholder="Enter your email">

Use:

<label for="email">Email address</label>
<input type="email" id="email">

Missing document language

Declare the page language so that assistive technologies use the correct pronunciation.

Instead of:

<html>

Use:

<html lang="en">

Improper heading hierarchy

Headings should follow a logical order without skipping levels.

Instead of:

<h1>Page Title</h1>
<h3>Section</h3>  <!-- Skipped h2 -->

Use:

<h1>Page Title</h1>
<h2>Section</h2>

Limitations of automated testing

Automated accessibility testing only catches some of the issues on a page. Plenty of things still need a human to check.

What automated testing cannot check:

  • Whether alt text accurately describes the image
  • Whether the reading order is logical
  • Whether custom interactions work with a keyboard
  • Whether content is written clearly

Manual testing worth doing:

  1. Keyboard navigation: tab through your page. Can you reach everything?
  2. Screen reader: use VoiceOver (Mac) or NVDA (Windows) to navigate.
  3. Zoom: zoom to 200% and check the page is still usable.

Acting on your report

Review your findings and prioritize:

  1. Critical and serious first: issues that block access for some users.
  2. Moderate second: issues that cause difficulty but have workarounds.
  3. Minor last: low-impact issues to address when you have time.

Use the report as a starting point, and go beyond automated testing to build genuinely inclusive experiences.

PreviousIntroduction to Solution Reports
NextThe HTML Report