DiviTwist.com Logo

A Refreshing Twist of Tools, Tips & Tricks for Your Divi Site

Divi Comments: 3 Easy Ways to Add ADA Compliant Labels

Feb 17, 2022

Divi Comments: 3 Easy Ways to Add ADA Compliant Labels

Have you gotten an error with Lighthouse that tells you your Divi comment form is missing ADA compliant labels? No matter what you try, it keeps telling you there are no discernible labels on your form elements. Well, here are some simple methods to fix that little issue.

First of All, Why Do Labels Matter?

Each form element (input) gathers data from the user. The input labels help describe what the user should place in the input area. For example, if you have a text input box and you want someone to put a name in it, you would probably assign a label of “Name”.

When you don’t have labels set on your forms, it means that screen readers are not going to be able to pick up on the purpose of that part of the form, or relay that to the user.

15% of the world’s population has disabilities (yes you read that right – fifteen percent!). That means, you should definitely make it as easy as possible for everyone to use your website.

By default, Divi defines the form labels, but turns them off. Divi then uses some JavaScript to modify the default view of the form labels. This makes the browser (and screen readers) think there are no labels.

There’s also another issue. The words inside the form elements often disappear when you click the box, so you have to click off of the area in order to see the little hint of what you should type in the box. This is really a pain for those of us without disabilities, let alone someone who, say, can’t see well or at all.

How to Turn On the Divi Comment Labels

I’m assuming you already have a post with the Divi comment module added. If not, create one, and let’s start with trying to turn on the labels that Divi has created. It looks something like this:

<label for="comment" style="display: none;">Comment <span class="required" aria-hidden="true">*</span></label>

If you try to add some custom css to the custom css area of the Divi Theme Options, like this:

label {display: block !important;}

It won’t work. Without going into too much technical detail, this is because of the priority that inline css gets as compared to the custom css you place in the Divi Theme Options.

Unfortunately, we can’t easily go and change the inline code they’ve written. We can, however, override it by using something called a type selector.

It will follow the format:

selector[attribute]{ modified css;}

In our case, the type we are selecting is a label. What we are changing is its style attribute. So, this is what you would add in the Divi custom css ares:

label[style] {display: block !important;}

Now though, you will see a new issue. You can now see the label outside and inside the box!

Some people like this look, and that’s great! You can stop here. Many people, though, look at this as repetitive.

Divi Comment Labels via PHP

The first option is to use PHP to assign a placeholder to each element in the Comments form. You can do this by adding the code to your functions.php file. Do not edit the Divi theme’s functions.php. It will get overwritten when your theme gets updated the next time. You can create a child theme or, my personal preference, you can create a plugin that contains all of your edits. I feel I should also mention that if you use the plugin or child theme method with the JS or jQuery methods below, you can enqueue the script in the footer for faster load times.

You should probably also be aware of the fact that the Divi code module and the Divi Options Integration area, will not work for php.

Your code will look something like this:

function my_update_comment_field( $comment_field ) {
        $comment_field = '<p class="comment-form-comment"> 
        <label for="comment">' . __( "Leave a comment *", "text-domain" ) . '</label>
        <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" placeholder="' . esc_attr__( "Leave a comment *", "text-domain" ) . '" aria-required="true"></textarea>
        </p>';
        return $comment_field;
        }
function my_update_comment_author_field( $author_field ) {
        $author_field = '<p class="comment-form-author"> <label for="author">' . __( "Name *", "text-domain" ) . '</label>
        <input id="author" name="author" type="text" size="30" maxlength="245" required="required" placeholder="' . esc_attr__( "Name *", "text-domain" ) . '" aria-required="true"></textarea>
        </p>';
        return $author_field;
        }
function my_update_comment_email_field( $email_field ) {
        $email_field =
        '<p class="comment-form-email">
        <label for="email">' . __( "Email *", "text-domain" ) . '</label>
        <input id="email" name="email" type="text" size="30" maxlength="100" required="required" placeholder="' . esc_attr__( "Email *", "text-domain" ) . '" aria-describedby="email-notes"></textarea>
        </p>';
        return $email_field;
        }
function my_update_comment_url_field( $url_field ) {
        $url_field =
        '<p class="comment-form-url">
        <label for="comment">' . __( "Website", "text-domain" ) . '</label>
        <input id="url" name="url" type="text" size="30" maxlength="200" placeholder="' . esc_attr__( "Website", "text-domain" ) . '"></textarea>
        </p>';
        return $url_field;
        }
        add_filter( 'comment_form_field_comment', 'my_update_comment_field' );
        add_filter( 'comment_form_field_author', 'my_update_comment_author_field' );
        add_filter( 'comment_form_field_email', 'my_update_comment_email_field' );
        add_filter( 'comment_form_field_url', 'my_update_comment_url_field' );

