Checkbox validation

  • Resolved 007bmorris

    (@007bmorris)


    7 years, 10 months ago

    I too am having issues with checkbox accessibility labels.

    This is my code that I am using (just a small sample) on my form.
    <p>Which services do you desire? Click the check box beside each item below that you would like more information about.<br />
    <span style=”font-size: 95%;”><label for=”complete-accounting-package”>Complete Accounting Package:</label>[checkbox complete-accounting-package id:complete-accounting-package “Yes”] <br />
    <label for=”accounts-payable”>Accounts Payable:</label> [checkbox accounts-payable id:accounts-payable “Yes”] <br />

    This is the errors:
    1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

    Success Criteria 1.3.1 Info and Relationships (A)

    Check 119: input element, type of “checkbox”, missing an associated label.
    Repair: Add a label element that surrounds the control’s label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element.
    Error Line 544, Column 313:

    <input type=”checkbox” name=”complete-accounting-package[]” value=”Yes” />

    Error Line 545, Column 240:

    <input type=”checkbox” name=”accounts-payable[]” value=”Yes” />

    Check 206: input element, type of “checkbox”, has no text in label.
    Repair: Add text to the input element’s associated label that describes the purpose or function of the control.
    Error Line 544, Column 313:

    <input type=”checkbox” name=”complete-accounting-package[]” value=”Yes” />

    Error Line 545, Column 240:

    <input type=”checkbox” name=”accounts-payable[]” value=”Yes” />

    3.3 Input Assistance: Help users avoid and correct mistakes.

    Success Criteria 3.3.2 Labels or Instructions (A)

    Check 188: Label text is empty.
    Repair: Add text to the label element.
    Error Line 544, Column 313:

    <input type=”checkbox” name=”complete-accounting-package[]” value=”Yes” />

    Error Line 545, Column 240:

    <input type=”checkbox” name=”accounts-payable[]” value=”Yes” />

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Joe Dolson

    (@joedolson)

    For checkboxes, your only option in Contact Form 7 is to use the attribute ‘use_label_element’ in your form code. This will wrap the checkbox in an implicit label.

    e.g.

    [checkbox complete-accounting-package id:complete-accounting-package use_label_element “Yes”]

    There’s no method available in Contact Form 7 to assign labels explicitly to checkboxes.

    Thread Starter 007bmorris

    (@007bmorris)

    So I now have:
    <label for=”complete-accounting-package”>Complete Accounting Package:</label>[checkbox complete-accounting-package id:complete-accounting-package use_label_element “Yes”] <br />

    That took care of the first warning. These still remain. Any thoughts?

    Check 206: input element, type of “checkbox”, has no text in label.
    Repair: Add text to the input element’s associated label that describes the purpose or function of the control.
    Error Line 544, Column 320:

    <input type=”checkbox” name=”complete-accounting-package[]” value=”Yes” />

    Check 188: Label text is empty.
    Repair: Add text to the label element.
    Error Line 544, Column 320:

    <input type=”checkbox” name=”complete-accounting-package[]” value=”Yes” />

    Check 188: Label text is empty.
    Repair: Add text to the label element.
    Error Line 544, Column 320:

    <input type=”checkbox” name=”complete-accounting-package[]” value=”Yes” />

    Thread Starter 007bmorris

    (@007bmorris)

    Sorry, I see your point. Sorry I sent the second message.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Checkbox validation’ is closed to new replies.