Атрибут aria-* тега <tfoot>
Описание
Атрибуты aria-* в теге <tfoot> обеспечивают дополнительную семантику и информацию для вспомогательных технологий, таких как скринридеры. Они особенно важны для интерактивных или динамически обновляемых таблиц.
<table>
<tfoot aria-live="polite" aria-atomic="true">
<tr>
<td>Итого: <span id="total">100</span> руб.</td>
</tr>
</tfoot>
</table>
Наиболее полезные ARIA-атрибуты для <tfoot>:
| Атрибут | Описание | Пример значения |
|---|---|---|
aria-live |
Определяет, как объявлять динамические изменения | "polite", "assertive", "off" |
aria-atomic |
Указывает, объявлять ли все содержимое при изменениях | "true", "false" |
aria-label |
Краткое описание для скринридеров | "Итоговая сумма" |
aria-describedby |
Связывает с элементом, содержащим описание | ID описательного элемента |
aria-rowcount |
Общее количество строк в таблице (если известно) | Числовое значение |
Пример комплексного использования:
<table aria-rowcount="5">
<tfoot aria-label="Итоговая строка"
aria-describedby="summary-help"
aria-live="polite">
<tr aria-rowindex="5">
<td>Общий итог: <span id="grand-total">0</span></td>
</tr>
</tfoot>
</table>
<div id="summary-help" hidden>Сумма всех значений таблицы</div>
<script>
// Динамическое обновление будет объявлено скринридером
function updateTotal(value) {
document.getElementById('grand-total').textContent = value;
}
</script>
Рекомендации:
- Используйте
aria-liveдля динамически обновляемых итогов - Сочетайте с
aria-atomic="true"для полного объявления изменений - Добавляйте
aria-labelилиaria-describedbyдля пояснения - Для больших таблиц указывайте
aria-rowcountиaria-rowindex
Ограничения:
- Избыточное использование ARIA может ухудшить доступность
- Поддержка различается в разных скринридерах
- Требует тщательного тестирования с реальными пользователями
Примечание: Для сложных интерактивных таблиц:
- Используйте специализированные роли (
grid,treegrid) - Рассмотрите библиотеки доступных компонентов (React Aria)
- Следуйте рекомендациям WAI-ARIA Authoring Practices