Accessible Comment Form

I’m not a designer so the idea of designing my own theme doesn’t appeal to me, however there are plenty of free themes available which means I can have a decent looking site and use my time to actually write content for it rather than procrastinating over how it should look.

However, the first thing I do when I download a new WordPress theme for my site is fix the markup. Unfortunately, whilst the themes look great they’re often not coded that well (that’s not saying all theme designers are bad at markup, but I’ve downloaded some horrendous code at times!). The section that often needs the most work is the comments form, which admittedly is often just copied from the Classic theme, although looking through a few themes I’ve downloaded over the past, this isn’t always the case.

Even to me, the comment form from the classic theme isn’t perfect. The input and labels are wrapped in paragraphs, the label comes after the input that it’s for, there’s no label for the comment textarea, and there’s no fieldset defined. That doesn’t sound so bad, but another form I just looked at had no label tags at all, which is not so good. Don’t worry if half of that made no sense, I’ll explain it step by step

The Classic Comment Form

First off, let’s look at the Classic comment form. If you open the comments.php file from the Classic theme and go to line 41, this is where the following code starts:

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">< ?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="< ?php _e('Log out of this account') ?>">Logout »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if ($req) _e('(required)'); ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) _e('(required)'); ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: < ?php echo allowed_tags(); ?></small>-->
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>

So where do we start? Well the labels are set for the Name, Email and Website, however not the comment area. For those who don’t know what label tags do, the label tag holds the label for a field. The ‘for’ attribute within the label has to be identical to the id attribute in the field element that it’s for. So for example the label Website above has a for attribute value of ‘url’ and the input id above it is also url. What does this do? It associates the label with the input box which is good for accessibility. From a usability standpoint it also means that if you click on the label ‘Website’ it will put your cursor into the input box. That may not sound exceptional, but imagine instead that you have a group of radio buttons or checkboxes. Being able to click on the label instead of aim for that tiny box (especially when on a laptop using a stick or touchpad) is so much easier.

Anyway, so we’ve got labels for all but the comment area so we need to add this in. Obviously it will make sense to have the label before the comment form, so we can insert the following just before the opening textarea tag:

<label for="comment">Comment</label>

You may have noticed at this point, that the problem we now have is the label will come directly before the comment box on the same line. Don’t worry, we can fix that with a bit of CSS which we’ll cover later.

For the first 3 input boxes we have the label coming after their text field. From an accessibility point of view, this is wrong as the label should come first to define what’s about to appear (read more on Label Positioning). If you still want the text after the input you can do this with a bit of CSS. This is just a simple case of swapping the tags over eg.

<p><label for="author"><small>Name < ?php if ($req) _e('(required)'); ?></small></label>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?/>" size="22" tabindex="1" /></p>

Next job is the paragraph tags. Whilst it is allowable to use paragraph tags around your label and inputs I personally don’t agree with it. Paragraphs should be for paragraphs of content, not to control your form layout. So we can change all of these to be div tags instead (note, that doesn’t include the first paragraph that you see in the code above, as that is a paragraph of text telling you that you’re currently logged in). For example:

<div>
   <label for="comment">Comment</label>
   <textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
</div>

Finally we want to add in a fieldset and legend. As per the definitions on the W3Schools Site

Fieldset

The fieldset element is used to logically group together elements in a form, and draw a box around them.

Legend

The legend element defines a caption for a fieldset.

So we use the fieldset to group the fields in elements in the form together. The box that a fieldset creates can be styled/removed with CSS. First we add in the opening fieldset tag and the legend just after the form has been opened using the code

<fieldset><legend>Post a Comment</legend>

This will then insert a caption above the form with the title ‘Post a Comment’. Then we need to close the fieldset just before the end of the form using the </fieldset> tag.

Final Code

So now we should have the code as follows

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<fieldset><legend>Post a Comment</legend>
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">< ?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="< ?php _e('Log out of this account') ?>">Logout »</a></p>
<?php else : ?>
<div><label for="author"><small>Name < ?php if ($req) _e('(required)'); ?></small></label>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /></div>
<div<label for="email"><small>Mail (will not be published) < ?php if ($req) _e('(required)'); ?></small></label>
><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /></div>
<div><label for="url"><small>Website</small></label>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /></div>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: < ?php echo allowed_tags(); ?></small>-->
<div><label for="comment">Comment</label>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></div>
<div><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></div>
<?php do_action('comment_form', $post->ID); ?>
</fieldset>
</form>

At this point, if you try this in a theme things may look a bit of a mess. That’s just because we’ve not added the CSS yet.

Styling Your Form

Working from top down, first we deal with the fieldset. If you want to keep the border on the fieldset then skip this part. You can control the fieldsets borders with the border property in CSS. For a comment form I tend to turn the borders on the fieldset off. I also remove the margin and padding on it, so this can be achieved with

#commentform fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

Then we can style the legend. I recommend making this bold so that it stands out ie.

#commentform legend {
    font-weight: bold;
}

Then we move onto the divs and their content of the label and input. We’ve moved the label to the left of the input now within the markup. If you still want to have the label appearing on the right of the input we float the label to the right which will automatically put the input to the left of it ie.

#commentform label {
    float: right;
    width: 75px;
    margin-left: 10px;
}

Personally I prefer to have the label to the left of the box. To do this we just float the label left and add a right margin instead ie.

#commentform label {
    float: left;
    width: 75px;
    margin-right: 10px;
}

Regardless of which method you use, we then need to set it so that the label/input pairs are on their own line for each pair. To do this we target the div and clear the float ie.

#commentform div {
    clear: both;
    margin: 5px 0;
}

I’ve also added a top and bottom margin on the div to give us a little spacing between each line.

These CSS styles will need to go after the comment or form styles you’ve already got set. Ideally they should replace certain styles within your stylesheet however take care to not remove settings that are still required.

Conclusion

Are these changes a necessity for a personal blog? No. However, whilst an accessible or usable form isn’t a requirement, it’s still good practise to make your site user friendly. Also, hopefully some of the tips and info given here will help you with standard forms used on other sites too