Screen readers have commands to quickly jump between headings or to specific landmark regions. In fact, a survey of screen reader users found that they most often navigate an unfamiliar page by exploring the headings.
Используя правильные заголовки и элементы ориентиров, вы можете значительно улучшить навигацию по вашему сайту для пользователей вспомогательных технологий.
Используйте заголовки для описания страницы.
Используйте элементы h1 – h6 для создания структурной схемы страницы. Цель — создать скелет или каркас страницы, который позволит любому, кто перемещается по заголовкам, составить мысленное представление о ней.
Распространенной практикой является использование одного h1 для основного заголовка или логотипа на странице, элементов h2 для обозначения основных разделов и элементов h3 для вспомогательных подразделов:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
Не пропускайте уровни заголовков
Разработчики часто пропускают уровни заголовков, чтобы использовать стили браузера по умолчанию, максимально соответствующие их дизайну. Это считается антипаттерном, поскольку нарушает модель структуры.
Вместо того чтобы полагаться на размер шрифта браузера по умолчанию для заголовков, используйте собственный CSS и не пропускайте уровни.
Например, на этом сайте есть раздел «В НОВОСТЯХ», за которым следуют два заголовка:
Заголовок раздела «В НОВОСТЯХ» может быть элементом h2 , а оба дополнительных заголовка могут быть элементами h3 .
Because the font-size for "IN THE NEWS" is smaller than the headline, it may be tempting to make the headline for the first story an h2 and to make "IN THE NEWS" an h3 . While that may match the browser's default styling, it would break the outline conveyed to a screen reader user!
Though it may seem counterintuitive, it does not matter if visually the h3 and h4 elements are larger than their h2 or h1 counterparts. What matters is the outline conveyed by the elements and elements' ordering.
You can use Lighthouse to check if your page skips any heading levels. Run the Accessibility audit ( Lighthouse > Options > Accessibility ) and look for the results of the Headings don't skip levels audit.
Используйте ориентиры для облегчения навигации
Элементы HTML5, такие как main , nav и aside действуют как ориентиры или особые области на странице, к которым может перейти программа чтения с экрана.
Use landmark tags to define major sections of your page, instead of relying on div s. Be careful not to go overboard because having too many landmarks can be overwhelming. For example, stick to just one main element instead of 3 or 4.
Lighthouse рекомендует вручную провести аудит вашего сайта, чтобы убедиться, что «используются элементы HTML5-ориентиров для улучшения навигации». Вы можете использовать этот список элементов-ориентиров для проверки своей страницы.
Обходите повторяющийся контент с помощью пропусков ссылок
Многие сайты содержат повторяющиеся элементы навигации в заголовках, что может раздражать при использовании вспомогательных технологий. Используйте ссылку для пропуска , чтобы пользователи могли обойти этот контент.
A skip link is an offscreen anchor that is always the first focusable item in the DOM. Typically, it contains an in-page link to the main content of the page. Because it is the first element in the DOM, it only takes a single action from assistive technology to focus it and bypass repetitive navigation.
<!-- 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 can help you check if your page contains a skip link. Run the Accessibility audit again and look for the results of the The page contains a heading, skip link, or landmark region audit.