CODEWITHSUNDEEP
htmlaccessibilitylighthouse
ilrock
ilrock

Reputation: 593

Why am I getting "Form elements do not have associated labels" even though there's a label associated with the input?

I have this code this react code

const Icon = styled.div`...`
const ToggleInput = styled.input`...`
const Lines = styled.label`...`
const Line = styled.div`...`

return (
  <Icon>
    <ToggleInput
      id="NavigationMenuToggler"
      name="NavigationMenuToggler"
      role="button"
      aria-controls={DOMConfig.aria.mobileMenu}
      type="checkbox" />
    <Lines for="NavigationMenuToggler" aria-controls="MobileNavigationMenu">
      <Line />
      <Line />
      <Line />
    </Lines>
  </Icon>
)

which generates this HTML

<div>
  <input type="checkbox" id="NavigationMenuToggler" name="NavigationMenuToggler" role="button" aria-controls="MobileNavigationMenu" class="sc-jffIyK kktnkO">
  <label for="NavigationMenuToggler" aria-controls="MobileNavigationMenu" class="sc-gSYCTC eRjJOo"></label>
</div>

The label's for attribute is equal to the input's id. In lighthouse, however, I'm still seeing the "Form elements do not have associated labels" warning. Why is this happening?

Upvotes: 1

Views: 10406

Answers (1)

QuentinC
QuentinC

Reputation: 14882

The <label> is present and is correctly linked to the <input>, but it is completely empty. As a consequence, it is like if it was not present.

Your label must have some text content, so that screen readers can say something when landing on the input. If you don't want that text to be displayed on screen, you can send it off screen, by using the visually hidden text technique. Alternatively, you can add a an attribute aria-label on the input, which must also be non-empty for the same reason.

Upvotes: 3

Related Questions