Смысл вместо div: заголовки и ориентиры страницы

Программа чтения с экрана произносит текст страницы вслух или выводит его на брайлевский дисплей. Ею пользуются люди, которые не видят экран или видят его плохо. Слушать страницу подряд, от первой буквы до последней, долго. Поэтому человек сначала узнаёт её устройство: просит список ориентиров — крупных областей вроде шапки, меню и основного содержимого — и прыгает к нужной одной клавишей. В бесплатной программе NVDA для Windows к следующему ориентиру ведёт клавиша D, к следующему заголовку — H.

Откуда программа знает, где шапка? Не по виду: крупный жирный текст наверху для неё ничего не значит. Она читает теги. Проверим на двух элементах с одинаковым текстом — один <div>, другой <header>. Замер спросит у обоих свойство display, то есть как элемент встаёт на странице: block — отдельной полосой во всю ширину, inline — внутри строки, как слово в тексте. Затем попросит список ориентиров. Адрес "div, header" через запятую значит «все div и все header», и ответы идут в порядке разметки.

Проверьте себя до запуска: одинаковый ли display у двух элементов и найдётся ли на странице хотя бы один ориентир? Разбор ответа откроется под примером — он и есть настоящий результат, строка вывода в этой статье спрятана.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Одинаковый вид, разный смысл</title>
</head>
<body>
<div>Кофейня «Зерно»</div>
<header>Кофейня «Зерно»</header>
</body>
</html>

measure("div, header", "display");
landmarks();

Вид задают стили, смысл — тег. Покрасить под шапку можно что угодно, а программа чтения узнаёт шапку по тегу.

Ориентиры расставляют внутри <body> — видимой части скелета страницы. Карту складывают восемь тегов: <header>, <nav>, <main>, <search>, <aside>, <section>, <article> и <footer>. В таблицу для сравнения добавлены <form> и <div>: первый ориентиром бывает, второй — никогда. Последняя колонка — условие, при котором тег вообще считается ориентиром. Держите таблицу под рукой: задачи в конце статьи решаются по ней, а не по памяти.

Подпись — атрибут aria-label: <section aria-label="Скидки">. Программа чтения произносит её вместе с ролью, а в разборе она показана в ёлочках после роли.

Условия в последней колонке — правило области: роль зависит от того, внутри чего лежит тег. И это не каприз спецификации, а здравый смысл. Шапка внутри <article> — шапка поста, а не сайта, и объявлять её второй шапкой сайта было бы неправдой: человек прыгнул бы к ней в ожидании меню и оказался в середине текста. Разделов <section> на странице бывают десятки, а карта из тридцати безымянных областей ничем не лучше пустой — ориентиром раздел становится, только когда у него есть имя. С <aside> так же: на уровне страницы или внутри <main> это боковая колонка, а внутри раздела — просто врезка в текст.

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

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Кофе с собой</title>
</head>
<body>
<header>
  <p>Кофейня «Зерно»</p>
  <nav><a href="#menu">Меню</a> <a href="#contacts">Контакты</a></nav>
</header>
<main>
  <h1>Кофе с собой</h1>
</main>
<footer>© 2026, Казань</footer>
</body>
</html>

landmarks();

Теперь страница, на которой срабатывают почти все условия таблицы: разделы с подписью и без, статья со своими шапкой и подвалом, две врезки <aside> — одна в <main>, другая внутри раздела, — поиск и две формы. У полей ввода тоже есть aria-label, но поле ориентиром не является: подпись просто даёт ему имя. Прогноз — все строки по порядку, с точками и подписями.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Таблица ориентиров</title>
</head>
<body>
<header><a href="#top">Кофейня</a></header>
<nav aria-label="Разделы"><a href="#menu">Меню</a></nav>
<main>
  <section><h2>Новинки</h2></section>
  <section aria-label="Скидки"><h2>Скидки</h2></section>
  <article><header><h2>Раф</h2></header><footer>300 ₽</footer></article>
  <aside><p>Внутри main</p></aside>
</main>
<section><aside><p>Внутри section</p></aside></section>
<search><form><input aria-label="Поиск"></form></search>
<form aria-label="Подписка"><input aria-label="Почта"></form>
<footer>© 2026</footer>
</body>
</html>

landmarks();

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

Имя ориентиру даёт и другой атрибут, aria-labelledby. Заголовку дают атрибут id с уникальным на странице именем, aria-labelledby ссылается на это имя, и ориентир называется текстом заголовка. Удобно, когда заголовок в разделе уже есть. Сам по себе заголовок внутри <section> раздел не называет. Браузер понимает оба атрибута, а прибор этой статьи — только aria-label.

Раз смысл дают теги, рано или поздно хочется придумать свои: <card> для карточки, <price> для цены. К этому подталкивает сама вёрстка — класс card встречается в проекте сорок раз, и кажется естественным сделать из него тег. Браузер не возражает: ни ошибки, ни предупреждения. Сравним выдуманный <card> с двумя настоящими тегами. Прогноз: какой display окажется у каждого из трёх?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Незнакомый тег: ни ошибки, ни смысла</title>
</head>
<body><card>Карточка</card><section>Раздел</section><search>Поиск</search></body>
</html>

