Как сделать горизонтальный скролл таблицы доступным, если он находится далеко внизу?

Когда таблица шире экрана, браузер создаёт горизонтальную прокрутку. Но если контейнер не фокусируемый, пользователи, работающие только с клавиатуры, не смогут до него добраться: Tab перепрыгнет сразу к следующему элементу, а стрелки будут прокручивать страницу, а не таблицу. Это классическая проблема доступности.

Как сделать скролл доступным

Контейнеру, который имеет overflow-x: auto, нужно добавить tabindex="0". Тогда он попадёт в порядок табуляции, и при фокусе стрелки клавиатуры будут прокручивать его содержимое. Дополнительно стоит указать роль region и метку aria-label, чтобы скринридер объявил область как прокручиваемую.

<div class="table-wrapper" tabindex="0" role="region" aria-label="Таблица с горизонтальной прокруткой">
  <table>
    <!-- много колонок -->
  </table>
</div>

<style>
.table-wrapper {
  overflow-x: auto;
  max-width: 100%;
}
.table-wrapper:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}
</style>

Дополнительные улучшения

• Добавьте видимый индикатор фокуса, чтобы пользователь понимал, что элемент активен.
• Если таблица очень широкая, можно добавить кнопки прокрутки или подсказку о том, что контент можно прокручивать.
• Не используйте tabindex больше 0, чтобы не нарушать естественный порядок табуляции.
• Убедитесь, что таблица имеет корректную семантическую разметку <table>, <th>, <caption>.

Такой подход делает таблицу доступной как для клавиатурных пользователей, так и для скринридеров, которые смогут объявить регион и его назначение.

Итог: применяйте tabindex="0" и role="region" с aria-label для контейнеров с горизонтальной прокруткой, чтобы обеспечить доступность таблиц для всех пользователей.