Закреплённая шапка сайта: что проверить на телефоне до согласования дизайна

Первый экран и набор действий

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

Что остаётся наверху

Для страницы услуги с якорями и формой я выбираю компактную закреплённую полосу: название компании, вход в меню и одно нужное действие. Полный набор телефона, адреса, поиска, рекламной строки и нескольких кнопок лучше оставить в обычной верхней части страницы. Каждый дополнительный ряд отнимает место у предложения. Внутри меню контакты по-прежнему доступны, зато при чтении человек видит больше содержания. Это выбор по задаче страницы, а не правило о единственно правильной высоте.

• Открытие страницы. Заголовок и начало предложения видны без попадания под панель. Верхний отступ сохраняется после загрузки логотипа и шрифта.
• Состав шапки. У каждого элемента есть назначение: перейти к разделам, позвонить, открыть форму. Второй логотип, лозунг и повтор той же кнопки не помогают двигаться по странице.
• Короткий экран. При повороте телефона содержимое не зажимается между шапкой и нижними панелями. Можно прочитать хотя бы связный фрагмент и продолжить прокрутку.
• Крупный текст. Названия не обрезаются, кнопки не накладываются друг на друга. Если строка переносится, шапка не заслоняет начало страницы.

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

Слова «фиксированная» и «липкая» описывают разные способы размещения. В справке MDN о position значение fixed выводит элемент из обычного потока, а sticky сохраняет его место и закрепляет относительно прокручиваемого предка. Выбор свойства остаётся за разработчиком, а заказчик определяет ожидаемое поведение: где начинается закрепление, какие действия остаются доступны в полосе и как человек возвращается к началу страницы с открытым меню. При фиксированном варианте особенно заметна ошибка, когда для шапки не оставили место: верх страницы оказывается за ней сразу после открытия.

Какие материалы отдать дизайнеру

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

Шапка во время чтения и переходов

Кнопка «Стоимость» может привести к нужному месту, но оставить сам заголовок за неподвижной полосой. Человек видит середину таблицы и не понимает, куда попал. Такой переход считается незавершённым даже при правильном адресе ссылки.

Прокрутка и якоря

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

Предпочтительнее сохранять читаемое начало раздела, чем добиваться одинаковой позиции панели во всех случаях: человек нажимал на ссылку ради содержания, поэтому декорация не может быть главным ориентиром при приёмке. Подробнее переходы разобраны в материале «Якорные ссылки на сайте». Здесь достаточно отметить, какие из них перекрывает именно шапка. Для сообщения об ошибке нужен адрес с якорем и положение экрана после перехода. Скриншот до нажатия эту проблему не объяснит.

Особое внимание — клавиатуре. В WCAG 2.2, критерии 2.4.11 уровня AA, элемент с клавиатурным фокусом не может полностью скрываться за содержимым, созданным автором страницы. Закреплённая шапка прямо названа возможной причиной такого перекрытия. Для своего задания разумно выбрать более удобный результат: целиком видимые поле или кнопка вместе с подписью.

Увеличение содержимого

Размер экрана и масштаб — разные условия. В критерии 1.4.10 W3C использует ширину 320 CSS-пикселей для вертикально читаемого содержимого, что также соответствует окну 1280 CSS-пикселей при масштабе 400 %. Это ориентир доступности с оговорёнными в стандарте исключениями, а не требование сделать шапку высотой в заданную долю экрана. В таком режиме нужно испытать её собственные пункты. Они остаются читаемыми и достижимыми, даже если панель меняет расположение.

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

Меню, форма и экранная клавиатура

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

Раскрытая навигация

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

Закрывать полноэкранное меню явной кнопкой надёжнее, чем оставлять только жест или касание затемнённой области: при увеличении текста свободного фона может не оказаться, а знакомый автору жест посетитель способен не заметить. Если меню оформлено как модальный диалог, пригоден образец W3C: Tab и Shift+Tab перемещают фокус внутри окна, Escape закрывает его. После закрытия фокус обычно возвращается к элементу, который его открыл. Это поведение передают исполнителю как часть интерфейса. Применять его к обычной немодальной панели без разбора не нужно.

Заполнение формы

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

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

У последнего пункта есть точный ориентир. Критерий 2.5.8 WCAG 2.2 задаёт минимум 24 на 24 CSS-пикселя для цели указателя с оговорёнными исключениями, например при достаточном расстоянии между целями. Владелец может попросить более крупные области для часто используемого меню. Минимум стандарта не описывает удобство каждой кнопки конкретного сайта.

В отчёте о дефекте полезнее написать «при вводе телефона исчезает подпись поля», чем «шапка слишком большая», поскольку первое описание позволяет повторить действие, увидеть перекрытие и принять исправление на том же экране.

Испытание на своём телефоне

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

Короткий маршрут приёмки

1. Открыть страницу по прямой ссылке и прочитать предложение, не прокручивая её специально для исправления наложений.
2. Дойти до середины, чуть вернуться вверх и сравнить поведение шапки при обоих направлениях движения.
3. Через меню перейти к стоимости, затем открыть тот же адрес с якорем заново.
4. Открыть форму, поставить курсор в телефон, ввести значение и закрыть клавиатуру, не отправляя рабочую заявку.
5. Повернуть телефон, увеличить текст и повторить открытие меню вместе с его закрытием.
6. Сопоставить результат с ожиданиями по каждому пункту, сохранив адрес страницы и короткую запись экрана для дефекта.

Оценка «на моём телефоне красиво» слишком узка для приёмки. Дизайнер и разработчик должны показать состояния с длинными подписями, коротким экраном и изменённым масштабом, иначе компания принимает только один удачный кадр будущего сайта. При этом не требуется самостоятельно повторять всю работу специалиста. Заказчик удерживает смысл испытания: предложение читается, меню открывается и закрывается, поле остаётся видно при вводе. Технические причины наложения разбирает разработчик. По исправленной странице затем повторяют именно неудавшееся действие.

Запись результата

Для каждого замечания достаточно связки «действие — что перекрылось — ожидаемое положение». К ней добавляют устройство, браузер, адрес и изображение экрана, чтобы исполнитель искал тот же дефект, а не похожее поведение.

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