Skip to main content

Detailed Report

What is the Detailed Report page?​

The Detailed Report page shows all the details of a single accessibility scan. Here you can see all the issues found on the page, statistics, recommendations on how to fix them, and technical information for developers.

How to access?​

You can access a detailed report in several ways:

  • From the Scans page: click the "View report" button next to a completed scan
  • From the Sitemap page: click the "View report" button next to a scanned URL
  • From the Issues page: click on an issue to see the report of the associated scan

Scan Information​

At the top of the report you see three main pieces of information:

Analyzed URL​

The complete address of the page that was scanned. You can click on this link to open the page in your browser.

Scan Date​

The date and time when the scan was performed. This helps you understand when the issues were detected.

Total Issues​

The total number of issues found on the page. It includes all types: critical, warnings, and information.

Severity Statistics​

This section shows how issues are distributed based on their severity:

Critical​

The number of critical issues found. These are the most serious problems that prevent or make it very difficult to access content for users with disabilities. They must be fixed as a priority.

Warnings​

The number of warning issues found. These issues reduce usability but don't completely prevent access. It's advisable to fix them to improve user experience.

Information​

The number of informational suggestions found. These are tips to improve accessibility that aren't critical but can make the site even more accessible.

WCAG Compliance​

This section shows how many issues violate the different levels of WCAG standards:

Level A​

The number of issues that violate WCAG Level A. Level A is the basic level of accessibility and includes fundamental requirements.

Level AA​

The number of issues that violate WCAG Level AA. Level AA is the standard recommended level for most websites and the one required for EAA compliance.

Note: An issue can violate both levels, so the numbers may overlap.

Problem Details​

This is the main section of the report, where you see all the issues found organized clearly.

Problem Organization​

Issues are organized in this order:

  1. Critical Problems - First of all
  2. Warnings - After critical ones
  3. Information - At the end

Within each section, issues are grouped by type. For example, all image-related issues are grouped together.

Information for Each Issue​

For each issue you see:

Problem Description​

A clear description of what the problem is and why it's important. This description helps you understand what needs to be fixed.

Severity​

A colored badge indicating the severity of the issue:

  • Critical: Red - Requires immediate attention
  • Warning: Yellow/Orange - Advisable to fix
  • Information: Blue - Suggestion for improvements

WCAG Level​

A badge indicating which WCAG level is violated (A or AA).

Recommendation​

A detailed explanation of how to fix the issue. This is the most important part because it tells you exactly what to do.

References​

Two important references:

  • WCAG: The reference to WCAG standards that this issue violates
  • EAA: The reference to EAA (European Accessibility Act) standards that this issue violates

These references are useful if you need to document compliance or if you want to learn more about the standards.

Technical Details​

Technical information for developers:

  • Selector: The CSS selector that identifies the problematic element on the page. This helps developers find exactly where the issue is in the code.

  • HTML: The HTML code of the problematic element. This shows exactly how the element is structured and helps understand what to modify.

Note: Not all issues have HTML code, it depends on the type of issue.

When There Are No Problems​

If the page has no accessibility issues, you'll see a congratulations message with a green checkmark icon. This means the page is accessible and respects the standards!

Available Functions​

Re-Scan (New Scan)​

The "Scan" button at the top allows you to perform a new scan of the same page. This is useful if:

  • You've fixed some issues and want to verify the improvements
  • You want to update the report with the most recent data
  • The page has been modified and you want to see if there are new issues

Note: This function is only available to Pro and Enterprise users.

When you click "Scan", a new scan is started. Upon completion, you'll be automatically taken to the new report.

Back to Scans​

The button with the back arrow (←) at the top left takes you to the Scans page, where you can see all the scans performed.

Printing the Report​

The report is optimized for printing. You can:

  • Use the browser's print function (Ctrl+P or Cmd+P)
  • Save as PDF from the print window
  • Share the printed report with your team

When printing, unnecessary elements (like navigation buttons) are automatically hidden for better readability.

How to Use the Report​

Here's a recommended workflow for using the report:

  1. Start with critical issues: These are the most important and must be fixed first.

  2. Read the recommendations: Each issue has a recommendation that explains how to fix it. Follow these guidelines.

  3. Use technical details: If you're a developer, use the selector and HTML to find exactly where the issue is in the code.

  4. Check references: If you need to learn more, consult the WCAG and EAA references.

  5. Fix the issues: Modify the page code to fix the issues.

  6. Run a new scan: After fixing the issues, run a new scan to verify they've been resolved correctly.

  7. Repeat for warnings: Once critical issues are fixed, move on to warnings and then information.

Useful Tips​

  1. Focus on critical: Critical issues have the highest priority. Fix them first.

  2. Use groupings: Issues grouped by type help you fix similar issues all together, which is more efficient.

  3. Save the report: If you need to share the report with others or keep it for reference, use the print function to save it as PDF.

  4. Document improvements: Run regular scans and compare reports to see improvements over time.

  5. Share with team: Reports are perfect for sharing with developers, designers, and stakeholders to show what needs to be fixed.

  6. Use references: WCAG and EAA references are useful if you need to document compliance or if you want to learn more about the standards.

Required Permissions​

Some features require specific accounts:

  • Viewing reports: All users (Demo, Pro, Enterprise) can view reports
  • Re-scan: Only Pro and Enterprise can perform new scans from the report page

Demo users can see all reports but cannot perform new scans.

When the Report Doesn't Exist​

If you try to access a report that doesn't exist or has been deleted, you'll see a message informing you that the report was not found. You can click the "Back to scans" button to return to the scans list.

At the bottom of the report you see:

  • The report generation date
  • A link for more information about EAA compliance

This information is useful for documenting when the report was generated and for finding additional resources.