HTML5 Section 508 符合动态生成的非标记输入表

Question

例如，如果我的表格是这样的:

<table>
        <tr>
            <td>Field 1</td>
            <td>Field 2</td>
            <td>Field 3</td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
    </table>

仅作为一般布局的示例。然而，行数是根据 angularJS 的一系列条件动态生成的(太多无法在此处发布)如何以符合 508 标准的方式将不可见标签添加到输入字段？ 我不熟悉这种方式的可访问性。提前致谢!

Answer 1

在输入元素上使用 aria-labelledby 属性来引用标题列。

<table>
    <tr>
        <th id="field1">Field 1</td>
        <th id="field2">Field 2</td>
        <th id="field3">Field 3</td>
    </tr>
    <tr>
        <td>
            <input type="text" aria-labelledby="field1" />
        </td>
        <td>
            <input type="text" aria-labelledby="field2" />
        </td>
        <td>
            <input type="text" aria-labelledby="field3" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" aria-labelledby="field1" />
        </td>
        <td>
            <input type="text" aria-labelledby="field2" />
        </td>
        <td>
            <input type="text" aria-labelledby="field3" />
        </td>
    </tr>
</table>