Search code examples
htmlaccessibilitysection508

Labeling repetitive form fields


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?

Solution

  • 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">