HTML5 Раздел 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>