Структура заголовков и ориентиры

Пользователи экранного диктора часто читают страницу, перескакивая от заголовка к заголовку, поэтому страница без элементов h2 читается как книга без глав.

Заголовки служат оглавлением

Зрячие читатели просматривают страницу бегло. Они скользят взглядом по крупным жирным строкам, находят нужный раздел и начинают читать с него. Пользователи экранного диктора делают то же самое с заголовками. MDN отмечает, что часто они быстро перескакивают от заголовка к заголовку, чтобы понять, что есть на странице, и что большинство экранных дикторов умеет выводить список всех заголовков страницы. Это работает, только если заголовки являются настоящими элементами от h1 до h6. Абзац, сделанный большим и жирным через CSS, похож на заголовок, но объявляется как обычный текст.

В WCAG 2.2 этому посвящён критерий успешного применения 1.3.1 «Информация и смысловые связи» уровня A: структура, которая видна глазами, должна быть доступна и в коде. Критерий 2.4.6 «Заголовки и метки» уровня AA добавляет, что заголовки должны описывать тему своего раздела. Заголовок «Ещё» или «Раздел 2» проходит первую проверку и не проходит вторую.

Три правила от MDN

Во-первых, не пропускай уровни. Иди от h1 к h2 и к h3. Тот, кто слышит h4 сразу после h1, начинает гадать, куда делись пропущенные уровни. Во-вторых, лучше один h1 на странице, который называет её содержимое, примерно как элемент title. Стандарт HTML разрешает больше одного, но MDN называет один h1 обычной хорошей практикой. В-третьих, не выбирай уровень заголовка ради размера. Если h3 кажется слишком мелким, измени размер шрифта в CSS и оставь уровень, который соответствует структуре.

Заголовки, которыми удобно пользоваться

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

Ориентиры

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

<header>
  <nav>
    <a href="/">Home</a> <a href="/menu">Menu</a>
  </nav>
</header>
<main>
  <h1>Corner Bakery</h1>
  <h2>Bread</h2>
  <h3>Sourdough</h3>
</main>
<footer>12 Mill Lane</footer>