Рубрики и ориентиры

Роб Додсон

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

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

Используйте заголовки, чтобы очертить страницу

Используйте элементы h1 – h6 , чтобы создать структурную схему вашей страницы. Цель состоит в том, чтобы создать скелет или каркас страницы, чтобы любой, кто перемещается по заголовкам, мог сформировать мысленную картину.

Обычной практикой является использование одного h1 для основного заголовка или логотипа на странице, элементов h2 для обозначения основных разделов и элементов h3 во вспомогательных подразделах:

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

Не пропускайте уровни заголовков

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

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

Например, на этом сайте есть раздел «В НОВОСТЯХ», за которым следуют два заголовка:

Новостной сайт с заголовком, главным изображением и подразделами.

Заголовок раздела «В НОВОСТЯХ» может быть h2 , а вспомогательные заголовки могут быть элементами h3 .

Поскольку font-size «В НОВОСТЯХ» меньше заголовка, может возникнуть соблазн сделать заголовок первой статьи h2 , а «В НОВОСТЯХ» — h3 . Хотя это может соответствовать стилю браузера по умолчанию, это нарушит структуру, передаваемую пользователю программы чтения с экрана!

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

Используйте ориентиры для облегчения навигации

Элементы HTML5, такие как main , nav aside выступают в качестве ориентиров или специальных областей на странице, к которым может перейти программа чтения с экрана.

Используйте теги ориентиров для определения основных разделов вашей страницы, вместо того, чтобы полагаться на div . Будьте осторожны и не переусердствуйте, потому что слишком много ориентиров может оказаться утомительным. Например, придерживайтесь только одного main элемента вместо 3 или 4.

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

Обход повторяющегося контента с помощью пропуска ссылок

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

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

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>

/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

Многие популярные сайты, такие как GitHub , The NY Times и Wikipedia, содержат ссылки для пропуска. Попробуйте посетить их и несколько раз нажать клавишу TAB на клавиатуре.

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