DEV Community

Vicente G. Reyes
Vicente G. Reyes

Posted on

a11y issues on WordPress - google lighthouse can't detect <label></label> on the form on the hero section

This one's for a new client - Hoping for someone not busy that can help me 😄

I have an issue with my client's WordPress site where I can't fix and find where I should add the <label></label> on the form which is triggering the a11y on Google Lighthouse enter image description here

I'm quite new to tinkering with php and wordpress and I can only understand a little php so…

Top comments (8)

Collapse
 
devdrake0 profile image
Si

It sounds like you need a label property on this bit of code

       <?php md_email_form( array(
            'email_title' => false,
            'email_desc' => false,
            'email_input' => array( 'name' => true ),
            'email_submit_text' => ! empty( $hero['email_submit'] ) ? esc_html( $hero['email_submit'] ) : __( 'Join Now!', 'mb' ),
            'email_form_footer' => ! empty( $hero['email_footer'] ) ? esc_html( $hero['email_footer'] ) : ''
        ) ); ?>

Is there not an email_label?

Collapse
 
devdrake0 profile image
Si

I believe there is an email_name_label and an email_email_label ?

<?php
md_email_form( array(
    'email_service' => '',
    'email_list' => '',
    'email_code' => '',
    'email_title' => '',
    'email_desc' => '',
    'email_input' => array(
        'name' => ''
    ),
    'email_name_label' => '',
    'email_email_label' => '',
    'email_submit_text' => '',
    'email_image' => '',
    'email_form_style' => array(
        'attached' => ''
    ),
    'email_form_title' => '',
    'email_form_footer' => '',
    'email_bg_color' => '',
    'email_text_color' => '',
    'email_image' => '',
    'email_submit_classes' => '',
    'email_classes' => ''
) );
Collapse
 
highcenburg profile image
Vicente G. Reyes

Hold on, why is there a lot more when we only need a ? I'm so confused.

Thread Thread
 
devdrake0 profile image
Si • Edited

I honestly couldn't tell you.

I've never used PHP and have a personal hatred for WP =), I just Googled and thought the results might help :)

Thread Thread
 
highcenburg profile image
Vicente G. Reyes

Me neither. 😄 I'm probably on the top 1000 if there exist a wordpress hatred list 😄

Collapse
 
mpuckett profile image
Michael Puckett

Can you add an aria-label="My label" ?

Collapse
 
highcenburg profile image
Vicente G. Reyes

I'm not sure about that but would that be

...
'email_name_aria_label' => 'Enter your name...',
'email_email_aria_label' => 'Enter your email...',
...

this way?

Collapse
 
mpuckett profile image
Michael Puckett

I’m not familiar with the Wordpress plugin. You may need to add it on page load with JavaScript