Accessibility Outliner - Highlight WCAG Issues

Description

Outline accessibility issues directly on the page: empty headings, empty links, small targets, and duplicate IDs. See exactly where accessibility issues are, not just that they exist. Audit tools and reports are good at telling you a problem exists - "4 headings are empty", "3 links have no accessible name" - but often not where on the page it actually is. For content editors, developers, and QA reviewers doing the remediation work, that is the hard part. Additional screenshots and line numbers are often required to point someone at the right element. This extension aims to close the gap for a number of key issues. Click the toolbar icon, pick a check, and the matching issues are outlined directly on the page you are viewing. No code reading, no DevTools, no complex audit tool to learn. You see each issue in context, on the element itself, so you know precisely what to fix and where. The tool grew out of a number of helpful bookmarklets - really useful, but not something you can easily hand to a content editor or client. The extension packages the same idea into something anyone on the team can install and use straight away. It runs four focused, one-click checks: - Empty headings - flags h1 to h6 elements that contain no visible text. - Empty links - flags links with no accessible name (no text, label, or image alt text), which screen reader users would hear as meaningless. - Duplicate IDs - flags elements that share an id value with another element on the page. - Target sizes - flags interactive controls smaller than 24x24 px, or whose centres overlap, per WCAG 2.5.8. Each issue is drawn as a coloured overlay directly on the page, and issues are also listed in the browser console, allowing developers to jump straight to the exact element in DevTools or their code. How to use it: 1. Open the page you want to check and click the Accessibility Outliner toolbar icon. 2. Select a check, and it outlines the matching issues on the page and shows how many it found. 3. Locate the highlighted element, then fix it in your CMS or source file. 4. Click "Clear results" to remove the overlays, or pick another check. Built to bridge the gap between an audit finding and the actual fix - a fast way to locate and confirm issues during remediation, not a replacement for a full WCAG audit. Privacy: Accessibility Outliner reads the current page only when you click a check, and only to find and outline these issues. It collects no personal data, makes no network requests, and sends nothing off your device.

Details & SEO