Textpattern accessible comments
Garret wrote about his Textpattern hacks quite some time ago. One which I’m surprised which wasn’t integrated into the recently released first stable version, aptly named version 4 yet is that there are no
<label> tags for the comment form. Adding these in the presentation comment form is trivial, of course, but then your site won’t validate anymore because Textpattern doesn’t automatically generate the
id parameter for the form elements. And as everyone knows, the reason for this is that it provides an explicit association to the form control for assistive technologies. For example, a screen reader will read the associated label for a particular form element if it has been marked up with a label.
So, how do you add
<label> tags for the comment form while still keeping your site validated? Here’s how.
First of all, adapt the the following code for your comment form under presentation>forms>comment_form. (I use HTML4 and a definition list):
<dl id="comment"> <dt> <label for="message">Message</label> <dd> <txp:comment_message_input /> <dt> <label for="name">Name</label> <dd> <txp:comment_name_input /> <dt> <label for="email">Email</label> <dd> <txp:comment_email_input /> <dt> <label for="web">http://</label> <dd> <txp:comment_web_input /> <dt> <txp:comment_preview /> <txp:comment_submit /> <dd> <p><txp:comment_remember /></p> </dl>
Now we’ll have nice labels for our input elements, which makes them easier to navigate (thus increasing usability) and more accessible.
Second, locate the file
comment.php in your textpattern publish subdirectory. At the bottom of this file, line 368, is the function
input. This function generates the attributes which are put in each form element. Adjust it to read like this:
<input type=" '.$type.'" name="'.$name.'" id="'.$name.'" value="'.$val.'"',
id is always the same as the
name, we can just equal it to the
$name value. Textpattern will automatically update all
input tags, which are now instantly valid!
If you’re following along, refreshing the validator in another tab (or window), you’ll notice that there is still one validation error. That is because there is 1 hardcoded tag left which also requires an
id to validate, namely the
textarea tag which creates the message box. Hop over to line 121 in comment.php where you’ll find the offending tag and add the id to it (I’ve broken up the line for readability, but you can put it all on one line):
$textarea = '<textarea class="txpCommentInputMessage" id="message" name="message" '.$msgcols.$msgrows.$msgstyle.' tabindex="1"> '.htmlspecialchars($message).' </textarea>';
Alternatively, hardcode the
textarea in the comment_form like this:
<textarea class="txpCommentInputMessage" id="message" name="message" cols="35" rows="10" tabindex="1"> </textarea>
Now we have a more usable, accessible and valid comment form!
Comments closed | Permalink