When an accessibility testing tool flags a violation, the immediate next question is “Where exactly is this element on the page, and what does its markup look like?” On a content-heavy page with dozens of interactive elements, answering that question manually by searching through the DOM, cross-referencing element IDs, or toggling browser DevTools takes time that adds up quickly across an audit.
The Highlight Code feature in A11yInspect removes that step entirely. With a single click, it visually identifies the flagged element on the rendered page and surfaces the corresponding source code inline. This article explains what the feature does, how it fits into an accessibility audit workflow and why it matters for testers and developers alike.
What Is the Highlight Code Feature?
Highlight Code is a built-in feature of A11yInspect, the accessibility browser extension developed by BarrierBreak. When A11yInspect scans a page and generates a results table of accessibility issues, each issue is listed alongside an interactive ID. Clicking that ID triggers two simultaneous actions:
- Visual highlight on the page: The element that corresponds to the flagged issue is highlighted directly in the browser viewport. You can see exactly where it appears in the page layout without scrolling through a long list of DOM nodes.
- Inline code display: The source code for that element is surfaced alongside the highlight, giving you immediate access to the markup without opening DevTools or performing a manual inspect.
The design is intentionally simple. There is no multi-step process and no configuration required. One click delivers both the visual location and the code.
Why Locating the Element Matters in an Accessibility Audit?
Accessibility violations are not always visually obvious. A missing alt attribute on an image, an incorrect role on a custom interactive element, or an unlabelled <input> field may be invisible to a sighted user but critical for screen reader users and keyboard-only navigation. Identifying these issues in a scan result is one step. Locating them in context is another.
A complex web page can render hundreds of DOM elements like navigational landmarks, repeated link patterns, form controls, dynamically injected content and deeply nested components. When a scan returns 40 or 60 issues, working through each one without a direct visual pointer is inefficient. An auditor must match scan results to elements by cross-referencing element IDs, XPaths, or screenshot coordinates, all of which require context-switching between the tool output and the page itself. Highlight Code eliminates this context-switching. The flagged element is identified visually and its code is presented immediately, keeping the entire triage workflow inside A11yInspect.
How Highlight Code Works Within the A11yInspect Results Table?
A11yInspect runs 600+ accessibility checks across 30 WCAG Success Criteria and returns categorized results: Fails, Validates and Suggestions. Each result is mapped to a specific WCAG conformance level (A, AA) and assigned a severity level to support prioritization.
In the results table, each issue instance is assigned an ID. Clicking that ID activates the Highlight Code function for that specific instance. The element is visually identified in the page rendering and the code is displayed in context.
This works for every category of issue in the results, Fails, Validates and Suggestions, not just outright violations. For Validates, where the automated check has passed but the final determination requires human judgment, being able to see the exact element and its markup is particularly important. The auditor can make an informed call without needing to locate the element separately.
Highlight Code and the Key Code Attribute: Two Sides of the Same Problem
Highlight Code addresses the location problem: where is the element on the page, and what does its source markup look like? A11yInspect's Key Code Attribute feature addresses the specificity problem: which attribute within that markup is the focus of the issue?
These two features are designed to work in tandem. When you click an issue ID in the results table:
- Highlight Code shows you where the element sits in the rendered page and surfaces its code.
- Key Code Attribute shows you which specific HTML attribute or ARIA property within that element is the point of failure.
For example, a WCAG 4.1.2 (Name, Role, Value) violation on a custom button might surface as a Highlight Code pointing to a <div> used as an interactive control, while the Key Code Attribute column identifies aria-label or role as the attribute that requires remediation. Together, they give both the developer and the auditor a complete, actionable picture of each issue.
This combination significantly reduces the time between identifying a violation and being able to remediate it. Developers receive precise information: which element, where it appears and which attribute needs to change.
Practical Benefits for Different Roles
For Accessibility Auditors
Highlight Code speeds up the review process on high-volume pages. When working through a results table with many issues, the ability to instantly locate each element in the page rendering keeps the audit workflow coherent and fast. For Validates and borderline cases, seeing the element in context supports more accurate human judgment.
For Developers
The Highlight Code output provides a direct starting point for remediation. Rather than receiving a list of rule references and locating the relevant code independently, developers can see both the page location and the source markup for each issue. When this is combined with the Key Code Attribute, the developer has attribute-level specificity on what to fix, not just element-level specificity.
For QA Teams
QA teams conducting pre-release accessibility checks benefit from faster triage. Issues can be reviewed, documented and assigned more efficiently when each finding includes a visual location and code reference rather than a description alone.
Highlight Code in the Context of A11yInspect's Broader Feature Set
Highlight Code is one of several features in A11yInspect designed to reduce the manual overhead of accessibility testing. The extension also includes a wide range of accessibility bookmarklets which support manual testing alongside the automated scan. For Pro plan users, each scan can be accompanied by a downloaded screenshot that captures the highlighted issue, enabling efficient documentation and developer handoff without additional tooling.
A11yInspect tests against WCAG 2.1 and 2.2 Success Criteria at conformance levels A and AA. It maps results to Section 508, EN 301 549, GIGW 3.0, and IS 17802. The false positive rate is under 1%, which means the issues surfaced and the elements highlighted are substantive findings rather than noise.
Availability
The Highlight Code feature is available in the A11yInspect Free plan. No login and no credit card is required to access it. It is part of the core testing experience and is available on Chrome, Edge and Firefox. The Pro plan extends the workflow further with a dashboard for scan logs, downloadable screenshots with highlighted issues, a Pause Script feature and an exportable audit report in Excel format. Pro is available with a 30-day free trial.
Conclusion
The time spent locating a flagged element on a page before any remediation work can begin is a consistent source of inefficiency in accessibility audits. A11yInspect's Highlight Code feature addresses this directly. By combining a visual indicator on the rendered page with inline code access in a single click, it removes the need for manual DOM inspection at every step of a scan review.
When used alongside the Key Code Attribute feature, which surfaces the specific HTML attribute or ARIA property relevant to each violation, Highlight Code forms part of a workflow that takes an auditor from issue identification to developer-ready findings without unnecessary detours. For teams working toward WCAG conformance, Section 508 compliance, or any other accessibility standard, this kind of tooling precision has a direct impact on how efficiently audits can be completed and acted upon.