表单元素没有关联标签，但它是一个 MUI 主题开关

Question

我的页面上有一个主题切换（从浅到深），使用 Material UI 切换。我从 Lighthouse 收到一个错误，指出它需要一个标签，但如果我制作一个文本标签，它将影响设计并使它变得更糟。有什么解决办法吗？

此外，这是来自 Lighthouse 的错误

Answer 1

在 Switch 中添加一个 aria-label:

<Switch
  checked = {checked}
  onChange = {handleChange}
  inputProps = {{ 'aria-label': 'theme' }}
/>

您也可以在 inputProps 中使用其他属性（例如 aria-labelledby、title）。

Lighthouse 检查的类别之一是辅助功能。当像您的 Switch 这样的某些元素没有可访问的名称时，可以使用 aria-label 为元素提供可访问的名称。

Form elements do not have associated labels, but it is a MUI theme switch