Visual28-Personal Blog of Mark Aplet - Design, web, and other topics

Mango Blog Comment Form Replacement

Mango Blog uses the same default code for it's comment form as wordpress. Although I have seen worse offenders, the current form does pose a few accessibility chalenges that I would prefer to fix. So this evening I set out to rework the comment form and try to make it more accessible and customizable. This is an early prtotype of a new form that I hope would become the new standard for mango blogs comment forms. Let me explain the challenges that I have identified with the current format, and why I have chosen the form design that I did. If anyone has suggestions for improvement please let me know.

Accessibility Challenges

The default form has labels which is a good thing, however they are not placed correctly. The WCAG 2.0 specification states that the label should come before the form input. Understandably this makes sense for readability however visually it looks off balance. Most of the designs I have seen tend to line the form elements up on the left side and let the text labels trail off to the right. Visually this does look better so we will keep that in mind for later when we create out css stylings.

The first thing to correct is the input and label structure. The text field example below uses the explicit label and is the recommended method for creating a text form elements.

<label for="author">Name</label> <input type="text" name="comment_name" id="author" />

You will probably notice that this creates a problem visually as the label is now in front of the input field. Thanks to CSS we can fix this later on. I don't want to get into that just yet, but I will in a bit.

You might also have noticed that I have stripped out the tabindex elements from the input field. I did so because it alters the default tab order on the website. From the top of the page hitting tab would immediately draw the cursors attention the the comment form rather than the tabbing through the links or other items that start at the top of the page. People typically read the content on the page rather than skipping straight to the comments. The other reason not to set a tabindex is that the tabbing never leaves the comment form. But rather loops within it's self. This poses an accessibility and usability issue. We do not need them so they are out!

The default form is also lacking a fieldset and legend element. These are both technically required for XHTML 1.0 validation. In this case I felt it was acceptable to have two fieldsets. Group one contains the personal information like, name, email, and website. The second group contains the comment field and preference settings. e.g. subscribe to thread, and remember me checkboxes. I believe this can use some work so I am open to suggestions if you know of a better way.

<fieldset id="personalinfo">
<legend><span>Tell us about yourself</span></legend>
... Name, Email and Website URL fields...
</fieldset>

<fieldset id="comPrefs">
<legend><span>Comment and preferences</span></legend>
... Comment, Subscribe, and Remember Me fields...
</fieldset>

Proposed Solution

This form is not yet perfect as it requires modification to the core system plugins. For instance; the "Remember my information" checkbox label that is wrapped around the form element and in the wrong position. It is wrong because in the case of checkboxes or radio buttons the label comes after the form element, not before. This is something I am hoping to persuade Laura at Mango Blog to change for the next release. I plan to make changes in my own personal files to correct this issue, however if your using the current default installation, the code below is similar to what you will get in your own output.

<fieldset id="personalinfo">
<legend><span>Tell us about yourself</span></legend>
<div><label for="author">Your Name <em>(required field)</em></label><input type="text" name="comment_name" id="author" class="required_Field" value=""></div>
<div><label for="email">Your Email Address <em>(required field)</em></label><input type="text" name="comment_email" id="email" class="required_Field" value=""></div>
<div><label for="url">Website URL</label><input type="text" name="comment_website" id="url" value=""></div>
</fieldset>
<fieldset id="comPrefs">
<legend><span>Comment and preferences</span></legend>
<div><label for="comment">Comment:</label><textarea name="comment_content" id="comment" cols="70" rows="10" ></textarea></div>
<div><input type="checkbox" id="subscribe" name="comment_subscribe" value="1" /><label for="subscribe">Subscribe to this comment thread</label></div>
<div><label><input name="comment_rememberme" type="checkbox" value="1" /> Remember my information</label><br /></div>
</fieldset>
<div><button type="submit" id="submit-go">Submit</button></div>

Final Replacement Comment Form

Below is the final code that you can use in your mango blog comment forms. I have also zipped up the forms so that you can download them if you like.

<form action="#respond" method="post" id="commentform">
<input type="hidden" name="action" value="addComment" />
<input type="hidden" name="comment_post_id" value="<mango:PostProperty id />" />
<input type="hidden" name="comment_parent" value="" />
<fieldset id="personalinfo">
<legend><span>Tell us about yourself</span></legend>
<div><label for="author">Your Name <em>(required field)</em></label><input type="text" name="comment_name" id="author" class="required_Field" value="<mango:RequestVar name="comment_name" />"></div>
<div><label for="email">Your Email Address <em>(required field)</em></label><input type="text" name="comment_email" id="email" class="required_Field" value="<mango:RequestVar name="comment_email" />"></div>
<div><label for="url">Website URL</label><input type="text" name="comment_website" id="url" value="<mango:RequestVar name="comment_website" />"></div>
</fieldset>
<fieldset>
<legend id="comPrefs"><span>Comment and preferences</span></legend>
<div><label for="comment">Your Comment</label><textarea name="comment_content" id="comment" cols="70" rows="10" ><mango:RequestVar name="comment_content" /></textarea></div>
<div><input type="checkbox" id="subscribe" name="comment_subscribe" value="1" /><label for="subscribe">Subscribe to this comment thread</label></div>
<div><mango:Event name="beforeCommentFormEnd" /></div>
</fieldset>
<div><button type="submit" id="submit-go">Submit</button></div>
</form>

Styling the form

With a dash of CSS and a bit of luck, we can style our new form so that it looks like it did before we completely changed it's structure. Lets walk through these one chunk at a time.

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

First we are going to remove the borders, the margin and padding from the fieldsets.

legend span {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;}

Most people would shortcut this step by setting display:none; on the legend, however that also hides the legend from screen readers and that would defeat the purpose all together, so we are simply going to use some absolute positioning to move it off the screen visually, but it will still be readable by screen readers.

#personalinfo label {
float: right;
width: 380px;}

I added an id to the fieldsets so that we can target the two groups uniquely as necessary. In this case I did not want the all the labels to float right because it would mess our form up. So hear I am floating the labels within the personalinfo fieldset to the right then specifying the width on the element to provide a container so that we can back the labels up and position them closer to the form elements so that they appear to be where they were before changing the structure.

#submit-go {
display:block;
cursor:pointer;}

Rather than using a standard input with it's type set to submit, I like to use a button with a type of submit. This allows you to style it uniquely from other form inputs and it has an open and close tag that allows you to put any inline element inside it. I don't think I will ever use input type="submit" again!

Compromises

As mentioned before this is not a perfect solution. I did have to add extra markup in a few places to provide enough flexibility to design the form any way I liked while maintaining accessibility. For instance, I did not want to use a span around the legend text but I was forced because some browsers would not move the legend outside of the form no matter what I tried to do.

Another thing that was a comprimise would be the divs around each label and input group. The original code uses a pargraph tag around each. But semanticly, this does not make sense as the content within is not paragraph content. I choose the div as a comprimise. This is only important when css support is turned off and viewed by sighted visitors. A screen reader would anounce the content the same with or witout the divs.

Posted by Mark Aplet on October 05, 2008 8:24 PM 4 comments

Share this: