• Resolved thewebtailors

    (@thewebtailors)


    When adding a radio or checkbox input fields that don’t have a description, Forminator’s output still references the description (even though there is none) by adding aria-describedby=”forminator-field-radio-1-63eb9b7f07818-description” to the input fields causing an accessibility error since there is no such element. As a result, screen readers (I tried it with Apple’s Voice Over) does not say what the radio/checkbox is for but just that it is in my example below “Email” or “Phone”. Can you consider having it use the name instead (in my example below it would be aria-describedby=”forminator-radiogroup-63eb9b7f07818-label”).

    I believe you could even chain IDs in aria-describedby if both the name and description are defined: aria-describedby=”forminator-radiogroup-63eb9b7f07818-label forminator-field-radio-1-63eb9b7f07818-description”. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby”

    <div role="radiogroup" class="forminator-field" aria-labelledby="forminator-radiogroup-63eb9b7f07818-label">
    
    <span id="forminator-radiogroup-63eb9b7f07818-label" class="forminator-label">Best way to contact?</span>
    
    <label for="forminator-field-radio-1-1-63eb9b7f07818" class="forminator-radio forminator-radio-inline" title="Email"><input type="radio" name="radio-1" value="one" id="forminator-field-radio-1-1-63eb9b7f07818" data-calculation="0" aria-describedby="forminator-field-radio-1-63eb9b7f07818-description"><span class="forminator-radio-bullet" aria-hidden="true"></span><span class="forminator-radio-label">Email</span></label>
    
    <label for="forminator-field-radio-1-2-63eb9b7f07818" class="forminator-radio forminator-radio-inline" title="Phone"><input type="radio" name="radio-1" value="two" id="forminator-field-radio-1-2-63eb9b7f07818" data-calculation="0" aria-describedby="forminator-field-radio-1-63eb9b7f07818-description"><span class="forminator-radio-bullet" aria-hidden="true"></span><span class="forminator-radio-label">Phone</span></label>
    
    </div>

    Thank you for looking into fixing this!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi @thewebtailors

    I hope you’re well today and thank you for reporting this.

    We are already aware of some ARIA related issues with forms, especially related to such “duplication” cases. Our Forminator developers will be looking into it and work on a fix with one of future releases.

    Kind regards,
    Adam

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @thewebtailors

    I hope you are doing well and safe!

    We haven’t heard from you in a while, I’ll mark this thread as resolved.

    Feel free to let us know if you have any additional questions or problems.

    Best Regards
    Patrick Freitas

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘aria-describedby error’ is closed to new replies.