Product

axe-core

Question

Like many website operators, we use "marketing pixels" to track page hits and conversions. These are usually img tags with a height and width of 1 and a src URL which points to a marketing partner's site and through which affiliate metrics are tracked.

These might look something like

<img src="https://marketing.partner.com/path/to/tracking/script/123456789/?identifier=gobbledygook&amp;random=1594174352357287200&amp;url=https://my-page.url/&amp;other-identifier=asdfjkl" height="1" width="1" alt="" />

Since they're often created by a third-party script, the script usually auto-appends them to the body tag. Because they're not inside a landmark region, they're called out by axe-core's region rule.

My question is: is there any way to get axe-core to ignore these pixels being outside a landmark region? The purpose of the rule - to have all consumable content inside landmark regions for screen reader navigation - doesn't apply, since these pixels aren't intended to be viewed by any users at all. (Most have alt="" to cause screen readers to ignore them.)

I could see a few ways to update axe-core to accommodate this:

1. Exclude any images with height="1" width="1" (or with alt="", or both) from the region rule.
2. Allow users to pass "ignorable" rule/element pairings to axe-core: the above could be ignored by something like ignoreIfMatches: [{ rule: 'region', elementRegex: '/img src.*height="1" width="1".*\/>/' }].

I'm aware that we can also fix these violations by appending the pixel to e.g. the end of the main element instead of the body. We don't always control the script which adds them, though, and we'd love to be able to ignore these in our accessibility audits.