WCAG 2.0(AA级-输入元素错误-代码上无输入

问题描述 投票:1回答:1

我对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>
accessibility opencart-3 wcag2.0
1个回答
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以帮助辅助功能。

[由于响应式菜单的插件(移动菜单)而可能会出错,因为许多这样的插件复制了菜单结构和id,因为它们写得不好。

© www.soinside.com 2019 - 2024. All rights reserved.