So what is this doing?

For each form field, we write a function that replaces the entire html portion of the label and input. In the input code, we define a “placeholder.” We assign the “placeholder” a name that describes what the user should type in the from field.

Even though there is a lot of code, this a great option, because of the ease of changing the descriptive word or phrase, and the ability to assign a different value on focus (when someone clicks in the input box). Just change the word in quotations before “text-domain”.

function my_update_comment_field( $comment_field ) {
        $comment_field = '<p class="comment-form-comment"> 
        <label for="comment">' . __( "Comment *", "text-domain" ) . '</label>
        <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" placeholder="' . esc_attr__( "Leave a comment *", "text-domain" ) . '" aria-required="true"></textarea>
        </p>';
        return $comment_field;
        }

Remember that if you want the field set to required you should add an *, and make sure anything not required does not have an *. Also, this needs to go into or be called from a functions.php file, either via plugin or child theme.

The JS Way to Add ADA Labels

Your next option is to use javascript. You can add this to the footer code or in a code block in a page or Divi Theme Template. You can also add it to your child theme or plugin.

Here, we are pretty much doing the same thing. This method has considerably less code, but it also has less flexibility. You are setting the placeholder once, so you can’t change it on focus. This is possible, but we son’t go over it here.

window.onload =  function newAttribute () {
  const contact_form_comment = document.getElementById("comment");
    contact_form_comment.setAttribute('placeholder', 'Comment *');
  const contact_form_author = document.getElementById("author");
    contact_form_author.setAttribute('placeholder', 'Name *');
  const contact_form_email = document.getElementById("email");
    contact_form_email.setAttribute('placeholder', 'Email *');
    
  const contact_form_url = document.getElementById("url");
    contact_form_url.setAttribute('placeholder', 'Website');
    
}

You can add this code to either the Divi Options Integration area or the Divi Code Module.

If you add it to the Divi Options Module, turn on the “Enable Header Code” and insert the code into the header area. Remember to put in in script tags!

JS in Divi Options

If you add it to the Divi Code Module, also place it within script tags and add the code module anywhere one the page. I find that the lower, the better, as it seems to affect the cumulative layout shift.

JS ADA compliance for Divi Comment Form

ADA Compliant Labels Using jQuery

And, lastly, using jQuery, the code can be simplified even further.

window.onload =  function newLabel () {
    $("#comment").attr("placeholder","Comment *");
    $("#author").attr("placeholder","Name *");
    $("#email").attr("placeholder","Email *");
    $("#url").attr("placeholder","Website");
}

In jQuery $ is an alias for jQuery(), which WordPress doesn’t recognize. So you need to do one of the following:

Replace the $ with jQuery

window.onload =  function newLabel () {
    jQuery("#comment").attr("placeholder","Comment*");
    jQuery("#author").attr("placeholder","Name*");
    jQuery("#email").attr("placeholder","Email*");
    jQuery("#url").attr("placeholder","Website");
}

or wrap the jQuery in a function

window.onload =  function newLabel () {
    (function ($) {
        $("#comment").attr("placeholder","Comment*");
        $("#author").attr("placeholder","Name*");
        $("#email").attr("placeholder","Email*");
        $("#url").attr("placeholder","Website");
    })
(jQuery);

You can add the jQuery to either the Divi Code Module or the Divi Options Integration. Make sure to wrap the code in script tags!

Which Is Best to Use to Be ADA Compliant?

Php may have more code, but you can easily read what’s going on. If you have a basic understanding of html, you can change multiple items in the form without too much thought, since the edited html is contained in the php block.

The Javascript above is specific to only changing the placeholder. In order to do more, you need to have a decent understanding of the DOM and how to access the elements.

As for jQuery, I feel that it is not easily read by all who look at the code. It is, however, short and sweet, which appeals to many.

All three options give us the outcome we need. A Divi comment form that includes labels that visually and for screen readers, provide the necessary information to be ADA compliant. Which one to use is ultimately up to you.

Elaboration and Collaboration

Check out the Divi Twist Forums

2 Comments

  1. The javascript worked for me, thanks!

    Google also says the default color scheme for the comment field (gray on gray) isn’t accessibility compliant. Is there an easy way to modify that with CSS?

    Thanks again.

    Reply
    • That’s great to hear!

      If you are using Divi, the comments module handles this setting. No custom CSS required. You can just select the “Design” tab of the “Comments Module Settings”, and then select “Fields”. Change the “Fields Background Color” and the “Fields Text Color” to be contrasting colors.

      I use the comments module within a theme builder template specifically set to the pages/posts I allow comments on, so that all of the comment forms are alike.

      Give it a try and let me know if it works!

      Reply

Submit a Comment

Your email address will not be published.