measure("card, section, search", "display");

Ровно то же случается с настоящим тегом в старом браузере. <search> — самый молодой из восьми: в основных браузерах он появился осенью 2023 года, тогда как остальные семь работают везде давно. Браузер, выпущенный раньше, не знает <search> точно так же, как <card>: рисует строчным и ориентира не даёт. С 13 апреля 2026 года у <search> статус Baseline Widely available — пишите спокойно.

Свои теги в HTML бывают, но только с дефисом в имени, например coffee-card, и поведение им даёт скрипт. Слово без дефиса — просто незнакомый тег.

Второй список, который просит программа чтения, — заголовки. Шесть тегов от <h1> до <h6> — шесть уровней оглавления: <h1> — тема страницы, <h2> — её разделы, <h3> — подразделы внутри раздела. Человек слушает заголовки подряд, как оглавление книги, или прыгает по уровню: в NVDA клавиша 2 ведёт к следующему <h2>.

Оглавление ломается, когда уровень перепрыгивает ступеньку: после <h1> сразу <h3>. Слушатель решит, что пропустил раздел, и пойдёт его искать — или собьётся и перестанет понимать, где находится. Список заголовков идёт по порядку, а такой прыжок отмечает стрелкой. Прогноз: у каких строк стрелка будет?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Кофейня</title>
</head>
<body>
<h1>Кофейня</h1>
<section><h3>Новинки</h3></section>
<h2>Меню</h2>
<h4>Десерты</h4>
</body>
</html>

headings();

Прыжок почти всегда появляется ради размера: <h4> мельче, и его берут для скромного подзаголовка. Но размер — дело стилей, а уровень — место в оглавлении. Нужен мелкий <h2> — ему уменьшают шрифт в CSS; языку стилей посвящена вторая глава пролога.

Откуда вообще взялась мысль, что <section> меняет уровень? Когда-то стандарт обещал: пишите в каждом <section> свой <h1>, а браузер сам пересчитает уровень по вложенности и превратит его в <h2>. Обещание не выполнил ни один браузер, но проверить его след стоит: замер сравнит размер шрифта у заголовка снаружи раздела и внутри него. Одинаков или нет?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Снаружи</title>
</head>
<body><h1>Снаружи</h1><section><h1>Внутри</h1></section></body>
</html>

measure("h1", "font-size");

От обещания остался след в стилях браузеров. Они рисовали <h1> внутри <section>, <article>, <aside> и <nav> мельче, размером <h2>, и глаз видел пересчёт, которого для программы чтения не было. Сейчас след стирают: Chrome и Firefox рисуют такие заголовки одним размером, как в примере, а в браузере постарше второй <h1> может выйти мельче. Уровень от размера не зависит ни там, ни там.

Уровень заголовка выбирают по месту в оглавлении, а не по размеру: одна тема страницы — один h1, разделы — h2, и вниз без прыжков.

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

Возьмите index.html из первой задачи статьи про скелет страницы и допишите в <body> шапку с меню, <main> и подвал. Откройте файл в Chrome и нажмите F12 (на Mac — Cmd+Option+I). Во вкладке Elements выделите <header>, а в панели справа, там же, где Styles, откройте вкладку Accessibility — в узкой панели она прячется за кнопкой ». Среди вычисленных свойств, Computed properties, окажется роль banner: вот так браузер пересказал ваш тег программе чтения. Переключатель Show accessibility tree в той же вкладке показывает в Elements дерево доступности вместо дерева элементов, и все ориентиры страницы видны разом. В Firefox дерево доступности — отдельная вкладка Accessibility.

Настоящая карта подробнее прибора. Для страницы из большого примера Chrome покажет у разделов без подписи и у врезки внутри раздела роль generic — «ничего особенного». Шапка и подвал статьи получат роли sectionheader и sectionfooter, шапка и подвал раздела. Роль form Chrome пишет у любой формы, подписанной или нет. Остальные ориентиры и их подписи — те же, что напечатал прибор.

Роль тега можно переписать атрибутом role, и в дереве это тоже видно. На ролях держится и старый запрет вёрстки таблицами: колонки страницы из <table> плохи не на вкус, а на слух — без role="presentation", который снимает с таблицы её роль, программа чтения может объявить раскладку таблицей данных и начать считать строки и столбцы.

Лучшая проверка — послушать собственную страницу. NVDA бесплатна, а на Mac уже встроен VoiceOver: Cmd+F5 включает его, а Control+Option+U открывает ротор — списки заголовков, ориентиров и ссылок. Пять минут со своей страницей и закрытыми глазами объясняют смысл тегов лучше любой таблицы: вы физически почувствуете, каково это — искать меню наугад.

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