Новый блок на странице
Что делаем: добавляем на страницу блок «Приём из последнего выпуска» с фрагментом CSS в pre.
Что изменилось
Рассылка теперь показывает кусок кода. Все десять тестов по-прежнему зелёные: заголовки, подписи, кнопка и axe ничего плохого не нашли.
Но откройте страницу на узком экране или сузьте панель превью. Длинная строка кода не переносится и выпирает за край: появляется горизонтальная прокрутка всей страницы. На широком экране этого не видно, поэтому такую ошибку легко пропустить.
Проверка руками
Включите в DevTools режим адаптивной вёрстки и поставьте ширину 320 px. Это самая узкая ширина, под которую принято проверять страницы. Ползунок прокрутки внизу страницы говорит об ошибке.
Источники
- Элемент pre: предварительно отформатированный текст, строки в нём не переносятся.
- WCAG 2.2, перетекание содержимого: страница не должна требовать прокрутки в двух направлениях на ширине 320 px.