Audit accessibility and layout while you review
The widget checks the page it is reviewing — missing alt text, unnamed controls, unlabelled fields, empty headings, tiny tap targets and horizontal overflow — and filters the element tree down to what is broken.
On this page
Accessibility work usually happens in a separate tool, on a separate day, against a separate report. Pogpin runs the audit inside the review you are already doing: the same element tree, the same pins, the same branch.
Filter the tree down to what is broken
The Elements dock has a filter row above the tree:
| Filter | Shows |
|---|---|
| All | the whole DOM |
| Changed | only elements this branch touched |
| Issues | everything with a finding |
| A11y | accessibility findings only |
| Layout | layout findings only |
Flagged rows carry a warning marker, and the panel steps between them with Previous finding / Next finding, so an audit is a walk through a short list rather than a hunt.
What it looks for
Six checks, each phrased as the problem rather than a rule number:
- Image has no alt attribute
- Interactive element has no accessible name
- Form control has no accessible label
- Heading is empty
- Interactive target is smaller than 24 × 24 px
- Element causes horizontal overflow
The last one is the reason a page scrolls sideways on a phone, and it is usually one element — the filter finds it in seconds instead of by bisecting the layout.
Contrast is checked as you edit
Colour is audited at the moment you change it, not afterwards. Recolour text in a visual branch and the panel answers inline: Contrast 3.1:1 — below the 4.5:1 this text size needs. The threshold follows the text size, so large display type is held to 3:1 and body copy to 4.5:1.
Two layout warnings work the same way while you edit:
- The content no longer fits this element
- This element now sticks out past the page
From finding to fix
A finding is a starting point, not a ticket. Two useful endings:
- Pin it. Switch to comment mode and drop a pin on the element — the pin carries the URL, the selector, the browser and the viewport, so whoever picks it up can reproduce it.
- Fix it in the branch. Give the control its accessible name, set the alt text, enlarge the tap target — then hand the diff over as CSS or as an agent prompt. See edit the live page with visual branches.
Make it a habit
Run the Issues filter once before you call a page done, and again after a round of visual changes — a spacing edit is the most common way a tap target quietly drops under 24 × 24 px.