[Resolved] ADA Compliance – Post Form Accessibility…

[Author]

Posts

[shawnW-3]

Tell us what you are trying to do?
I only just noticed the CRED Fields don't have any sort of ARIA labels or from what I can tell a way to insert them as Attributes. The labeling in general doesn't seem particularly helpful in the area of Web Accessibility. I'd like to run through an example in the hopes that I'm somehow misunderstanding.

<label for="cred_form_134107_1-textfield-51-1610575240">First Name</label>
<div class="js-wpt-field-items js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="textfield-wpcf-first-name-contact">
   <input type="text" id="cred_form_134107_1-textfield-51-1610575240" name="wpcf-first-name-contact" value="" class="form-control wpt-form-textfield form-textfield textfield js-wpt-validate" output="bootstrap" preset_value="" urlparam="" preview="" previewsize="" select_label="" edit_label="" value_escape="" make_readonly="" placeholder="" select_text="" data-wpt-validate="{"required":{"args":{"1":true},"message":"This field is required."}}" data-wpt-field-title="First Name" data-parsley-required="true" data-parsley-required-message="This field is required." data-parsley-credfilesize="67108864" data-wpt-type="textfield" data-wpt-id="cred_form_134107_1_cred_form_134107_1-textfield-51-1610575240" data-wpt-name="wpcf-first-name-contact">
</div>

The only attribute for the label "First Name" is
for="cred_form_134107_1-textfield-51-1610575240"

Is that somehow used to describe the input below the way an "aria-labelledby" attribute would for screen readers?

Would a screen reader recognize this...
data-parsley-required-message="This field is required."
...the way it would an "aria-required" attribute?

In expert mode I can at least add an ID to the label, but it doesn't look like I have a way to add aria attributes to the input itself without JS, which would be extraneous for a function that should be built-in.

Is there any documentation that you are following?
hidden link

Is there a similar example that we can see?
I'm using both the form builder drag and drop as well as the expert mode.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Using a label with "for" attribute value matching the ID of the input field is an older and widely accepted approach to make the forms accessible.

The same can be confirmed from the guide that you referenced and since the label with the "for" attribute approach is around longer than "ARIA" attributes, it should offer wider compatibility on older devices and browsers.

You'll find some more useful information on the topic from these links:
hidden link
hidden link

The "ARIA" attributes techniques were more recently introduced to substitute the need for a separate "label" tag, but since they're not yet supported by Toolset Forms, it would mean adding them on the fly using some custom script ( as you noted ).

regards,
Waqar

[shawnW-3]

We can accept this. Thank you for the information. Of course we would like to see regular improvements in this area with all Toolset plugins. I do want to also stress the inclusion of attributes as an argument for shortcodes whenever possible. UIKit - hidden link - and several other frameworks are leveraging attributes more and more. So having a way to add in attributes on the fly would not only solve problems like the ARIA, but could be helpful with video, images, inputs and more.