Search code examples
accessibilityopencart-3wcag2.0

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

i have a strange problem with WCAG 2.0 (Level AA). The error below

3.3 Input Assistance: Help users avoid and correct mistakes.

Success Criteria 3.3.2 Labels or Instructions (A)

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:

<body>
    <p name="gl_path" id="gl_path" class="hidden"><span id="thme_path">zemez1029</span></p>
    <di ...()

4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

Success Criteria 4.1.1 Parsing (A)

Check 185: id attribute is not unique. Repair: Modify the id attribute value so it is unique. Error Line 165, Column 1:

<body>
    <p name="gl_path" id="gl_path" class="hidden"><span id="thme_path">zemez1029</span></p>
    <di ...(search)

This is the point where the error appear. There is no input or label and i dont understand whto to do to fix it

<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>
Solution

  • 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:

    There are only two ways I can think of to receive this error.

    1. You have two labels with the same for="itemID" attribute.
    2. You are using the aria-labelledby attribute and have pointed that to an id that is duplicated on the page.

    Your source code may not have these items but the generated HTML almost certainly will.

    Check 185: id attribute is not unique. Repair: Modify the id attribute value so it is unique. Error Line 165, Column 1:

    This error is self explanatory, the same id is repeated twice within your generated HTML.

    It could be that your accessibility checker is giving you incorrect line numbers and column numbers so don't rely on those for reference (it tends to happen if you have dynamically loaded content via JavaScript).

    Given the first error I would guess that you have an element that has the aria-labelledby attribute that is pointing to the id that is duplicated causing the second error.

    I would also guess that this is being added dynamically via JavaScript for you to not have spotted it sooner so use the inspect right-click option to view different items until you find the duplicated id. Once you have found it see if the id text is repeated 3 times in the DOM (twice for the duplicate ID and once for the aria-labelledby attribute.)

    So I would expect you to see something along the lines of 

    <div id="a1"></div>
....
<p id="a1"></p>
....
<input aria-labelledby="a1"/>

    EDIT After thinking about this the most likely cause is either an email sign-up or search box added by your theme.

    A search box is the most likely be the culprit as most search boxes do not have labels and your theme is adding a aria-labelledby to aid accessibility.

    It is likely going wrong because of a plugin for a responsive menu (a mobile menu) as a lot of these plugins duplicate the menu structure and ids as they are not well written.