为什么我获得“形式元素没有关联的标签”。即使在那里与输入相关联？

Question

我有此代码此React代码

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>

属性标签的等于输入的ID。但是，在灯塔中，我仍然看到“形式元素没有关联的标签”警告。为什么会发生这种情况？

Answer 1

存在＆lt; label＆gt;，并正确链接到＆lt; input＆gt;，但完全为空。
结果，就像不存在一样。

您的标签必须具有一些文本内容，以便屏幕读取器在降落在输入上时可以说些什么。
如果您不希望将该文本显示在屏幕上，则可以使用视觉隐藏的文本技术将其从屏幕上发送。
另外，您可以在输入上添加一个属性ARIA-LABEL，这也必须出于相同的原因也是非空的。