标签文字为空

Question

通过WCAG 2（A级）验证检测到此错误。

我处理儿童wordpress主题。我试图用Javascript修复该标签，但WCAG 2仍然突出显示了错误。

你能帮我吗？

屏幕截图1

编辑：这是没有javascript的摘录。 javascript文件已加载到页面末尾。

屏幕截图2

Answer 1

好像该消息来自AChecker。 （有时候，这有助于告诉人们您正在使用哪种辅助功能工具。）

错误不是 not ，它抱怨与没有关联。通过将嵌入有效的内，您的代码结构使用了隐式标签（请参见“ The label element”规范）。

  

label元素表示用户界面中的标题。可以将标题与特定的表单控件（称为标签元素的标签控件）相关联，可以使用for属性，也可以将表单控件放入标签元素本身中。

现在，话虽如此，屏幕阅读器和浏览器曾经（而且可能仍然）存在某种组合，它们不遵守 implicit 标签，并要求您指定{{1 }}属性，但可访问性检查器工具不应将其标记为错误。可以将其标记为手动检查的问题，但这不是错误。

无论如何，回到最初的问题。 Error 188 说标签 itself 没有任何文本。您在上有一个for，这是标签内文本的唯一来源。如果该类具有class="screen-reader-text"或display:none，则可能会导致错误，因为该文本将对所有用户隐藏。但是，如果您的visibility:hidden类仅在视觉上隐藏了文本（类似于What is sr-only in Bootstrap 3?），则屏幕阅读器可以使用该文本，但视力不佳的用户可能看不到该文本。我不确定这是否会导致AChecker将其标记为错误。

Answer 2

您需要添加'aria-label'属性

或

您需要添加

<label for="search-input">Label</label>

并将输入ID设置为搜索输入