WordPress标签文字为空

WCAG 2(级别A)验证检测到此错误。
我使用儿童wordpress主题。我尝试使用Javascript修复标签, 但WCAG 2仍然突出显示该错误。
你能帮助我吗 ?
屏幕截图1

WordPress标签文字为空

文章图片
编辑:这是没有javascript的摘录。 javascript文件已加载到页面末尾。
截图2
WordPress标签文字为空

文章图片
#1 看起来该消息来自AChecker。 (有时, 这有助于告诉人们你正在使用哪种辅助工具。)
该错误不是在抱怨< label> 与< input> 没有关联。你的代码结构通过将< input> 嵌入到有效的< label> 内来使用隐式标签(请参见” 标签元素” 规范)。
label元素表示用户界面中的标题。可以将标题与特定的表单控件(称为标签元素的标签控件)相关联, 可以使用for属性, 也可以将表单控件放入标签元素本身中。
【WordPress标签文字为空】现在, 话虽如此, 过去(仍然可能存在)屏幕阅读器和浏览器的某种组合不支持隐式标签, 并要求你在< label> 上指定for属性, 但是需要可访问性检查器工具不应将其标记为错误。可以将其标记为手动检查的问题, 但这不是错误。
无论如何, 回到原来的问题。错误188表示标签本身没有任何文本。你在< span> 上有一个class =” screen-reader-text” , 这是标签内唯一的文本源。如果该类的display:none或visible:hidden隐藏, 则可能会导致错误, 因为所有用户都将隐藏该文本。但是, 如果你的屏幕阅读器文本类仅在视觉上隐藏了文本(类似于Bootstrap 3中的什么是sr-only?), 那么文本将可供屏幕阅读器使用, 但视力不佳的用户可能看不到。我不确定这是否会导致AChecker将其标记为错误。
#2 你需要添加” aria-label” 属性
Or
你需要添加
< label for="search-input"> Label< /label>

并将输入id设置为search-input

    推荐阅读