Hidden form label: failure message not clearly identifying the problem

[ithinkihaveacat]

axe incorrectly reports that an element within the following HTML does not have a label (when embedded within a larger HTML file):

        <form class="search" action="/" data-gp-element="search">
          <label class="gp-offline-disable" for="s">Search</label>
          <input class="gp-offline-disable" type="search" name="s" id="s" placeholder="Search" value="">
          <button type="submit">Go</button>
        </form>

The input is correctly detected if the entire HTML file is as above; it's only a problem if embedded within a larger file.

To reproduce, first load https://cdn.rawgit.com/ithinkihaveacat/8577d6d00eb08f48b4a6e3fd015c379d/raw/f943193a01bff03ea7df37b9bf4ef206d9f2486c/index.html, then paste the following in the JS console to run the accessibility tests:

function loadScript(src) {
  return new Promise(resolve => {
    const e = document.createElement("script");
    e.src = src;
    e.onload = resolve; 
    document.head.appendChild(e);
  });
}

loadScript("https://unpkg.com/axe-core/axe.min.js").then(() => {;
  axe.a11yCheck(document, r => console.log(r.violations[2]));
});

Actual output:

A Form elements must have labels error on the element <input class="gp-offline-disable" type="search" name="s" id="s" placeholder="Search" value="">.

Expected output:

No error report (on this element; there are other accessibility errors in the HTML).

[paulirish]

Aye. this was discovered downstream via Lighthouse.

Looking at the payload, it's not clear which of the label checks this is failing with:

I'm seeing empty relatedNodes arrays for all 5 of the label checks.

[trav-is]

aXe is correctly calling this out due to display: none; (some screen readers respect display:none; ,visibility:hidden, etc)

[ithinkihaveacat]

Interesting, yes I can confirm setting display: block eliminates the warning, thanks!

function loadScript(src) {
  return new Promise(resolve => {
    const e = document.createElement("script");
    e.src = src;
    e.onload = resolve; 
    document.head.appendChild(e);
  });
}

document.querySelector("*[for='s']").style.display = "block";

loadScript("https://unpkg.com/axe-core/axe.min.js").then(() => {;
  axe.a11yCheck(document, console.log.bind(console));
});

[paulirish]

I think that it'd be slightly more clear if the error message indicated the label is hidden.

[dylanb]

@paulirish that is a valid point, I think we could improve this.

Note to implementor: we would probably want to create a separate "fail" check that looks for a hidden explicit label and flags this while simultaneously changing the explicit label check to allow hidden labels to pass

[hcaprette]

@dylanb I agree that it would help if the error message indicated that the label is hidden. But, why should a hidden label pass an accessibility check? Form labels are implemented to help not only people who can't see, using screen readers, but for people with mobility impairments. From what I understand, the form label increases the area in which someone can click to move the cursor insertion into the input area. That is, if I click on the label text, it will move my cursor into the input.

[dylanb]

@hcaprette you are right it should not. What I meant is that it would be a good additional piece of information to expose to let the developer know that the label exists but is failing because it is hidden using display:none

[marcysutton]

I just tested this and the issue is no longer occurring, so I think we can close it without any changes. Let us know if it still persists.

[dylanb]

How did you test this?

[marcysutton]

I took the HTML snippet in this issue and ran aXe against it. https://s.codepen.io/marcysutton/debug/aYJpyL

[dylanb]

Add this code to the CSS section

label.gp-offline-disable {
  display:none;
}

[marcysutton]

Ah, you're right. I botched that one! We talked about one part of that being fixed, but the messaging is still confusing.