Lack of label impacts accessibility

Hey @wagedu,

Thanks for reaching out to us.

Currently, there is no way to do this, but I have created a ticket at https://github.com/ibericode/mailchimp-top-bar/issues/88.

We will notify you once we have some updates.

Hi @hchouhan thanks for the quick reply.
I’ll stay tuned then ??
Have a nice week!

Hi @wagedu

There is a filter: do_action( ‘mctb_before_email_field’ );
You can use that to output some code before the email field of the topbar.

add_action( ‘mctb_before_email_field’, function() {
echo ‘<label for=”mailchimp-top-bar__email”>Email:</label>’;
});

Hope that helps. If you have any questions, please let me know!

Hi @lapzor thanks for the reply but I’m not sure that’s the case…

If I understand correctly, your hook would be to add something that already exists…
Please see attached code.

I added manually the aria-label for the MMERGE5(name) field and that got rid of the “error” by Google for that Form element.
In the default generated code there’s already a “label for”
for=”mailchimp-top-bar__email” that seems to go undetected (??) by Google, since it still throws the message ““Form elements do not have associated labels” -> Failing Elements: input#mailchimp-top-bar__email.mctb-email”

<label class=”mctb-label” for=”mailchimp-top-bar__email”>Assine a nossa Newsletter</label>
<input type=”text” name=”MMERGE5″ placeholder=”nome” aria-label=”nome” /> <input type=”email” name=”email” placeholder=”email” class=”mctb-email” required id=”mailchimp-top-bar__email” />

Any idea on how to fix it then?
Thanks

you added the <input type=”text” name=”MMERGE5″ placeholder=”nome” aria-label=”nome” /> field as well, so then you would need to add label for that field as well I suppose?

In the same piece of code you used to add the name field, change it to something like:

<label class=”mctb-label” for=”nome”>name</label>
<input type=”text” name=”MMERGE5″ placeholder=”nome” aria-label=”nome” id=”nome” />
<label class=”mctb-label” for=”mailchimp-top-bar__email”>email</label>

I think you can even use CSS to hide the labels from view again.

Hope that helps. If you have any questions, please let me know!

Hi @lapzor

No, actually Google Pagespeed seems to have NO PROBLEM with my aria-label, but HAS A PROBLEM with your “label for”.

I tried it first with the default (no aria-label) and Pagespeed marked BOTH as Accessibility issues.
Then I added my aria-label to MMERGE5, and that resolved Pagespeed’s issue for my field.
But your field (with “label for”) still appears marked as Accessibility issue.

So, the one I want/am trying to fix is not the MMERGE5, but “yours”. If it’s possible, etc

Any ideas? Thanks

Hey @wagedu,

Can you please share a link where we can test this?

Hi @hchouhan Sure: temporary address: https://aqa.nathancornes.com/

And you see that in the Google Speed test? Or somewhere else?
Are you sure it is regarding the email field, and not regarding the hiddne “confirm-email” field?

Thanks for letting me know.