HTML-таблица или ARIA grid: как выбрать навигацию с клавиатуры

Обычная HTML-таблица подходит, когда человек читает данные, сравнивает строки и при необходимости переходит по отдельным ссылкам или кнопкам. ARIA grid нужен, когда сама таблица становится виджетом: пользователь перемещается между ячейками стрелками, выбирает диапазоны или редактирует значения. Это не просто дополнительная разметка: вместе с grid разработчик берет на себя управление фокусом и клавиатурные команды.

Визуально одинаковые сетки могут вести себя по-разному. Таблица заказов с колонками «Номер», «Клиент», «Сумма», «Статус» обычно служит для чтения, сортировки и перехода в карточку заказа. Пользователь не ожидает, что стрелка вправо перенесёт фокус с номера на клиента. В такой ситуации семантическая HTML-таблица и доступные ссылки или кнопки в ячейках сохраняют привычное поведение браузера.

Таблица становится интерактивной сеткой, если основной сценарий похож на работу в электронной таблице: переход по ячейкам стрелками, выбор одной или нескольких ячеек, редактирование, копирование или вставка. Например, оператор меняет значения по строкам и должен быстро обходить сотни полей, не нажимая Tab на каждый отдельный контрол. Здесь grid может дать компактный путь по двумерной структуре.

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

HTML-таблица описывает отношения данных: заголовки столбцов и строк, ячейки и их содержание. Браузер и вспомогательные технологии используют эту структуру, чтобы сообщать контекст при чтении. Фокусируемые ссылки, кнопки и поля внутри таблицы остаются отдельными остановками клавиши Tab. Это соответствует странице, на которой пользователь перемещается от одного интерактивного элемента к другому.

ARIA grid — составной виджет. Обычно в последовательность Tab включается входная точка сетки, а внутри неё фокус перемещается программно. Стрелки ведут по строкам и столбцам; дополнительные клавиши могут перемещать к началу строки или сетки, выбирать диапазон и включать редактирование. Такой режим экономит переходы для плотной работы с ячейками, но команда должна реализовать каждое обещанное действие.

У grid есть и цена для пользователя. Если переключиться в него, а стрелки не работают, фокус теряется при обновлении строк или экранный диктор не объявляет заголовок текущей ячейки, таблица становится сложнее исходной. WAI-ARIA Authoring Practices Guide отдельно предупреждает: все ячейки сетки должны быть доступны для фокуса или содержать фокусируемый элемент, а разработчик отвечает за передвижение фокуса внутри компонента.

Это не рейтинг «современности». Оба варианта могут быть доступными. Выбирайте тот, который точнее описывает работу пользователя и который команда готова полностью поддерживать.

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

Для data grid начните с одной входной точки по Tab и понятной стратегии фокуса: фокусируется сама ячейка или контрол внутри неё. WAI-ARIA APG описывает распространённую модель: стрелки двигают фокус по ячейкам; Home и End — к началу и концу строки; Ctrl+Home и Ctrl+End — к краям всей сетки. Это шаблон взаимодействия, а не обязательная схема для каждого продукта: объясните только те команды, которые действительно реализовали, и сохраняйте поведение предсказуемым.

Выход из сетки должен быть очевидным. Если Tab внутри grid переводит на следующую ячейку вместо выхода, пользователь может не знать, как перейти к кнопке под таблицей. В типичной модели стрелки используются внутри компонента, а Tab покидает его или переводит к следующему фокусируемому участнику по оговорённому поведению. Обозначьте эту логику в подсказке, если она не очевидна, и проверьте её на клавиатуре без мыши.

Показывайте видимый фокус в каждой позиции. Подсветка выбранной строки, hover-цвет и рамка фокуса решают разные задачи: первая показывает данные, вторая — указатель, третья — текущую клавиатурную позицию. Не смешивайте их так, чтобы после прокрутки было невозможно понять, какая ячейка активна.

Редактирование создаёт второй режим: перемещение по сетке и работа внутри поля. В текстовом поле стрелки передвигают курсор, а в grid они могут менять текущую ячейку. Без явного перехода эти команды конфликтуют. Определите, какая клавиша открывает редактирование, какая подтверждает значение, какая отменяет его и как пользователь возвращается к навигации по сетке.

WAI-ARIA APG приводит распространённые соглашения: Enter или F2 переводит фокус в редактор ячейки или на первый контрол; Escape возвращает навигацию по сетке. Это примеры, которые нужно сверить со сценарием продукта, а не копировать механически. Если поле сохраняет данные автоматически, сообщите о результате понятным текстом и сохраняйте позицию пользователя. Если нужно подтверждение, покажите его до выхода из режима.

В ячейке с комбобоксом или группой переключателей стрелки уже имеют собственное значение. Пользователю может понадобиться сначала активировать контрол, а затем пользоваться его клавишами; при закрытии он должен понять, возвращается ли в сетку фокус и на какую ячейку. Чем больше смешанных контролов, тем выше цена реализации grid и тем важнее прототип клавиатурной модели.

В таблице заказов часто проще дать Tab к кнопке «Редактировать» в конкретной строке. В матрице расписания, где значения меняют массово в соседних ячейках, режим сетки может быть уместнее. Сначала выбирайте поведение по повторяющейся работе, а не по одному редкому действию.

