时间戳

首页 > 解决方案 > WCAG 2.0（AA 级） - 输入元素错误 - 没有输入代码

accessibility - WCAG 2.0（AA 级） - 输入元素错误 - 没有输入代码

问题描述

我对 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 解析（一）

检查 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>

标签： accessibilityopencart-3wcag2.0

解决方案

检查 187：输入元素具有多个关联标签。修复：删除或修改标签元素，使每个表单控件只有一个关联标签。错误行 1443，第 1 列：

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

  1. 您有两个具有相同for="itemID"属性的标签。
  2. 您正在使用该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以帮助可访问性。

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

推荐阅读