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

Question

我在使用 Wave 辅助功能工具时在标题中遇到错误。我的 HTML 在下面（我用它来切换 dark-light 模式与 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 class.

在视觉上隐藏了它

.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

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

顺便说一句，你应该避免 <input> 在 <label> 内部的构造，而使用更常规的 <input> 和 <label> 的构造离彼此很近。前者在多个屏幕 reader 中没有得到很好的支持，因此不鼓励使用。

我的建议是这样的：

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

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

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

Empty form label: A form label is present, but does not contain any content

html

accessibility

例子

最后的笔记