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

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

AI-Enhanced Reports (Pro)

Pro subscribers receive AI-enhanced analysis that goes beyond axe-core:

  • User journey - Evaluates logical tab order and focus management, especially in single-page applications
  • Cognitive accessibility - Assesses form instruction clarity, helpful error messages, and cognitive load
  • Interaction patterns - Reviews keyboard support, identifies hover-only or click-only patterns that exclude users
  • Dynamic content - Checks how loading states and content updates are communicated to assistive technologies
  • Error recovery - Evaluates undo paths and recovery options when users make mistakes

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 catches approximately 30% of accessibility issues. The remaining 70% require manual testing.

What automated testing cannot check:

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

Manual testing you should do:

  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 ensure the page remains usable

Acting on Your Report

Review your findings and prioritize:

  1. Critical/Serious first - Issues that block access for some users
  2. Moderate second - Issues causing difficulty but with workarounds
  3. Minor last - Low-impact issues to address when time permits

Use the report as a starting point, but go beyond automated testing to create truly inclusive experiences.

PreviousIntroduction to Solution Reports
NextThe Accessibility Report