Enhancement: Add labels to fields in JP forms that are valid under WCAG 2.x (a11y)

[mjaragon]

Impacted plugin

Jetpack

What

JP-forms fields should have a label that passes WCAG 2.x a11y tests

How

During our A11y tests for a contact form, using different A11y testing tools and the screen reader.
All the different tools we tested, provided the same error related to the Form label is missing on the message text area. (the text area is a Multi-line Text Field)

(see all screenshots & screen recordings in the original issue: https://github.com/a8cteam51/mckenna-academy/issues/97#issuecomment-1819092034 )

The suggestion we received from the tools was: "For more information on how to solve the issue please visit this link"

When we tested the form with a screen reader, the reader declares all the details about the other fields (Name & Email), but in the message section it only reads out the text area is required.

How can we ensure that the contact forms pass all WCAG 2.x a11y tests?

[jeherve]

@monsieur-z Do you think you could take a look at this, given your recent work on a11y for forms in #33853?

Thank you!

[monsieur-z]

Thanks for reporting this @mjaragon.

I don't have access to the issue you shared. Can you provide more information about how the page was built and how the form is used? For instance, does the page use a Contact Form block? Is a label present in the editor that seems related to the text area?
Also, what combination of screen reader and browser was used?

Spinning up a brand new site and adding the Contact Form block as is to a page, everything seems in order. The text area and label are programmatically associated, and the screen reader (VoiceOver/Chrome) reads the label when the input receives focus.

[jeherve]

Closing this for now because of the lack of activity on this. We can always reopen in the future if needed.