WCAG2.0(AA级)-输入元素错误-没有代码输入
WCAG2.0(AA级)有一个奇怪的问题。下面的错误
3.3输入协助:帮助用户避免和纠正错误。
成功标准3.3.2标签或说明(A)
检查187:输入元素有多个相关联的标签。修复:删除或修改label元素，以便每个窗体控件只有一个关联的标签。错误第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>回答 2
Stack Overflow用户
发布于 2019-12-27 05:54:21
检查187:输入元素有多个相关联的标签。修复:删除或修改label元素，以便每个窗体控件只有一个关联的标签。错误第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的，因为他们不是很好的编写。
Stack Overflow用户
发布于 2019-12-28 08:09:38
我可以通过为同一个元素插入两个label来再现相同的错误(在您使用的同一个工具中)：
<!DOCTYPE html>
<html lang="en">
<head><title>ok</title>
</head>
<body>
<label for="input_id">say</label>
<label for="input_id">say</label>
<input id="input_id" value="text" type="text" />
</body>
</html>在这种情况下，您必须删除第二个<label>
您还必须检查是否有错误"Check 185: id属性不唯一“。这意味着同一元素出现两次，这将导致相同的错误(187)。
如果您在页面的多个部分中有相同的插件，就会发生这种情况。
https://stackoverflow.com/questions/59490259
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号