Rip's Domain

Is anyone reading this blind??? A form question.

Posted in ColdFusion, Question by rip747 on August 28, 2007

Now before you go a lam blast me for the title…. read on.

In the web development community there is this big debate (fight) going on about the right way to develop and display forms on a web site.

Basically as I can see it there are 3 ways to do it:

Tables – We’re all guilty of doing it and some of us (me) still do it… using tables to display forms. Basically you put each label within a TH tag and each input field within a TD tag.

<table>
<tr>
<th><label for=”firstname”>First Name:</label></th>
<td><input id=”firstname” name=”firstname”/></td>
</tr>
</table>

Definition Lists – Each label goes within a DT tag and each input field within a DD tag.

<dl>
<dt><label for=”firstname”>First Name:</label></dt>
<dd><input id=”firstname” name=”firstname”/></dd>
</dl>

Unsorted Lists – You put a label and input field within one LI tag.

<ul>
<li><label for=”firstname”>First Name:</label><br/><input id=”firstname” name=”firstname”/></li>
</ul>

Ask 3 web sites developers and I can bet each one of them will choose one of the 3 methods above and in the end one will use tables, one will use definition lists and the last will use unsorted lists.

The question is though, “What do blind people perfer?”. I don’t think I’ve ever read a single opinion the started with, “I’m blind and I prefer xxx.”. This debate could go on forever, unless the blind community steps up and gives us a preferred direction.

So if anyone reading this is blind, tell me how should we be coding out forms to help you out?

5 Responses

Subscribe to comments with RSS.

  1. Joshua May said, on August 29, 2007 at 10:45 pm

    I take a different tact – I think, it’s better.

    I tend to do it like:

    Label:

    Do some CSS ninja’ing and there you have it.

    To me, it’s more semantically correct (after all, it’s technically not tabular, a list, or a definition list – arguably, anyway). Though, you have a redundant , but eh.

    Still though, very interested to know what people think is best. I’ve only been guessing for years.

  2. Joshua May said, on August 30, 2007 at 12:24 am

    Damn, tags got stripped. Let’s try this again. (Use your imagination!)

    [div class=”form-row”]
    [label for=”input_id”]Label:[/label]
    [input type=”text” id=”input_id” /]
    [/div]

    Repeat as necessary throughout the form!

  3. Jorrt said, on August 30, 2007 at 6:14 am

    I think what’s more important than labeling the inputs is to use an alt property for every form input item. This will be picked up by screen readers, I’m not sure that this is the case with label tags.

    About Joshua’s approach: it’s important when you lay-out your form with DIVs and CSS-ninja-style skills to use the tabindex property.

    If you haven’t done allready, check the list of Web Accessibility Evaluation Tools:
    http://www.w3.org/WAI/ER/tools/

  4. troll said, on August 30, 2007 at 10:57 am

    “I’m blind and I prefer XXX.”

    -You might want to rephrase that.

  5. rip747 said, on September 26, 2007 at 10:03 pm

    @troll

    Hell no!!! I can see and prefer xxx😉


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: