WCAG 2.0（AA 级）- 输入元素错误 - 无代码输入

Question

我对 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>

Answer 1

Check 187: input element has more than one associated label. Repair: Remove or modify the label elements so there is only one associated label for each form control. Error Line 1443, Column 1:

我只能想到两种方法来接收此错误。

您有两个具有相同 for="itemID" 属性的标签。
您正在使用 aria-labelledby 属性并将其指向页面上重复的 id。

您的源代码可能没有这些项目，但生成的 HTML 几乎肯定会有。

Check 185: id attribute is not unique. Repair: Modify the id attribute value so it is unique. Error Line 165, Column 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 以帮助访问。

由于响应式菜单（移动菜单）的插件，它可能会出错，因为很多这些插件重复了菜单结构和 ids，因为它们写得不好。

Answer 2

我可以通过为同一元素插入两个 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 attribute is not unique." 这应该意味着相同的元素出现两次并且会导致相同的错误 (187)。

如果您在页面的多个部分使用相同的插件，就会发生这种情况。

WCAG 2.0（AA 级）- 输入元素错误 - 无代码输入

WCAG 2.0 (Level AA) - Input element error - No input on code

accessibility

opencart-3

wcag2.0