WCAG 1.4.10 Перекомпоновка (reflow)

Критерий успеха 1.4.10 помогает людям со слабым зрением, которые сильно увеличивают страницу. Когда контент перестраивается в одну колонку, им достаточно прокручивать в одном направлении; когда нет — приходится двигать страницу влево-вправо на каждой строке. Критерий добавлен в WCAG 2.1, относится к уровню AA и входит в EN 301 549 (пункт 9.1.4.10). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

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

Контент можно отобразить без потери информации или функциональности и без необходимости прокрутки в двух измерениях:

• для контента с вертикальной прокруткой (обычные веб-страницы) — при ширине, эквивалентной 320 CSS-пикселям;
• для контента с горизонтальной прокруткой — при высоте, эквивалентной 256 CSS-пикселям.

320 CSS px — это то, что показывает окно настольного браузера шириной 1280 CSS px при масштабе 400 %; 256 CSS px соответствуют окну высотой 1024 px при 400 %.

Исключение: части контента, которым для использования или смысла нужна двумерная раскладка. WCAG называет изображения вроде карт и схем, видео, игры, презентации, таблицы с данными (но не их отдельные ячейки) и интерфейсы, где панели инструментов должны оставаться на виду во время работы с контентом. Только такие части могут прокручиваться в обе стороны.

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

• страница шире экрана при 320 px из-за баннера, iframe или таблицы вариантов товара фиксированной ширины;
• главное меню или фильтры исчезают при большом масштабе, и до них нельзя добраться другим способом;
• закреплённая шапка и баннер cookie закрывают большую часть маленькой области просмотра;
• длинные названия товаров, артикулы или URL не переносятся и растягивают макет вбок;
• оформление заказа в две колонки, которые не помещаются и требуют горизонтальной прокрутки.

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

Автоматически: ни одно автоматическое правило нашей проверки не соответствует этому критерию. Перекомпоновка зависит от раскладки при конкретном масштабе и от того, теряется ли что-то, а это правило оценить не может. Здесь нужна ручная проверка.

Вручную: задайте окну настольного браузера ширину 1280 px и увеличьте масштаб до 400 % или используйте эмуляцию устройства 320 × 256 px для горизонтального контента. Пройдите главную, категорию, карточку товара, корзину и оформление заказа. Убедитесь, что вам ни разу не нужно прокручивать вбок, чтобы прочитать текст, что весь контент и меню на месте и что ничего не перекрывается.

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

• Используйте адаптивную раскладку с гибкой шириной (ширина в процентах, max-width, minmax() в grid) вместо фиксированной ширины в пикселях.
• Разрешите перенос длинных слов и URL (overflow-wrap: anywhere).
• Поместите широкие таблицы с данными в контейнер с собственной прокруткой, а остальная страница пусть перекомпоновывается.
• Сделайте встроенные видео и iframe адаптивными.
• Делайте закреплённые шапки небольшими или открепляйте их на узких экранах.

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

• 1.4.4 Изменение размера текста — текст при масштабе 200 %.
• 1.4.12 Интервалы в тексте — увеличенные интервалы без потерь.
• 1.3.4 Ориентация — книжная и альбомная ориентация.

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

Как проверить перекомпоновку по WCAG?

Откройте страницу в окне настольного браузера шириной 1280 CSS px и увеличьте масштаб до 400 % или задайте в инструментах разработчика ширину области просмотра 320 px. Прокрутите страницу вниз и выполните ключевые действия: вам ни разу не должно понадобиться прокручивать вбок, чтобы прочитать текст или добраться до элемента управления.

Можно ли таблицам с данными прокручиваться горизонтально?

Да. Контент, которому для смысла или использования нужна двумерная раскладка — таблицы с данными, карты, схемы, видео, игры, панели инструментов, которые должны оставаться на виду, — может прокручиваться в двух направлениях. Остальная часть страницы всё равно должна перекомпоновываться.

Достаточно ли адаптивной темы для 1.4.10?

Обычно это хорошее начало, но проверить всё равно нужно. Элементы фиксированной ширины, широкие встраиваемые блоки, длинные слова или URL и закреплённые шапки часто ломают перекомпоновку даже в адаптивных темах.

Чем 1.4.4 отличается от 1.4.10?

1.4.4 «Изменение размера текста» требует, чтобы текст работал при масштабе 200 %. 1.4.10 «Перекомпоновка» требует, чтобы при 400 % (ширина 320 px) контент помещался без горизонтальной прокрутки.