Shared Components

Most websites are built from templates: the same header, navigation, footer and cookie banner appear on every page. When one of these elements has an accessibility problem, a scan reports it once for every page it appears on, so a single broken header link can look like hundreds of separate issues.

Shared Components groups those findings together. It lists every element that failed the same check on more than one page in a scan run, so you can see which fixes remove the most issues across the site. Fix the element once in your codebase and it's fixed on every page it appears on.

Shared components are worked out automatically when a scan run finishes, for both Desktop and Mobile results.

Where you see it

Overview

The Overview tab of the Scan Results page shows two shared-component figures next to the overall statistics:

• Shared elements - the number of elements found failing on more than one page
• Fixable at the component level - the share of the run's issues those elements account for

Below the severity breakdown, the Fix once, fix everywhere panel starts with that share (for example "62% of all issues") and shows how many of the run's issues the shared elements account for. It then lists the three costliest elements, with the first one expanded. View all shared components opens the full list.

Shared components tab

The Shared components tab lists every shared element in the run and lets you narrow the list down:

• Search - by selector or issue name
• Severity - Critical, High, Medium and Low; you can select more than one
• Engine - All engines, Static (the standard engine), or Deep Scan

When a filter is applied, each element shows only its matching issues, and its counts and percentages are recalculated to match. For example, filtering to Critical shows only an element's critical issues and the pages they appear on, rather than its full totals.

Reading the list

Each row in the list is one element, not one issue. Elements are ordered worst first: by the number of issues fixing them would remove, then by how many pages they appear on, then by severity.

Each row shows:

• An icon for the kind of element (link, button, image, form field, heading, navigation region, and so on)
• The element itself, with the selector it sits inside shown underneath - #footer form input reads as input, inside #footer form
• Pages affected, by severity - a circle for each severity found on the element, showing how many pages have an issue of that severity. A page with both a critical and a low issue counts in both circles, so the circles can add up to more than the total number of pages.
• The number of issue types found on the element

Findings that belong to the whole document rather than a specific element, such as a missing page language, are listed as Whole page. You can't fix them in a component, but they're still listed because they're the same defect repeating across the site.

Expanded element

Expanding a row shows:

• The full CSS selector, with a Copy selector action
• Pages affected - the number of pages the element has at least one issue on
• Issues here - the total occurrences across all of the element's issues, i.e. what fixing it removes
• Share of run - those occurrences as a share of all issues in the run
• Issue types - how many different checks the element fails
• Issues found on this component - each check the element fails, with its severity, WCAG level, description, the number of occurrences and pages, and a link to guidance on fixing it. Issues found by Deep Scan carry the Deep Scan badge.

From the expanded row, Open an affected page takes you to the URL Scan Details for one of the pages the element appears on. The Development Assistant and Open in Agora actions open that page live with the element highlighted. These actions aren't offered for Deep Scan findings or Whole page findings, because there's no single element to highlight.

Things to know

• Percentages are always taken against the whole run. "Share of run" and "Fixable at the component level" compare against every issue the run found, not just the elements currently listed.
• Only the costliest elements are kept for very large runs. If a run found more shared elements than are listed, the panel says so, showing how many it lists out of how many it found.
• Counts can be a minimum. If some of a run's results couldn't be read into the analysis, or the run produced more distinct elements than the analysis tracks, a note below the headline explains that the figures may be undercounted.
• Issue names match the rest of the report. Shared Components uses the same issue names as the URL Scan Details page, so the same issue has the same name in both places.

When no shared components are shown

Message	Meaning
Working out shared components	The scan is still running. The analysis finishes when the scan does; pages already scanned are available in the Pages tab.
No shared components found	No element failed the same check on more than one page, so every issue in the run is specific to its page. At least two pages need to scan successfully for elements to be compared.
Not analysed for this run	The run finished before Shared Components was available. Older runs aren't analysed retroactively; the next scan of the configuration will include it.
Could not load shared components	The analysis couldn't be loaded. The rest of the report is unaffected; reload the page to try again.

When a run hasn't been analysed, the Shared elements and Fixable at the component level figures on the Overview show a dash rather than zero.