Навигация

Как вы узнали в разделе «Ссылки» , элемент <a> с атрибутом href создает ссылки, по которым пользователи могут переходить, щелкая или касаясь их. В разделе «Списки» вы научились создавать списки контента. В этом модуле вы узнаете, как группировать списки ссылок для создания навигации.

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

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

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

Ссылка «Перейти к содержимому»

На некоторых сайтах есть ссылка «Перейти к содержимому», часто расположенная первым элементом в порядке фокусировки. Она может выглядеть примерно так:

<a href="#main" class="skip-link button">Skip to main</a>

При нажатии на элемент или при получении фокуса и нажатии пользователем клавиши Enter страница прокручивается, и фокус переходит к элементу с main ID, предположительно, к основному содержимому.

<main id="main">

Для повышения удобства использования и доступности важно позволить пользователям пропускать блоки контента, повторяющиеся на каждой странице, такие как общий заголовок и основные элементы навигации. С помощью ссылки «пропустить» пользователь, нажав клавишу tab , может быстро перейти к новому контенту на странице. Это позволяет избежать необходимости перемещаться по обширному меню с помощью клавиши Tab.

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

Скрывать контент, находящийся в неактивном и нефокусированном состоянии, следует только с помощью селектора, аналогичного .visually-hidden:not(:focus):not(:active) .

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

Оглавление

Первым элементом нашего основного контента является заголовок <h1> с названием этой страницы: <h1>Navigation</h1> . За основным заголовком следует краткое описание содержания этого руководства.

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

Наилучшим элементом для навигационных разделов является <nav> . Он автоматически сообщает программе чтения с экрана и поисковой системе, что раздел имеет роль navigation , роль ориентира.

Добавьте атрибут aria-label для краткого описания назначения навигации. В данном случае значение этого атрибута будет избыточным по отношению к тексту «На этой странице». Для ссылки на видимый текст используйте вместо этого aria-labelledby .

Используя id , это может выглядеть следующим образом:

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
...
</nav>

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

Навигационная панель «На этой странице» — это оглавление. Если вы хотите использовать aria-label , укажите его, а не повторяйте видимый текст:

<nav aria-label="Table of Contents">
  <p>On this page</p>
...
</nav>

Чтобы присвоить элементу доступное имя, не следует указывать само имя элемента. Программы чтения с экрана предоставляют пользователю имя элемента. Например, при использовании элемента <nav> не следует включать слово "navigation", поскольку эта информация уже содержится в семантических элементах.

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

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
  <ul role="list">
    <li>
      <a href="#skip">Skip to content link</a>
    </li>
    <li>
      <a href="#toc">Table of contents</a>
    </li>
    <li>
      <a href="#bc">Page breadcrumbs</a>
    </li>
    <li>
      <a href="#ln">Local navigation</a>
    </li>
    <li>
      <a href="#global">Global navigation</a>
    </li>
  </ul>
</nav>

Избегайте изменения порядка вкладок.

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

Мы использовали CSS для отображения навигации в виде боковой панели на страницах шириной более 1254 пикселей.

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

хлебные крошки страницы

«Хлебные крошки» (breadcrumbs) обеспечивают дополнительную навигацию, помогая пользователям понять, где они находятся на веб-сайте. Как правило, хлебные крошки указывают иерархию URL-адресов текущего документа и местоположение текущей страницы в структуре сайта.

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

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

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

const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"

Разделы «Хлебных крошек» показывают путь от текущей страницы обратно на главную страницу, отображая каждый промежуточный уровень.

На каждой странице модуля «Изучение HTML» используется одинаковая навигационная цепочка, отображающая иерархию уроков HTML в разделе Learn на web.dev .

Код должен выглядеть примерно так:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">web.dev</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">HTML</a>
    </li>
  </ol>
</nav>

Элемент <nav> , выполняющий роль ориентира, указывает вспомогательным технологиям отображать «хлебные крошки» в качестве элемента навигации на странице. Доступное имя «хлебные крошки», заданное с помощью атрибута aria-label , отличает эту навигацию от других навигационных ориентиров в том же документе.

Между каждой ссылкой находится разделитель контента. Эти разделители можно создать с помощью CSS, чтобы они отображались перед каждым элементом списка, начиная со второго.

[aria-label^="breadcrumbs" i] li + li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  opacity: .8
}

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

В нашем примере кода используется упорядоченный список, который предпочтительнее неупорядоченного, поскольку элементы в нем перечислены. role="list" был добавлен, потому что некоторые значения свойства display в CSS искажают семантику некоторых элементов.

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

Текущая страница, «Навигация» , не включена в навигационную цепочку.

Текущая страница

Если текущая страница включена в навигационную цепочку, текст желательно не должен быть ссылкой, а aria-current="page" должен быть указан в элементе списка текущей страницы. Если он не указан, полезно обозначить, что следующий за ним заголовок является текущей страницей, с помощью значка или другого символа.

Рассмотрим альтернативный вариант панировочных сухарей, используя этот тренировочный рецепт:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
    <li aria-current="page">
      Navigation
    </li>
  </ol>
</nav>

«Хлебные крошки» могут отличаться от последовательности шагов, которые пользователь предпринял, чтобы попасть на текущую страницу. Список шагов, выполненных до этого момента, может быть вложен в элемент ` <nav> , но не должен называться «хлебными крошками».

Локальная навигация

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

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

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

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

Текущую страницу также можно идентифицировать с помощью атрибута aria-current="page" . Это сообщает вспомогательным технологиям, что ссылка ведет на текущую страницу.

В идеале HTML-код для этого элемента списка в локальной навигации должен выглядеть примерно так:

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

Глобальная навигация

Глобальная навигация ведет к страницам верхнего уровня веб-сайта и одинакова на каждой странице сайта. Глобальная навигация сайта также может состоять из вкладок, открывающих вложенные списки ссылок, ведущих ко всем подразделам сайта или другим меню. Она может включать в себя разделы с заголовками, кнопки и виджеты поиска. Эти дополнительные функции не являются обязательными. Требуется лишь, чтобы навигация отображалась на каждой странице и была одинаковой на каждой странице, разумеется, с aria-current="page" для всех ссылок на текущую страницу.

Глобальная навигация обеспечивает единообразный способ перемещения по приложению или веб-сайту. На веб-сайте Google нет глобальной навигации в верхней части страниц. На сайте Yahoo! она есть. Хотя все основные ресурсы Yahoo! имеют разный стиль, контент большинства разделов одинаков.

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

Подобно глобальной навигации, нижние колонтитулы должны быть одинаковыми на всех страницах. Но это единственное сходство. Глобальная навигация позволяет переходить ко всем разделам сайта с точки зрения продукта. К элементам навигации внутри нижнего колонтитула особых требований не предъявляется.

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

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

Далее мы рассмотрим разметку таблиц данных.

Проверьте свое понимание

Проверьте свои знания в области навигации.