Футер сайта: что разместить внизу страницы и чего там быть не должно

Внизу страницы человек должен найти продолжение

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

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

Граница общего блока

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

Ссылки группируются по задачам посетителя

Список всех адресов сайта быстро превращается в каталог без ориентиров. Ссылке на доставку место в группе для покупателей, а вакансии понятнее искать среди сведений о компании: одно слово «Информация» объединяет их для редактора, но почти не объясняет выбор посетителю. Лучше оставить несколько подписанных групп — услуги, покупателям, о компании — и соотнести каждую с реальной задачей, потому что формальное наличие ссылки не помогает человеку, если он не понимает названия группы и ожидаемого результата перехода. Отбор начинается со смысла. Количество колонок решает дизайнер после этого.

Что дублировать

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

Универсального числа ссылок нет. Каждая ведёт на существующую страницу с обещанным содержанием.

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

Контакты соответствуют месту и времени обращения

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

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

Проверка перехода

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

Часы работы рядом с номером снимают лишнее ожидание. Мелкая приписка в другом конце страницы эту задачу решает хуже.

Документы открываются под понятными названиями

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

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

Понятное назначение ссылки

В объяснении критерия WCAG о назначении ссылки W3C требует, чтобы цель перехода определялась по тексту ссылки либо по нему вместе с доступным контекстом. Поэтому отдельное «Подробнее» для нескольких документов хуже ясных названий. Человек должен различать условия покупки и политику обработки данных до открытия. Это особенно полезно при навигации по списку ссылок с помощью вспомогательной программы. Юридический смысл документа при этом проверяется отдельно от удобства перехода.

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

Читаемость сохраняется на тёмном фоне и телефоне

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

В критерии контраста WCAG ориентир для обычного текста — не менее 4,5:1, для крупного — 3:1. Размер и жирность влияют на то, какой текст считается крупным, поэтому замер конкретного оформления поручают дизайнеру или специалисту по доступности. Эти соотношения описывают контраст текста и фона. Они не заменяют чтение, оценку размера и реальную попытку нажать ссылку. Маленькая надпись может иметь достаточный контраст и всё равно быть неудобной.

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

Клавиатура и вспомогательная программа находят блок

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

Видимое выделение и общий ориентир

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

Для вспомогательных технологий общий нижний блок обозначают как область contentinfo. По рекомендациям W3C обычно достаточно одного такого общего ориентира на страницу; если их несколько, назначения различают уникальными названиями. Подвал внутри статьи не становится автоматически общим футером сайта. Эти различия принимает разработчик на готовой странице. Маркетолог проверяет, что в задании речь идёт именно о сквозном блоке, а не о подписи под публикацией, и просит результат проверки у специалиста.

Полная проверка доступности сайта охватывает и другие области. Футер стоит включить в её выборку вместе с формой и основным меню.

Общая настройка проверяется на нескольких страницах

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

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

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

Короткая самопроверка перед приёмкой футера

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

• После чтения услуги понятно, как обратиться и какой раздел открыть дальше.
• Группы ссылок подписаны по содержанию, пустых переходов и ненужных повторов нет.
• Телефон, почта и чаты ведут к действующим получателям, часы работы объясняют ожидание.
• Документы открываются без доступа к чужому аккаунту, их названия и версии подтверждены ответственным.
• На телефоне текст читается, группы сохраняют порядок, на соседнюю ссылку не приходится попадать случайно.
• Клавиатурное выделение видно, переходы последовательны, назначение значков понятно.
• Изменение проверено на разных типах страниц и во всех используемых вариантах подвала.

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