为什么我得到的是 "Form elements do not have associated labels"，即使有与输入关联的标签？

Question

我有这个代码这个反应代码

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>
)

生成此 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>

标签的 for 属性等于输入的 ID。但是，在 Lighthouse 中，我仍然看到“表单元素没有关联的标签”警告。为什么会这样？

Answer 1

<label> 存在并正确链接到 <input>，但它完全是空的。因此，就像它不存在一样。

您的标签必须包含一些文本内容，以便屏幕阅读器在输入时可以说些什么。如果您不希望该文本显示在屏幕上，您可以使用视觉隐藏文本技术将其发送到屏幕外。或者，您可以在输入上添加一个属性 aria-label，出于同样的原因，它也必须是 non-empty。

为什么我得到的是 "Form elements do not have associated labels"，即使有与输入关联的标签？

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

html

accessibility

lighthouse