Accessibility Issues

Hi @q4u2, thanks for reaching out with your concerns. I’ve come up with some explanations and solutions for the accessibility issues flagged by the scanner.

Issue 1: Missing role="presentation" or role="none"

Icons or decorative elements without semantic meaning should include role="presentation" or role="none".

Solution:

For the span element flagged:

• Add role="presentation" or role="none" to decorative span tags in your form.

Example:

<span class="wpuf-wordlimit-message wpuf-help" role="presentation"></span>

Issue 2: Missing aria-required="true" on Required Fields

Screen readers need to know which fields are mandatory using aria-required="true".

Solution:

Modify required fields to include aria-required="true".

<input name="name[first]" type="text" aria-required="true" data-required="yes" class="textfield">

Issue 3: Missing Labels or aria-label Attributes

Each form field should have a descriptive label or aria-label to help screen readers understand its purpose.

Solution:
Add either:

A proper <label> element associated with the for attribute:

<label for="email_548">Email</label> <input id="email_548" type="email" name="email">

Or, add an aria-label directly to the input:

<input id="email_548" type="email" name="email" aria-label="Email">

How to Apply These Changes in weForms

Custom Hooks and Filters: If you can’t directly modify the HTML, use the weForms hooks to inject these attributes:

<input id="email_548" type="email" name="email" aria-label="Email">

Customize Field Templates: You can modify templates by overriding them in your theme, or request support to implement these changes.

Next Steps

• Implement these changes and test using accessibility scanners.
• Keep accessibility best practices in mind during future updates to maintain compliance.

Let me know if you need assistance applying these fixes!

Hi @q4u2, thanks for your question, below I’ve added some possible explanations and solutions for the accessibility issues flagged by the scanner.

Icons or decorative elements without semantic meaning should include role="presentation" or role="none".

Solution:
For the span element flagged:

• Add role="presentation" or role="none" to decorative span tags in your form.

<span class="wpuf-wordlimit-message wpuf-help" role="presentation"></span>

Issue 2: Missing aria-required="true" on Required Fields

Screen readers need to know which fields are mandatory using aria-required="true".

Solution:
Modify required fields to include aria-required="true".

For example:

<input name="name[first]" type="text" aria-required="true" data-required="yes" class="textfield">

Issue 3: Missing Labels or aria-label Attributes

Each form field should have a descriptive label or aria-label to help screen readers understand its purpose.

Solution:
Add either:

A proper <label> element associated with the for attribute:

<label for="email_548">Email</label> <input id="email_548" type="email" name="email">

Or, add an aria-label directly to the input:

<input id="email_548" type="email" name="email" aria-label="Email">

How to Apply These Changes in weForms

Custom Hooks and Filters: If you can’t directly modify the HTML, use the weForms hooks to inject these attributes:

add_filter('weforms_field_properties', function($properties, $field){ if($field['required']) { $properties['attributes']['aria-required'] = 'true'; } return $properties; }, 10, 2);

Customize Field Templates: You can modify templates by overriding them in your theme, or request support to implement these changes.

Next Steps

• Implement these changes and test using accessibility scanners.
• Keep accessibility best practices in mind during future updates to maintain compliance.

I hope this helps! Let us know if we can assist you further.