Conversation
supportI 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” />
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.
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” />
Sorry, I see your point. Sorry I sent the second message.
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.
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” />
Sorry, I see your point. Sorry I sent the second message.