Textpattern accessible comments

Written at 16:51, on Tuesday 30 August 2005. Tags: accessibility webdesign website .

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.'"',

Since an 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!

Update: Kusor posted similar instructions, which also includes details on labelling the checkboxes. And Garret submitted his changes to Textpattern and they are now in the 4.0 branch. So from 4.0.2 onward, these changes shouldn’t be necessary anymore.

Comments closed |

From the portfolio

  • Politieonderzoeken tijdslijn

About this website

My name is Jeroen Coumans, I'm a freelance web designer, front-end developer and Drupal ninja from the Netherlands. I love to create beautiful, usable and accessible websites. On this website, you can find my portfolio as well as my personal weblog. Interested in hiring me? I'd love to hear from you.

After completing my BA in Arts and Culture I'm now doing a MA in Communication and Multimedia Design. More …

Elsewhere

Issuu and Smart Look for a better PDF viewing experience

A plugin that embeds PDF's, Word and Powerpoint files in a very cool, usable and fast Flash interface.

Visit site …

Palm Pre: everything you ever wanted to know - Engadget

This is the only device I would consider as replacement for my iPhone. Palm seems to have done some essential things right, like contact management by pulling data from various services in the cloud. I love the zoomable UI and the card metaphor for app switching.

Visit site …

Release:jQuery 1.3 - jQuery JavaScript Library

Some very nice features and performance improvements in this release, among which the Sizzle CSS selector engine (currently fastest avaiable), live events and much faster HTML injection.

Visit site …

jQuery API Browser v1.3

Improved and also available offline as AIR app.

Visit site …

A List Apart: Articles: Return of the Mobile Style Sheet

"What can be done for mobile browsers that do not read handheld style sheets, or parse CSS Media Queries? Short of ignoring them, there are two options."

Visit site …

Mapeed.AddressChooser API documentation | Home

Cool Javascript component that can be used for address collection in forms, combining HTML form and Google Maps for dynamic place retrieval and auto-completion.

Visit site …

Digital Ethnography

Blog of Michael Wesh, cultural anthropologist, professor of the year, and creator of the video "Web 2.0 … The Machine is Us/ing Us".

Visit site …

Components Versus Patterns

Analysis on the differences and commonalities between components and patterns. "Although the two concepts are strongly related, their differences warrant consideration to ensure you are building the type of library that’s right for you."

Visit site …

The State of the Web 2008 | Web Directions

"Welcome to this detailed report from our first “State of the Web” survey of professional web designers and developers. It includes details and analysis of all the responses to over 50 questions covering technologies, techniques, philosophies and practices that today’s web professionals employ."

Visit site …

The Curious Case of Twply and Twitter - Bokardo

Excellent interface analysis of twply: "Moral of the story? Design can effectively be used to deceive people. Deal only with those services you know and trust. "

Visit site …

Subscribe

Or choose one of the single feeds:
Journal feed | Elsewhere feed