Product: axe-core

Expectation: Elements using the following sr-only CSS should be detected as inapplicable to the color-contrast rule:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0px;
  border: 0px;
  overflow: hidden;
}

Gist containing a full self-contained repro

Actual: Elements with that sr-only styling can fail the color-contrast rule.

Motivation: An Accessibility Insights for Web user reported this as a false positive.

Notes:

As a workaround, we've recommended that the user add a clip: rect(0,0,0,0); property to their sr-only class, similar to Bootstrap's sr-only implementation. This causes axe-core to understand that the element should be ineligible for the color-contrast test.

However, the item is still invisible without the clip property (the combination of other properties is sufficient), so it would be ideal for axe-core to understand that.

This technically caused a false positive, but one that has a straightforward workaround and which is straightforward for a user to "fix" by adding noop color CSS according to the color-contrast instructions, so I'd consider this to be lower priority than most other false positive issues.

axe-core version: 4.2.1
axe-webdriver, extension or other integration version: Accessibility Insights for Web 2.26.1

Browser and Assistive Technology versions: Microsoft Edge Version 90.0.818.66 (Official build) (64-bit), no AT

For Tooling issues:
- Node version: n/a
- Platform:  n/a