Vesper Toolkit

By default, 🦇 AC Scan analyses the whole page. That is often too much: on a real site you get hundreds of violations, most of them from the header, the footer, or a third party widget you are not looking at. A targeted scan narrows the analysis to one area.

Method 1: with the selector picker (recommended)

1. Click the 🦇 CSS Selector bookmarklet
2. Hover the page: the area under your cursor is highlighted and its selector shown live
3. Click the area you want, and the selector is copied to your clipboard (Esc to cancel)
4. Click 🦇 AC Targeted Scan and paste it into the prompt

Method 2: via the inspector. Cmd+Option+I on macOS, Ctrl+Shift+I on Windows, Elements tab, right-click the element › Copy › Copy selector. Useful when the element is hard to hover (a menu that closes, an element under an overlay).

Method 3: in the console, for full control

axe.run(document.querySelector('#content'))
  .then(r => console.log(r.violations));

axe-core must already be loaded on the page, and clicking either scan bookmarklet first takes care of that.

The parent / child trap. axe-core analyses the targeted element and all of its descendants. Two consequences:

• Too high = noise. Targeting main or body is practically a full scan. Go down to the component's real container.
• Too low = false negatives. Some rules need the parent context. Targeting a lone <li> makes it impossible to check that it sits in a <ul>; targeting a <td> hides its table headers; targeting a single field hides the missing <fieldset>. Contrast depends on the inherited background, so out of context it can be computed wrong.

The right granularity is almost always the component's standalone container: the whole <nav> rather than one link, the whole <form> rather than one field, the whole <table> rather than one cell.

Scanning every element of one kind. The targeted scan prompt only accepts one element (the first match). To cover every occurrence of a selector, use the console:

axe.run({ include: [['.card']] })
  .then(r => console.log(r.violations));

That analyses all the cards on the page in one pass. Conversely, to scan the whole page except a noisy area (cookie banner, chat widget):

axe.run({ exclude: [['#cookie-banner'], ['#chat-widget']] })
  .then(r => console.log(r.violations));

Either way, copy the object from the console (right-click the result › Copy object) and paste it into the Scan Viewer.