WCAG 1.3.2 Значимая последовательность

Критерий успеха 1.3.2 нужен для того, чтобы при чтении страницы программой экранного доступа (скринридером) сверху вниз или при показе страницы без стилей контент всё равно шёл в осмысленном порядке. Это уровень A и часть EN 301 549 (пункт 9.1.3.2). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

Если последовательность, в которой подаётся контент, влияет на его смысл, правильная последовательность чтения должна быть программно определяемой — на практике порядок элементов в HTML (порядок DOM) должен передавать этот смысл.

Стоит знать две вещи:

• критерий применяется только там, где порядок важен. Навигация, основной контент и боковая панель могут идти в любом порядке; контент внутри статьи, формы или блока с ценой должен оставаться упорядоченным;
• достаточно хотя бы одной осмысленной последовательности. Она не обязана быть единственно возможной.

Типичные ошибки в интернет-магазине

• CSS order, flex-direction: row-reverse или размещение в grid визуально ставит цену перед названием товара, а в коде порядок другой;
• блок «было / стало», где код читает новую цену как «было»;
• таблица размеров или сравнение, свёрстанные колонками с помощью пробелов или div, которые при чтении по строкам превращаются в бессмыслицу;
• таблица для вёрстки, которая теряет смысл, если читать её ячейки одну за другой;
• cookie-баннер или всплывающее окно, вставленное в конец кода, но показанное вверху, из-за чего его контекст зачитывается последним.

Как проверить

Автоматически: в нашей проверке нет автоматического правила для этого критерия. Инструмент видит порядок DOM, но не видит, меняется ли смысл. Здесь нужна ручная проверка.

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

Как исправить

• Пишите HTML в том порядке, в котором его нужно читать, а CSS используйте только для вёрстки, не для изменения смысла.
• Избегайте перестановки через CSS для контента, порядок которого важен; если на мобильных нужен другой порядок, измените разметку.
• Для табличных данных используйте настоящие таблицы, а не пробелы или позиционированные блоки.
• Вставляйте диалоги и баннеры в DOM там, где им логически место, и переводите фокус в модальные диалоги.

Связанные критерии

• 1.3.1 Информация и взаимосвязи — структура, размеченная в коде.
• 1.3.3 Сенсорные характеристики — инструкции, которые опираются на расположение.
• Чек-лист WCAG 2.2 — включая 2.4.3 «Порядок фокуса».

Частые вопросы

Должен ли порядок в коде совпадать с визуальным порядком?

Только там, где порядок влияет на смысл. Независимые блоки, например навигация и основной контент, могут идти в любом порядке; шаги рецепта, цена и её подпись или название товара и его характеристики должны оставаться в осмысленной последовательности.

Является ли перестановка через CSS flex или grid нарушением?

Не автоматически. Нарушением она становится, когда переставленная визуальная последовательность несёт смысл, которого нет в порядке кода, — например, когда «старая цена» и «новая цена» меняются местами.

1.3.2 — это то же самое, что порядок фокуса?

Нет. 1.3.2 касается порядка чтения контента. Порядок, в котором перемещается фокус клавиатуры, регулирует 2.4.3 «Порядок фокуса», хотя исправляют оба обычно одинаково.