我对WCAG 2.0(AA级)有一个奇怪的问题。下面的错误
3.3输入帮助:帮助用户避免和纠正错误。
成功标准3.3.2标签或说明(A)
检查187:输入元素具有多个相关标签。修复:删除或修改标签元素,以便每个表单控件只有一个关联的标签。错误行1443,列1:
<body>
<p name="gl_path" id="gl_path" class="hidden"><span id="thme_path">zemez1029</span></p>
<di ...()
4.1兼容:最大化与当前和将来的用户代理(包括辅助技术)的兼容性。
成功标准4.1.1解析(A)
检查185:id属性不是唯一的。修复:修改id属性值,使其唯一。错误线165,列1:
<body>
<p name="gl_path" id="gl_path" class="hidden"><span id="thme_path">zemez1029</span></p>
<di ...(search)
这是出现错误的地方。没有输入或标签,我不知道该怎么做才能解决它]
<body>
<p id="gl_path" class="hidden">{{ theme_path }}</p>
<div id="page">
<div id="page-preloader" class="visible">
<div class="preloader">
<div class="squares">
</div>
</div>
</div>
<div class="ie-warning">
<a href="//windows.microsoft.com/en-us/internet-explorer/download-ie">
<img src="catalog/view/theme/{{ theme_path }}/image/warning_bar_0000_us.jpg" height="75" width="1170" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."/>
</a>
</div>
<header>
<div class="top-line">
{{ header_nav }}
</div>
<div class="mid-line">
{{ header_top }}
</div>
{% if navigation %}
<div id="stuck" class="navigation"><!-- -->
<div class="container">
{{ navigation }}
</div>
</div>
{% endif %}
</header>
检查187:输入元素具有多个相关标签。修理:删除或修改标签元素,以便仅关联一个每个表单控件的标签。错误行1443,列1:
我只能想到两种方式来接收此错误。
for="itemID"
属性的标签。aria-labelledby
属性,并已将其指向页面上重复的id
。您的源代码可能没有这些项目,但是几乎可以肯定会生成HTML。
检查185:id属性不是唯一的。修复:修改id属性价值,因此是独一无二的。错误线165,列1:
此错误不言自明,相同的id
在生成的HTML中重复两次。
可能是您的可访问性检查器为您提供了不正确的行号和列号,所以请不要依赖于这些作为参考(如果您通过JavaScript动态加载了内容,则可能会发生这种情况。)>
鉴于第一个错误,我猜您有一个元素具有aria-labelledby
属性,该属性指向重复的id
,从而导致第二个错误。
我也想这是通过JavaScript动态添加的,以便您不会早发现它,因此请使用inspect
右键单击选项查看不同的项目,直到找到重复的id
。找到它后,请查看id
文本是否在DOM中重复3次(重复ID两次,aria-labelledby
属性一次。)
所以我希望您能看到类似的内容
考虑这一点之后,最可能的原因是您的主题添加了电子邮件注册或搜索框。<div id="a1"></div> .... <p id="a1"></p> .... <input aria-labelledby="a1"/>
编辑
搜索框很可能是罪魁祸首,因为大多数搜索框没有标签,并且您的主题正在添加aria-labelledby
以帮助辅助功能。
[由于响应式菜单的插件(移动菜单)而可能会出错,因为许多这样的插件复制了菜单结构和id
,因为它们写得不好。