• Accessibility is becoming a major issue. In states like California, law firms are exploiting any accessibility errors found using tools like WAVE (https://wave.webaim.org/) to check website pages for ADA Accessibility errors on pages and then filing lawsuits.

    One error I cannot fix is in the WPC Frequently Bought Together Plugin. Specifically, when displaying on the front end, usability tools provide an error for “Missing form label – a form control does not have a corresponding label.” It looks like this is the checkbox for adding products from the frequently bought together plugin.

    The specific code is:

    <div class=”woobt-choose”>
    Missing form label<input class=”woobt-checkbox” type=”checkbox” value=”231873″>
    <span class=”checkmark”></span></div>

    For a detailed explanation of this error as related to ADA accessibility, see here:

    "Errors
    Missing form label
    What It Means
    A form control does not have a corresponding label.
    Why It Matters
    If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.
    What To Do
    If a text label for a form control is visible, use the <label> element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.
    The Algorithm... in English
    An <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea> does not have a properly associated label. A properly associated label is:
    
        a <label> element with a for attribute value that is equal to the id of a unique form control
        a <label> element that surrounds the form control, does not surround any other form controls, and does not reference another element with its for attribute
        a non-empty title attribute, or
        a non-empty aria-labelledby attribute

    The page I need help with: [log in to see the link]

  • The topic ‘Missing Label – Form control does not have a corresponding label’ is closed to new replies.