标签文本为空答案

【问题标题】：Label text is empty标签文本为空
【发布时间】：2023-04-07 12:42:01
【问题描述】：

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

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

你能帮帮我吗？

屏幕截图 #1

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

截图 #2

【问题讨论】：

标签： javascript html wordpress wordpress-theming wcag

【解决方案1】：

看起来该消息来自AChecker。（有时告诉人们您使用的是什么无障碍工具会有所帮助。）

错误是不是抱怨没有与关联。您的代码结构通过在中嵌入来使用 implicit 标签，这是有效的（参见“The label element”规范）。

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

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

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

【讨论】：

【解决方案2】：

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

或者

你需要添加

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

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

【讨论】：

嗨特里斯坦，谢谢你的回答。这没用。但也许是因为 javascript 加载。我不能直接编辑文件，我必须通过 Javascript，因为我使用的是 wordpress 子主题。我不知道该怎么办，我有一个考试，WCAG 的验证是必须的
嗯，你能添加一个生成的 HTML 的 sn-p 吗？在你的脚本之前添加标签
我编辑我的帖子以添加不带 javascript 的 HTML 的 img

【解决方案3】：

在我的例子中，输入上方没有标签（我只使用占位符字段）并且验证 WCAG 2.0（AA 级）失败。经过多次尝试，我发现在输入中添加标题字段可以解决问题。

【讨论】：