Управляемый фокус не заменяет отношения между заголовком и значением. При перемещении в ячейку человеку нужно понять, что означает значение: «Пятница, 14:00» само по себе может быть недостаточным, если не объявлено имя столбца «Начало смены». Используйте семантические заголовки строк и столбцов; в обычной HTML-таблице это обычно th с корректным scope. Для сложных групп заголовков проверяйте связи отдельно.

Дайте таблице краткое название или описание, если оно помогает понять её назначение: например, «Заявки на возврат за текущую неделю». Не полагайтесь только на визуальный заголовок, если он не связан с таблицей программно. Для grid задайте доступное имя и при необходимости описание через соответствующие атрибуты, указывающие на видимый текст.

Сетка часто обновляется после сортировки, фильтра или подгрузки следующего набора строк. После обновления сохраните фокус на той же логической записи, если она осталась в результате, или сообщите, почему позиция изменилась. Нельзя без объяснения сбрасывать фокус на начало страницы: пользователь теряет место и контекст строки.

Если таблица виртуализирована и часть строк отсутствует в DOM, технологии доступа могут видеть не весь набор. WAI-ARIA APG рекомендует отражать полное число строк и колонок, а также положение ячейки, когда содержание динамически скрывается или добавляется. Эти атрибуты не исправляют ошибочную модель навигации, но помогают сообщить позицию в большой сетке. Проверьте поведение на крайних строках, после фильтрации и при переходе к следующей странице.

При узком экране клавиатурное управление не должно исчезать. Горизонтальная прокрутка, скрытые столбцы и фиксированные колонки могут менять видимую область, но текущая ячейка должна оставаться заметной. При переходе стрелкой к ячейке за краем сетки прокрутите её в поле зрения. Если мобильная версия превращает таблицу в карточки, проверьте, что порядок чтения и связь каждого значения с его названием сохраняются.

Представим список счетов: номер документа ведёт в карточку, имя клиента — в профиль, а в последней колонке есть кнопка «Ещё». Пользователь обычно читает строку, затем открывает запись или вызывает действие. Оставьте семантическую таблицу; кнопки должны иметь понятные подписи, а колонки — связанные заголовки. Клавиатурный маршрут через Tab здесь не является недостатком: он показывает реальные интерактивные действия.

Теперь представим расписание специалистов, где каждая ячейка — редактируемая смена, а оператор проверяет соседние значения и массово переносит смены между днями. Здесь стрелочная навигация может сократить повторяющиеся переходы. Прежде чем внедрять grid, определите режимы навигации и редактирования, управление выделением, возврат фокуса и сообщение об изменении. Если команда не реализует этот комплект, оставьте поля доступными отдельно.

В обоих примерах сортировка может быть кнопкой в заголовке. Действие сортировки не требует перевести всю таблицу в grid; после активации нужно лишь сообщить новое направление сортировки и сохранить понятную точку фокуса. Сам grid оправдан только тогда, когда навигация по ячейкам является частью основного сценария.

Обычно нет. Сортировка добавляет действие к заголовку, но не означает, что пользователь перемещается между ячейками как внутри составного виджета. Используйте семантическую HTML-таблицу и доступную кнопку сортировки; выбирайте grid, когда стрелочная навигация и управление фокусом нужны для основного сценария.

Да. Data grid может помогать перемещаться по интерактивным ячейкам со ссылками, выбирать строки или выполнять команды. Однако роль оправдана только при реальной двумерной клавиатурной модели. Если пользователю достаточно переходить по обычным ссылкам Tab, оставьте таблицу статической по модели.

Оставьте HTML-таблицу, если каждую кнопку можно пройти обычной клавишей Tab и число действий приемлемо для сценария. У каждой кнопки должно быть имя, которое отличает строку, например «Открыть заказ 1048». Grid может быть уместен, если пользователь постоянно обходит множество ячеек или редактирует их.

Универсального набора для всех продуктов нет, но паттерн WAI-ARIA APG описывает ожидаемую навигацию: стрелки между ячейками, Home и End по строке, Ctrl+Home и Ctrl+End по сетке. Добавляйте только поддерживаемые команды, объясняйте их пользователю и проверяйте конфликты со стрелками внутри полей и других виджетов.

ARIA может обозначить роли строк, заголовков и ячеек, однако не создаёт встроенное поведение HTML table. Для обычных данных предпочтительнее нативный элемент table. При создании grid на div команда вручную отвечает и за структуру доступности, и за клавиатурное взаимодействие.

Начните с одной клавиатуры: пройдите вход, все действия, выход и изменения данных, наблюдая за видимым фокусом. Затем используйте экранный диктор, чтобы проверить объявление имени таблицы, заголовков и текущей ячейки. Автоматическая проверка разметки полезна, но не заменяет проверку полного сценария.

Модель поведения сверена с WAI-ARIA Authoring Practices Guide, разделами о data grid, управлении фокусом и редактировании внутри ячеек: https://www.w3.org/WAI/ARIA/apg/patterns/grid/ . Определение роли и клавиатурных взаимодействий также описано в MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/grid_role . Для многих задач достаточно HTML table; роли ARIA не добавляют программную клавиатурную модель автоматически.

Выбирайте семантическую HTML-таблицу, если человек читает данные и переходит между отдельными действиями. Переходите к ARIA grid, когда двумерная навигация по ячейкам — основная задача и команда готова реализовать фокус, клавиатурные команды, редактирование и объявления для вспомогательных технологий. Сначала зафиксируйте сценарий, затем выбирайте разметку; при работе над собственным шрифтом и его проверкой воспользуйтесь инструментами Fontgenerator на https://fontgenerator.ru/ .