Skip to main content

Issue Detail Page

What is the Issue Detail Page?​

The Issue Detail page shows all specific errors of a problem type. When you click "View All" on the Issues page, you're taken here to see all details, all affected pages, and all code examples.

How to access this page?​

You can access this page in two ways:

  1. From the Issues page: Click the "View All" button on an issue card
  2. Direct link: The URL contains the issue group ID

What you'll find on the Detail Page​

The page is organized into several sections:

  1. Header - Problem information and link to go back
  2. Selector Filter - To filter errors by CSS selector (PRO only)
  3. Errors List - All errors in the group with complete details
  4. Pagination - To navigate between errors if there are many

Page Header​

In the page header you see:

At the top left there's an arrow that allows you to return to the main Issues page.

Problem Information​

  • Title: The problem type (e.g., "missing_alt_image")
  • Description: The complete problem description
  • Severity Badge: Colored badge indicating if it's Critical, Warning, or Info
  • Unique Errors Count: How many unique errors there are (after deduplication)

Scan Button​

Available only for: ENTERPRISE plan

The "Scan" button allows you to perform a new scan of all pages that have this problem. Useful to verify if you've fixed the problem after making changes.

Selector Filter​

Available only for: PRO plan or higher

The selector filter allows you to see only errors that have a specific CSS selector.

How it works​

The CSS selector is the path that identifies where the element is located in the page code. For example:

  • #header img - Images in the header
  • .menu a - Links in the menu
  • form input - Input fields in forms

How to use the filter​

  1. Open the dropdown menu of the filter
  2. Choose a selector from the list
  3. The list updates showing only errors with that selector
  4. See the number of results below the filter
  5. Click "Clear Filter" to see all errors again

Tip: Use the filter when you want to focus on specific errors in a particular part of the site.

Errors List​

The list shows all errors in the group, one per card. Identical errors (same selector and same HTML) are shown only once to avoid duplicates.

Error Card​

Each error is shown in a card with all information:

Card Header:

  • Error number: "Error #1", "Error #2", etc.
  • Severity icon: Colored icon based on severity
  • Severity badge: Critical, Warning, or Info
  • "Excluded" badge: If the error has been excluded, you see a green badge

Information:

  • URL: Link to the page where the error was found (opens in new tab)
  • Scan: Title of the scan the error comes from
  • WCAG Level: The WCAG level of the error (A or AA)

Element:

  • Selector: The CSS selector that identifies the element
  • HTML: The actual HTML code of the problematic element
  • You can scroll the HTML if it's long

Recommendation:

  • An explanation of how to fix this specific error
  • Practical suggestions to fix it

Pagination​

If there are more than 50 errors, you see a pagination bar at the bottom of the page.

How it works​

  • 50 errors per page: Each page shows a maximum of 50 errors
  • Navigation: You can go forward and backward between pages
  • Page numbers: You see up to 5 page numbers at a time
  • Counter: You see "Showing 1-50 of 150 unique errors"

How to use pagination​

  • "Previous" button: Go to the previous page (disabled if you're on the first page)
  • Page numbers: Click a number to go directly to that page
  • "Next" button: Go to the next page (disabled if you're on the last page)

Tip: Pagination resets when you change the filter, so you always start from the first page.

Progress Bar​

When you run a scan (Scan button), you see a fixed progress bar at the bottom of the page.

What it shows:

  • Title: "Scanning pages in progress"
  • Progress: Number of completed scans / total (e.g., "3/10")
  • Bar: Visual bar showing completion percentage
  • Current URL: Which page is currently being scanned

The bar remains visible until all scans are completed.

Automatic Deduplication​

The page automatically removes duplicate errors. If the same error (same selector and same HTML) appears multiple times, it's shown only once.

Why it's useful:

  • Avoids seeing the same error repeated hundreds of times
  • Allows you to focus on unique errors
  • Reduces the number of errors to manage

How it works:

  • Two errors are considered identical if they have:
    • The same CSS selector
    • The same HTML code
  • Only the first error found is shown

Page States​

Loading​

When the page is loading, you see an animated spinner and the message "Loading...". Wait for loading to finish.

No Errors​

If there are no errors (or the filter doesn't show results), you see a message with:

  • Alert icon
  • Title: "No errors found"
  • Description explaining why there are no errors
  • Link to return to the Issues page

Loading Error​

If there's a loading error, the page shows an error message. Try reloading the page.

How to use the Detail Page​

1. See All Details​

This page shows you all details of each error:

  • Where it's located exactly (selector)
  • How it appears in the code (HTML)
  • Which page it was found on
  • How to fix it (recommendation)

2. Use the Filter to Focus​

If there are many errors:

  1. Use the selector filter to see only specific errors
  2. Fix all errors with the same selector together
  3. Remove the filter and move to the next group

3. Verify Fixes​

After making changes:

  1. Click "Scan" to verify if errors have been resolved
  2. Wait for the scan to finish
  3. Check if the number of errors has decreased

4. Navigate Between Pages​

If there are many errors:

  1. Use pagination to see all errors
  2. Fix errors page by page
  3. Return to the Issues page to see overall progress

Tips​

Organization​

  • Start from the first page: Errors are ordered, start from the first
  • Use the filter: If you know an error is in a specific part of the site, use the selector filter
  • Work in groups: Fix all errors with the same selector together

Verification​

  • Scan after fixes: Use the "Scan" button to verify your fixes work
  • Check the number: If the number of unique errors decreases, you're making progress
  • Verify multiple pages: If an error appears on many pages, it might be a systemic issue

Details​

  • Read recommendations: Each error has a specific recommendation on how to fix it
  • Look at HTML: HTML shows you exactly what's in the code
  • Use the selector: The selector tells you where to find the element in the code

Frequently Asked Questions​

Why do I see fewer errors here than on the Issues page?​

The Detail page automatically deduplicates identical errors. If the same error (same selector and HTML) appears on multiple pages, it's shown only once. On the Issues page you see the total number, here you see only unique errors.

What does "Unique Errors" mean?​

"Unique Errors" means errors that are different from each other. If the same error appears 10 times, it's counted as 1 unique error. This helps you understand how many different types of errors you need to fix.

Can I see all errors without pagination?​

No, pagination is necessary when there are more than 50 errors to keep the page fast and manageable. You can navigate between pages using pagination buttons.

Does the selector filter work on all errors?​

Yes, the filter works on all errors in the group, not just those on the current page. When you change the filter, pagination resets and you start from the first page.

What happens if I exclude an error?​

If you exclude an error from the main Issues page, here you'll see an "Excluded" badge on the error. The error will no longer be counted in statistics.

How long does it take to scan all pages?​

It depends on how many pages have the problem. The progress bar shows you progress in real time. Each page is scanned one at a time.

Conclusion​

The Issue Detail page gives you a complete view of all errors of a specific type. Use this page to see all details, filter to focus on specific errors, and verify your fixes with new scans. It's the perfect tool to systematically fix accessibility issues on your site.