loading...

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

twitter logo github logo ・1 min read

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…

twitter logo DISCUSS (8)
markdown guide
 

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?

 

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' => ''
) );
 

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

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 :)

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

 
 

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?

 

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

Classic DEV Post from Jun 27 '19

Jack Of All Trades or Master of One?

That age old question: how many pies should one have a thumb in?

highcenbug🇵🇭 profile image
Freelance Developer | Volunteer Developer at Project: Website

dev.to is where software developers stay in the loop and avoid career stagnation.

Sign up (for free)