html - 标记重复的表单字段

Question

考虑以下形式 ( 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>

您可能会注意到每个输入字段都缺少关联的标签；此设计依赖于表格的标题来描述应该进入每个输入元素的内容。

1. 这是无障碍的吗？
2. 在不为每一行重复 label 的情况下标记重复输入字段的理想方法是什么？这是实现 aria-labelledby 的理想用例吗？ ？

Answer 1

我刚刚用我的屏幕阅读软件看了这个，虽然它在技术上可以访问，但很难使用。具体来说，我倾向于在填写表单时使用热键从一个表单域跳到另一个表单域。对于您的示例，这是行不通的，我必须使用导航键逐个单元格地读取表格，以便使用关联的表单字段读取相应的列标题。虽然我没有太多的网络开发经验，但 aria-labelledby 似乎可以解决您的问题。如果你看下面的 jsFiddle我在第一行字段中使用了 aria-labelledby ionic 。第一行中的任何字段都宣布了有意义的名称，在本例中是与该字段对应的标题。由于我没有在其他行上使用 aria-labelledby，字段标签不会自动公布，我不得不使用表格导航来确定字段是什么。请参阅下面的 jsFiddle 代码。

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