Topic: Accessibility in tabular forms...

Is there an accessible, yet presentation friendly solution for dealing with "bulk update" forms.  Ie something like

<form>
  <table>
    <tr><th>Contact Name</th><th>Contact Email</th><th>Contact Title</th></tr>
    <tr><td><input type="text" name="contact[2][name]" /></td>
           <td><input type="text" name="contact[2][email]" /></td>
           <td><input type="text" name="contact[2][title]" /></td></td>
    <tr><td><input type="text" name="contact[3][name]" /></td>
           <td><input type="text" name="contact[3][email]" /></td>
           <td><input type="text" name="contact[3][title]" /></td></td>
    <tr><td><input type="text" name="contact[4][name]" /></td>
           <td><input type="text" name="contact[4][email]" /></td>
           <td><input type="text" name="contact[4][title]" /></td></td>
   </table>
<input type="submit" />
</form>

Normal accessibility guidelines would indicate that all the non-button inputs have an associated label, but that seems to really mess with the use of screen real-estate.  Is there any more "advanced" accessibiity controls that can help in this situation?

My RoR journey  -- thoughts on learning RoR and lessons learned in applying TDD and agile practices.

Re: Accessibility in tabular forms...

1. Use labels anyway and set them to display: none in your CSS.

2. Use the "headers" attribute of table cells combined with the "id" attribute of table headers like so:

<form>
  <table>
    <tr>
    <th id="contact-name">Contact Name</th>
    <th id="contact-email">Contact Email</th>
    <th id="contact-title">Contact Title</th>
    </tr>
    <tr><td headers="contact-name"><input type="text" name="contact[2][name]" /></td>
           <td headers="contact-email"><input type="text" name="contact[2][email]" /></td>
           <td headers="contact-title"><input type="text" name="contact[2][title]" /></td></tr>
</table>
</form>

This will "link up" the appropriate heading to the current table cell, making screen reader navigation a little easier (but still not as easy as explicit labels). You can also use more than one ID in the "headers" attribute, for example if your cell spans more than one column.

Here's a whole bunch of info on accessible tables: http://www.usability.com.au/resources/tables.cfm

vinnie - rails forum admin

Re: Accessibility in tabular forms...

Or just give the labels/feildsets CSS properties and forgo the use of the table.

<form action="...." method="post">
    <fieldset>
        <label for="name">Your Name:</label>
        <input type="text" name="name">
    </fieldset>
    <fieldset>
        <label for="email">Your Email:</label>
        <input type="text" name="email">
    </fieldset>
    <fieldset for="phone">
        <label>Your Phone:</label>
        <input type="text" name="phone">
    </fieldset>
</form>

fieldset {
    clear:both;
    width:500px;
}

label {
    display:block;
    width:150px;
    float:left;
    text-align:right;
}

input {
    width:350px;
    float:right;
}

Re: Accessibility in tabular forms...

Kelli wrote:

Or just give the labels/feildsets CSS properties and forgo the use of the table.

<form action="...." method="post">
    <fieldset>
        <label for="name">Your Name:</label>
        <input type="text" name="name">
    </fieldset>
    <fieldset>
        <label for="email">Your Email:</label>
        <input type="text" name="email">
    </fieldset>
    <fieldset for="phone">
        <label>Your Phone:</label>
        <input type="text" name="phone">
    </fieldset>
</form>

fieldset {
    clear:both;
    width:500px;
}

label {
    display:block;
    width:150px;
    float:left;
    text-align:right;
}

input {
    width:350px;
    float:right;
}

Well he's talking about tables with lots of records worth of information in them (a classic DataGrid type widget), where clicking/double-clicking the record will allow in-place editing for that one record, not so much a form for creating/updating a single record, which is what I think you posted.

vinnie - rails forum admin

Re: Accessibility in tabular forms...

Ah, I should have read more closely, sorry. :)That makes sense. I guess a hidden label is the best way to go, then, but yah, the markup's going to look a little cluttered. hmm