dequelabs
Decorative images should be ignored by the region rule
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&random=1594174352357287200&url=https://my-page.url/&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:
- Exclude any images with
height="1" width="1"(or withalt="", or both) from theregionrule. - 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.
Allow users to pass "ignorable" rule/element pairings to axe-core:
Doesn't the exclude context property work for your use-case? https://github.com/dequelabs/axe-core/blob/develop/doc/context.md#exclude-elements-from-test
@professorplumb Unfortunately there is no way to tell axe-core to ignore a specific violation, nor is there a good way for axe-core to detect the purpose of these tracking pixels from the markup alone to know to exclude them from the rule itself.
But as @sorin-davidoi has suggested, one way you can have axe-core not report the issue is to use the exclude property of the context object and that will ignore the element completely from the run.
You shouldn't have to exclude these elements. Axe-core is in error in failing these under the region rule. I think the real issue here is that decorative images aren't ignored by the region rule.
Thanks @WilcoFiers - having the region rule ignore alt="" images (or perhaps, more generally, anything which is not part of the accessibility tree) outside of landmarks sounds like a good idea.
@straker @sorin-davidoi appreciate the reference to the exclude property. I'm aware of it, but AFAICT it can only exclude an element and its subtree from all rules, not a specific rule. The latter is what I was asking for, and it looks like axe doesn't currently support it. The fix @WilcoFiers is proposing will solve the problem which prompted this ticket though.
