空表单标签：存在表单标签，但不包含任何内容

Question

我在使用 Wave 辅助工具时收到标题中的错误。我的 HTML 如下（我用它通过 JS 切换暗光模式）。

<span class="theme-switch-wrapper">
       <label class="theme-switch" for="checkbox">
         <input type="checkbox" id="checkbox" />
         <span class="slider round"></span>
       </label>
     </span>

我该如何解决这个问题？

Answer 1

因此您的标签中需要一些可用作辅助技术文本的文本。

目前您有 HTML 节点，但没有文本内容。

解决此问题的一种方法是使用视觉隐藏文本，辅助技术可以访问该文本，但在屏幕上不可见。

示例

在下面的示例中，我添加了一个额外的范围，其中包含标签的文本。然后我使用

visually-hidden

类将其隐藏起来。

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<span class="theme-switch-wrapper">
       <label class="theme-switch" for="checkbox">
         <input type="checkbox" id="checkbox" />
         <span class="slider round"></span>
         <span class="visually-hidden">Label for the input</span>
       </label>
     </span>

最后注意事项

您需要考虑的不仅仅是使用辅助技术的人。可见标签可以帮助每个人，特别是那些有认知障碍或准确性问题的人（您可以单击标签，它将集中与其相关的输入）。

我建议稍微重新设计，以便每个人都可以看到标签文本，上面提供的解决方案是如果您受到限制并且不能（不是“不想”！）对设计进行这样的调整。

Answer 2

错误相当明显：标签没有文本内容，因此无法为复选框指定可访问的名称。 结果是屏幕阅读器用户将不知道该复选框的用途。

顺便说一句，您应该避免

<input>

在

<label>

内部的构造，而使用更传统的

<input>

和

<label>

彼此靠近的构造。 前者没有得到一些屏幕阅读器的良好支持，因此不鼓励使用。

我的建议应该是这样的：

       <label class="theme-switch" for="checkbox">
Enable dark mode
</label>
         <input type="checkbox" id="checkbox" />
         <span class="slider round"></span>

如果您不希望文本“启用暗模式”有效地出现在屏幕上，您可以使用视觉隐藏文本技术。