mailchimp aria-label

[Julius-88]

Hi, I have copy pasted this code from mailchimp, without these aria-labels the confirmation messages wont show.

Your validator keeps saying that the aria-labels are being misused though.

                <div id="mc_embed_signup">
                    <form
                        action="https://gmail.us21.list-manage.com/subscribe/post?u=eb5ee913ec78d7cf554068e39&amp;id=61ff67b389&amp;f_id=0091e8e6f0"
                        method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form"
                        class="validate" target="_blank" rel="noopener noreferrer">
                        <div id="mc_embed_signup_scroll">
                            <div class="mc-field-group"><label for="mce-EMAIL">Email Address</label><input
                                    type="email" name="EMAIL" class="required email" id="mce-EMAIL" required=""
                                    value="" aria-label="Fill in your email address here"></div>
                            <div id="mce-responses">
                                <div class="response" aria-label="something went wrong, try again"
                                    id="mce-error-response" style="display: none;"></div>
                                <div class="response" aria-label="it's a success! thank you for subscribing"
                                    id="mce-success-response" style="display: none;"></div>
                            </div>
                            <div aria-hidden="true" style="position: absolute; left: -5000px;">
                                <!-- real people should not fill this in and expect good things - do not remove this
                                or risk form bot signups  -->
                                <input type="text" name="b_eb5ee913ec78d7cf554068e39_61ff67b389" tabindex="-1"
                                    value="">
                            </div>
                            <div class="d-flex justify-content-end">
                                <input type="submit" name="subscribe" title="Subscribe" id="mc-embedded-subscribe"
                                    class="button cta" value="Subscribe"
                                    aria-label="Submit your email address!">
                            </div>
                        </div>
                    </form>
                </div>
                <script src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js">
                </script>
                <script>
                    (function ($) {
                        window.fnames = new Array();
                        window.ftypes = new Array();
                        fnames[0] = 'EMAIL';
                        ftypes[0] = 'email';
                        fnames[1] = 'FNAME';
                        ftypes[1] = 'text';
                        fnames[2] = 'LNAME';
                        ftypes[2] = 'text';
                        fnames[3] = 'ADDRESS';
                        ftypes[3] = 'address';
                        fnames[4] = 'PHONE';
                        ftypes[4] = 'phone';
                        fnames[5] = 'BIRTHDAY';
                        ftypes[5] = 'birthday';
                    }(jQuery));
                    var $mcj = jQuery.noConflict(true);
                </script>
            </div>

[scottaohara]

Looks like mailchimp is misusing aria-label, as not a single instance is either necessary (use on the inputs) or valid (use on the divs)

some of the instances actually result in wcag 2.5.3 failures (e.g., visible text says “subscribe” but aria-label says “Submit your email address!”)

Seems it would be a better idea to note these issues to mailchimp, since the validator is working correctly