Labeling repetitive form fields

Question

Consider the following form (jsFiddle here):

<table class="table table-striped table-bordered table-condensed">
    <caption><h2><em>-Express=</em> Time Entry</h2></caption>
    <thead>
        <tr>
            <th>Date</th>
            <th>Hours</th>
            <th>Notes</th>
        </tr>
    </thead>
    <tfoot class="well">
        <tr>
            <td colspan="4">
                <input type="submit" name="Submit" value="Submit Time Entry" class="btn btn-primary">
            </td>
        </tr>
   </tfoot>
    <tbody>
        <tr>
            <td scope="row">
                <input type="date" name="date1" id="date1" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
            </td>
            <td>
                <input type="number" name="hours1" id="hours1" step="0.25" min="0" max="24" class="number span6">
            </td>
            <td>
                <textarea rows="1" cols="25" name="notes1" id="notes1" wrap="soft" class="span12"></textarea>
            </td>
        </tr>
        <tr>
            <td scope="row">
                <input type="date" name="date2" id="date2" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
            </td>
            <td>
                <input type="number" name="hours2" id="hours2" step="0.25" min="0" max="24" class="number span6">
            </td>
            <td>
                <textarea rows="1" cols="25" name="notes2" id="notes2" wrap="soft" class="span12"></textarea>
            </td>
        </tr>
        <tr>
            <td scope="row">
                <input type="date" name="date3" id="date3" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
            </td>
            <td>
                <input type="number" name="hours3" id="hours3" step="0.25" min="0" max="24" class="number span6">
            </td>
            <td>
                <textarea rows="1" cols="25" name="notes3" id="notes3" wrap="soft" class="span12"></textarea>
            </td>
        </tr>
    </tbody>
</table>

You might notice that each of the input fields lack an associated label; this design relies on the table's headers to describe what should go into each input element.

1. Is this accessible?
2. What is the ideal way to label repetitive input fields without repeating the label for each row? Is this an ideal use-case for implementing aria-labelledby?

Answer 1

You can do what Jared said, or in this case, I would support using the title attribute on the <input>s.

 <input type="date" name="date1" id="date1" 
  min="2014-01-02" max="2014-03-02" value="" maxlength="10" 
  class="span8 date" title="date worked">

Answer 2

I just looked at this with my screen reading software and while it is technically accessible it is difficult to use. Specifically I tend to jump from form field to form field with hotkeys when filling out a form. With your example this does not work, I have to use navigation keys to read the table cell by cell so the corresponding column header will be read with the associated form field. While I do not have much web development experience it appears that aria-labelledby will fix your issue. If you look at the following jsFiddle I used aria-labelledby ion the first row of fields. Any fields in the first row had meaningful names announced, in this case the header corresponding to the field. Since I did not use aria-labelledby on the other rows field labels were not automatically announced and I had to use table navigation to determine what the fields were. See jsFiddle code below.

<table class="table table-striped table-bordered table-condensed">
    <caption><h2><em>-Express=</em> Time Entry</h2></caption>
    <thead>
        <tr>
            <th><div id="dateInput">Date</div></th>
            <th><div id="hoursInput">Hours</div></th>
            <th><div id="notesInput">Notes</div></th>
        </tr>
    </thead>
    <tfoot class="well">
        <tr>
            <td colspan="4">
                <input type="submit" name="Submit" value="Submit Time Entry" class="btn btn-primary">
            </td>
        </tr>
   </tfoot>
    <tbody>
        <tr>
            <td scope="row">
                <input type="date" aria-labelledby="dateInput" name="date1" id="date1" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
            </td>
            <td>
                <input type="number" name="hours1" id="hours1" aria-labelledby="hoursInput" step="0.25" min="0" max="24" class="number span6">
            </td>
            <td>
                <textarea rows="1" cols="25" name="notes1" id="notes1" aria-labelledby="notesInput" wrap="soft" class="span12"></textarea>
            </td>
        </tr>
        <tr>
            <td scope="row">
                <input type="date" name="date2" id="date2" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
            </td>
            <td>
                <input type="number" name="hours2" id="hours2" step="0.25" min="0" max="24" class="number span6">
            </td>
            <td>
                <textarea rows="1" cols="25" name="notes2" id="notes2" wrap="soft" class="span12"></textarea>
            </td>
        </tr>
        <tr>
            <td scope="row">
                <input type="date" name="date3" id="date3" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
            </td>
            <td>
                <input type="number" name="hours3" id="hours3" step="0.25" min="0" max="24" class="number span6">
            </td>
            <td>
                <textarea rows="1" cols="25" name="notes3" id="notes3" wrap="soft" class="span12"></textarea>
            </td>
        </tr>
    </tbody>
</table>

Answer 3

ARIA markup will work, but... I find, by far, the simplest and most effective solution is the title attribute when you have repeated form elements, especially if they are created dynamically. Just as Ryan B suggests.

Sometimes simpler is actually better.