Axe-core: Browser extension: axe is ignoring hidden labels for input fields even when it should acknowledge them

[chirag64]

There are common instances where we often require labels of input fields to be hidden (e.g. Search box because it already has a search icon in it).

As per this W3C article, the recommended way to achieve this is to add the below CSS code to the label:

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

But even after implementing this, aXe still throws an error for the field saying Form elements must have labels.

Here is a working demo of the same: https://jsfiddle.net/xk2vaq6f/1/embedded/result

[Volker-E]

Same issue at https://wikimediafoundation.org/ on element input#wmf-subscribe-input-email. First idea was that clip: rect( 1px 1px 1px 1px ) would be needed to not count as 'hidden'. But changing didn't resolve error output.

[chirag64]

Same issue at https://wikimediafoundation.org/ on element input#wmf-subscribe-input-email. First idea was that clip: rect( 1px 1px 1px 1px ) would be needed to not count as 'hidden'. But changing didn't resolve error output.

Right, clipping does seem to be the problem. Even if you use large values like 100px with it, it does not resolve the issue, which means axe does not bother checking for its values.

[WilcoFiers]

Interestingly, that's the exact same bug I reported at almost the same time as you. #1177. I'll close that one as a duplicate.

[chirag64]

Have submitted a PR for this. Please let me know if I've missed something as per project guidelines, I'll happily fix it

[chirag64]

Any idea when this fix will be available in the stable versions of the Chrome & Firefox extensions? We've a defect open on our system that has a dependency on this. 😓

[calder12]

This is still an issue, Using Lighthouse v4 shows elements using the CSS in the initial report as "Form element has explicit that is hidden" Using Lighthouse v 3.2.0 (which uses axe-core 3.0.0 beta) correctly identifies the labels.

Any idea on a resolution time for this?

[nolanlawson]

This still appears to be happening in axe Chrome extension v3.7.0. The <label> I'm using has the following styles:

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