• Resolved q4u2

    (@q4u2)


    With website accessibility lawsuits on the rise, I decided to run a few different accessibility website scanners. The scanner at accessible ( https://accessibe.com/accessscan ) may be the most picky scanner of them all. It’s returning the following issues with the form:

    ISSUE 1 –

    Font icons, SVGs, or images used as spacers, decorations, or when their purpose is already described by other content, should include a role=”presentation” or role=”none” attribute.

    2 Code snapshots of failed elements

    • <span class=”wpuf-wordlimit-message wpuf-help” ></span>

    ISSUE 2 –

    Required form fields should include aria-required=”true” to inform screen-reader users of the field’s validation.

    3 Code snapshots of failed elements

    • <input name=”name[first]” type=”text” placeholder=”” value=”” size=”40″ data-required=”yes” data-type=”text” data-style=”wpuf-style” class=”textfield wpuf_name_548″ autocomplete=”given-name”>
    • <input name=”name[last]” type=”text” class=”textfield” placeholder=”” value=”” size=”40″ autocomplete=”family-name” data-style=”wpuf-style”>
    • <input id=”email_548″ type=”email” class=”email wpuf_email_548″ data-duplicate=”” data-required=”yes” data-type=”email” data-style=”wpuf-style” name=”email” placeholder=”” value=”” size=”40″ autocomplete=”email”>

    ISSUE 3 –

    Form fields should include either an “aria-label” attribute or an associated “label” element to describe the field’s purpose (e.g., email, phone, name).

    2 Code snapshots of failed elements

    • <input name=”name[first]” type=”text” placeholder=”” value=”” size=”40″ data-required=”yes” data-type=”text” data-style=”wpuf-style” class=”textfield wpuf_name_548″ autocomplete=”given-name”>
    • <input name=”name[last]” type=”text” class=”textfield” placeholder=”” value=”” size=”40″ autocomplete=”family-name” data-style=”wpuf-style”>

    If you believe these are valid issues, do you have any solutions?

Viewing 2 replies - 1 through 2 (of 2 total)
  • brandonco

    (@brandonco)

    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!

      brandonco

      (@brandonco)

      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.

        Viewing 2 replies - 1 through 2 (of 2 total)
        • You must be logged in to reply to this topic.