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>

您可能会注意到每个输入字段都缺少关联的label;这个设计依赖于表的标题来描述每个输入元素应该包含的内容。

这可以访问吗？
标记重复输入字段而不重复每行label的理想方法是什么？这是实现aria-labelledby的理想用例吗？

Answer 1

我只是用我的屏幕阅读软件看了这个，虽然它在技术上是可访问的但很难使用。具体来说，我倾向于在填写表单时从表单字段跳转到具有热键的表单字段。在您的示例中，这不起作用，我必须使用导航键逐个单元格读取表格，以便使用关联的表单字段读取相应的列标题。虽然我没有太多的Web开发经验，但似乎aria-labelledby将解决您的问题。如果你看下面的内容 jsFiddle我在第一行字段中使用了aria-labelled。第一行中的任何字段都宣布了有意义的名称，在这种情况下是与该字段对应的标题。由于我没有在其他行上使用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>

Answer 2

你可以做Jared所说的，或者在这种情况下，我会支持使用title上的<input>属性。

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

ARIA标记可以工作，但是...我发现，到目前为止，最简单和最有效的解决方案是重复表单元素时的title属性，特别是如果它们是动态创建的。正如Ryan B所暗示的那样。

有时候更简单实际上更好。

标记重复的表单字段

3 个答案: