Как обеспечить доступность таблицы с DataTables и ARIA

При работе с jquery datatables важно учитывать, что таблицы часто становятся «скрытыми» для пользователей с нарушениями зрения. Чтобы сделать их accessible datatables aria, нужно добавить правильные ARIA‑атрибуты и роли. Это позволит скрин‑ридерам корректно интерпретировать tabular data и выводить его в понятном виде. В этой статье мы разберём, как добавить ARIA‑атрибуты к таблицам, чтобы скрин‑ридеры корректно выводили данные, и какие практические шаги следует выполнить, чтобы обеспечить максимальную доступность.

Разбор задачи

Таблицы, созданные с помощью jquery datatables, обычно используют динамическое добавление строк и сортировку. При этом многие ARIA‑атрибуты теряются: role="grid", aria-rowcount, aria-colcount и т.д. Скрин‑ридер может не понять, что это таблица, и не передавать заголовки в правильном порядке. Поэтому необходимо явно задать роли и атрибуты, а также убедиться, что заголовки th связаны с ячейками td через id и aria-labelledby. Это повышает совместимость с VoiceOver, NVDA, JAWS и другими клиентами.

Пошаговое решение

1. Добавьте к <table> атрибут role="grid" и укажите aria-rowcount и aria-colcount с реальными значениями. 2. Для каждой <th> задайте уникальный id и добавьте scope="col". 3. Внутри <td> используйте aria-labelledby, ссылаясь на соответствующий th. 4. Если таблица содержит вложенные заголовки, применяйте aria-rowspan и aria-colspan. 5. Убедитесь, что скрипт DataTables не удаляет эти атрибуты при обновлении DOM. Для этого можно воспользоваться коллбэком createdRow и вручную добавлять атрибуты. 6. Проверьте таблицу в браузере с включённым скрин‑ридером и убедитесь, что заголовки читаются в правильном порядке. При необходимости скорректируйте атрибуты aria-describedby для описания групп. 7. Добавьте aria-live="polite" к контейнеру таблицы, чтобы динамические обновления передавались пользователю без прерывания текущего чтения. 8. Не забывайте про role="row" и role="columnheader" для строк и заголовков, чтобы скрин‑ридер распознал структуру. 9. Для мобильных устройств убедитесь, что таблица адаптивна и не становится «массой» данных без контекста. 10. Регулярно тестируйте с различными скрин‑ридерами и обновляйте атрибуты по мере изменений в структуре таблицы. Следуя этим шагам, вы сделаете accessible datatables aria и обеспечите корректную работу для всех пользователей.

Рабочий код

// Инициализация DataTables с ARIA атрибутами
$('#example').DataTable({
  dom: 'Bfrtip',
  buttons: [
    {
      extend: 'csv',
      text: 'Экспорт CSV',
      exportOptions: {
        columns: ':visible'
      }
    }
  ],
  language: {
    aria: {
      sortAscending:  ': активировать для сортировки по возрастанию',
      sortDescending: ': активировать для сортировки по убыванию'
    }
  },
  // Автоматически добавляем роли ARIA к таблице
  initComplete: function () {
    var api = this.api();
    $(api.table().node()).attr('role', 'grid');
    api.columns().every(function () {
      var column = this;
      $(column.header()).attr('role', 'columnheader');
    });
    api.rows().every(function () {
      var row = this;
      $(row.node()).attr('role', 'row');
      row.data().forEach(function (cell, idx) {
        $(row.node().children[idx]).attr('role', 'gridcell');
      });
    });
  }
});

Типичные ошибки

1. Пренебрежение атрибутами aria-sort на заголовках. Без них скрин‑ридеры не сообщат направление сортировки.
2. Неуказание роли ‘grid’ у table, а вместо этого использование роли ‘table’. Это вызывает путаницу у технологий чтения.
3. Скрытая информация с помощью CSS (visibility:hidden) вместо aria-hidden=’true’. Это ломает навигацию для пользователей клавиатурой.
4. Дублирование id в динамических строках, что приводит к конфликтам при доступности.

FAQ

Как добавить ARIA-описания к кнопкам DataTables?

Укажите aria-label в опции buttons или используйте titleAttr для автоматического описания.

Можно ли использовать DataTables без jQuery?

Начиная с версии 1.10 можно подключать DataTables через ES‑модули, но большинство готовых плагинов всё ещё зависят от jQuery, поэтому переходим к чистому JS только при необходимости.

Как проверить доступность таблицы?

Используйте Lighthouse в Chrome DevTools, axe‑core или NVDA + клавиатура для тестирования ролей и навигации.

Заключение и чек‑лист

1. Добавьте role=’grid’ к таблице.
2. Установите role=’columnheader’ и aria-sort на заголовки.
3. Добавьте role=’row’ и role=’gridcell’ к строкам и ячейкам.
4. Используйте aria-label для кнопок и динамических элементов.
5. Проверьте работу с клавиатурой и скрин‑ридером.
6. Сканируйте страницу Lighthouse и axe‑core для финального контроля. Такой подход гарантирует, что ваши таблицы DataTables будут доступны всем пользователям.