WCAG 2(级别A)验证检测到此错误。
我使用儿童wordpress主题。我尝试使用Javascript修复标签, 但WCAG 2仍然突出显示该错误。
你能帮助我吗 ？
屏幕截图1
编辑：这是没有javascript的摘录。 javascript文件已加载到页面末尾。
截图2
#1
看起来该消息来自AChecker。 (有时, 这有助于告诉人们你正在使用哪种辅助工具。)
该错误不是在抱怨<label>与<input>没有关联。你的代码结构通过将<input>嵌入到有效的<label>内来使用隐式标签(请参见”标签元素”规范)。
label元素表示用户界面中的标题。可以将标题与特定的表单控件(称为标签元素的标签控件)相关联, 可以使用for属性, 也可以将表单控件放入标签元素本身中。
现在, 话虽如此, 过去(仍然可能存在)屏幕阅读器和浏览器的某种组合不支持隐式标签, 并要求你在<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
来源：
https://www.srcmini02.com/63663.html
