Навигация

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

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

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

Если вы просматриваете эту страницу на web.dev, вы можете заметить несколько навигационных функций. Над заголовком есть навигационная цепочка, после заголовка оглавление «на этой странице» и оглавление «Изучение HTML», которое, в зависимости от ширины экрана, либо всегда отображается, либо становится видимым при нажатии. кнопки меню. Первый элемент на странице — это скрытая ссылка на #main, которая позволяет пропустить как боковую панель, так и ссылки на навигационную цепочку.

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

Первый элемент на странице — внутренняя ссылка:

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

который при нажатии или когда он имеет фокус и пользователь нажимает Enter , прокручивает страницу и фокусирует основное содержимое: ориентир <main> с id main :

<main id="main">

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

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

Большинству дизайнеров не нравится наличие ссылки вверху страницы. Можно скрыть ссылку из поля зрения, помня, что когда ссылка получает фокус, что происходит, когда пользователь с клавиатуры просматривает ссылку на странице, ссылка должна быть видна всем пользователям. Скрывайте контент только в несфокусированном и неактивном состоянии, используя селектор, аналогичный .visually-hidden:not(:focus):not(:active) .

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

Оглавление

Ссылка для перехода к содержимому прокручивает основной контент для просмотра. Первый элемент — это заголовок <h1> с названием этого раздела. В данном случае <h1>Marking up navigation</h1> . За основным заголовком следует слоган — краткое описание содержания этого урока. Расположение навигации по оглавлению до или после заголовка в кодовой базе зависит от ширины вашего браузера.

Если ширина вашего браузера превышает 80 ем, оглавление располагается перед заголовком в разметке и выглядит следующим образом (имена классов были удалены для упрощения разметки):

<nav aria-label="On this page">
  <div>On this page</div>
  <div>
    <ul>
      <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>
  </div>
</nav>

<nav> — лучший элемент для разделов навигации: он автоматически информирует программу чтения с экрана и поисковую систему о том, что раздел выполняет роль navigation , роль ориентира.

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

Мы можем заменить несемантический <div> на абзац <p> , а затем добавить id , чтобы на него можно было ссылаться. Затем мы используем aria-labelledby :

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

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

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

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

Предоставляя доступное имя для элемента, не указывайте имя элемента. Программы чтения с экрана предоставляют эту информацию пользователю. Например, при использовании элемента <nav> не включайте слово «навигация»; эта информация включается при использовании семантических элементов.

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

<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>

Если ширина вашего браузера меньше 80 ем, виджет «На этой странице» находится под заголовком и слоганом. Это делается путем включения двух компонентов навигации по оглавлению и сокрытия одного или другого с помощью CSS display: none; на основе медиа-запроса.

Включение двух одинаковых виджетов для отображения только одного — это антишаблон. Дополнительные байты незначительны. Скрытие содержимого HTML от всех пользователей с помощью display: none подходит. Проблема в том, что на широких экранах оглавление идет перед #main ; а на более узких экранах оглавление вложено в #main. Использование клавиатуры для перехода к содержимому позволяет пропустить оглавление на широком экране. Хотя пользователи привыкли к тому, что контент реагирует и меняет местоположение при смене устройства или увеличении размера шрифта, они не ожидают, что порядок вкладок изменится при этом. Макеты страниц должны быть доступными, предсказуемыми и единообразными на всем сайте. Здесь расположение оглавления непредсказуемо.

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

Хлебные крошки обеспечивают дополнительную навигацию, помогая пользователям понять, где они находятся на веб-сайте. Обычно они показывают иерархию 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"

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

Каждая страница модуля Learn HTML имеет одинаковую навигационную цепочку, отображающую иерархию уроков HTML в разделе learn web.dev . Код аналогичен следующему, классы и детали SVG удалены для ясности:

<nav aria-label="breadcrumbs">
  <ul role="list">
    <li>
      <a href="/">
        <svg aria-label="web.dev" role="img">
          <use href="#webDevLogo" />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
  </ul>
  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
    <svg aria-label="share" role="img">
      <use href="#shareIcon" />
    </svg>
    <span>Share</span>
  </share-action>
</nav>

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

Между ссылками есть разделители контента, созданные с помощью CSS. Разделители ставятся перед каждым элементом списка, начиная со второго <li> .

[aria-label^="breadcrumb" 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" был добавлен обратно, потому что некоторые значения свойств отображения CSS удаляют семантику из некоторых элементов.

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

Последний элемент — это пользовательский элемент <share-action> . Пользовательские элементы обсуждаются в разделе 15. Хотя этот пользовательский элемент не является частью навигационной цепочки, включение несвязанного элемента в <nav> допустимо, если включение единообразно на всех страницах.

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

На этой странице текущая страница «Навигация» не включена в навигационную цепочку. Когда текущая страница включена в навигационную цепочку, желательно, чтобы текст не был ссылкой, а 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> , но не должны быть помечены как навигационная цепочка.

Местная навигация

На этой странице есть еще один навигационный компонент. Если вы используете широкий экран, слева есть боковая панель с логотипом «Изучение HTML», панелью поиска и ссылками на каждый из 20 разделов «Изучение HTML». Каждая ссылка содержит номер главы, заголовок раздела и галочку справа от разделов, которые вы уже посетили — возможно, эту, если вы ушли и вернулись. Ссылки на все разделы «Изучения HTML», а также поиск и локальный заголовок представляют собой навигацию по местоположению.

Если вы посещаете этот сайт на планшете или мобильном устройстве или у вас более узкий экран, при загрузке этой страницы боковая панель будет скрыта. Вы можете сделать его видимым через гамбургер-меню в верхней панели навигации (да, заголовок представляет собой пользовательский элемент <web-header> с установленным значением role="navigation" ).

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

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

<li>
  <a aria-current="page" href="/learn/html/navigation" data-complete="true">
    <span>010</span>
    <span>Navigation</span>
    <svg aria-label="Check" role="img">
      <use href="#checkmark" />
    </svg>
  </a>
</li>

Если вы посещаете эту страницу не в первый раз, галочка не будет видна. Если вы уже посещали эту страницу ранее, для пользовательского атрибута data-complete установлено значение true и будет отображаться галочка. Флажок включен в каждую ссылку, но CSS скрывает флажок от пользователей, которые раньше не были на этой странице, с помощью display: none из-за отсутствия атрибута data-complete="true" и его значения:

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

Если display установлено значение, отличное от none , role сообщает вспомогательным технологиям, что встроенный SVG является изображением, а aria-label действует так же, как атрибут alt в <img> .

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

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

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

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

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

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

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

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

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