javascript - 标签文本为空

Question

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

我使用儿童 wordpress 主题。我尝试使用 Javascript 修复标签，但 WCAG 2 仍然突出显示错误。

你能帮助我吗 ？

截图#1

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

截图#2

标签： javascripthtmlwordpresswordpress-themingwcag

Answer 1

看起来该消息来自AChecker。（有时它有助于告诉人们您正在使用什么可访问性工具。）

该错误不是抱怨 <label> 与 <input> 没有关联。您的代码结构通过在 <label> 中嵌入 <input>来使用隐式标签，这是有效的（请参阅“标签元素”规范）。

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

现在，话虽如此，曾经（并且可能仍然存在）屏幕阅读器和浏览器的某种组合不支持隐式标签并要求您for在 <label> 上指定属性，但可访问性检查工具应该不要将其标记为错误。它可以将其标记为手动检查的问题，但这不是错误。

无论如何，回到最初的问题。 错误 188表示标签本身没有任何文本。您有class="screen-reader-text"一个 <span> ，它是标签内唯一的文本来源。如果该类具有display:noneor visibility:hidden，则可能会导致错误，因为该文本将对所有用户隐藏。但是，如果您的screen-reader-text课程只是在视觉上隐藏了文本（类似于Bootstrap 3 中的 What is sr-only？），那么屏幕阅读器可以使用文本，但有视力的用户可能看不到该文本。我不确定这是否会导致 AChecker 错误地标记它。