Small tweak for accessibility (currently fails two WCAG guidelines)

[brucelawson]

The sign up form fails Web Content Accessibility Guidelines (WCAG 1.3.1, WCAG 3.3.2) because the input field for the email address isn’t associated with a label. Simply tweak the current code so that the input field is a child of the label element:

Currently:
[label]Email address: [/label]
[input type=”email” name=”EMAIL” placeholder=”Your email address” required=””]

improved:
[label]Email address:
[input type=”email” name=”EMAIL” placeholder=”Your email address” required=””]
[/label]

(Also blogpost here https://www.brucelawson.co.uk/2019/making-mailchimp-for-wordpress-more-accessible/)

[dannyvankooten]

Hey @brucelawson,

Thank you for the heads up!

I'm a little hesistant to wrap every input field in label because of the styling implications that would have in many themes, but I'm definitely keen on adding a proper for attribute to every <label> generated by the plugin.

Please allow us some time to properly think of a way to do this. This is a bit complex since every for attribute has to point to a unique ID and we don't know beforehand how many times a form will be printed on a given page (so we have to find a way to dynamically set ID's for each form input).

[dannyvankooten]

Merged #642 which improves the default form content. This does not yet wrap the input field for generated HTML through the field helper though.

[braulio-evangelisti]

Hi. Awesome work on this plugin!

Another suggestion regarding WCAG it would be to add role="alert" to error messages container .mc4wp-alert?

Screenshot:
https://prnt.sc/p9v5eb

Possible place to add the improvement:
https://github.com/ibericode/mailchimp-for-wordpress/blob/master/includes/forms/class-form-element.php#L117

Best.

[arnelap]

https://wordpress.org/support/topic/accessibility-labels-missing-for-attribute/