Доступность: alt, иерархия заголовков и ARIA

Освой альтернативный текст, иерархию заголовков, по которой скринридеры действительно могут перемещаться, и использование ARIA только там, где нативного HTML не хватает.

9 мин · 3 вопросов

Доступность - это не косметический слой, который прикручивают в конце проекта: это структурное свойство твоего HTML. Начнём с атрибута alt. Хороший альтернативный текст описывает функцию изображения в его контексте, а не его внешний вид пиксель за пикселем. График продаж описывают не как "синяя столбчатая диаграмма", а через информацию, которую он несёт. А чисто декоративное изображение должно получить пустой alt="": это явный сигнал скринридеру пропустить его. Опустить атрибут - худший из всех вариантов, потому что тогда скринридер зачитывает имя файла.

<img src="sales-chart.png"
     alt="2025 sales: +18% in the last quarter">

<img src="divider-ornament.png" alt="">

Вторая задача - иерархия заголовков. Пользователи скринридеров в подавляющем большинстве прыгают от заголовка к заголовку, чтобы построить мысленную карту страницы. Поэтому твоя структура h1 → h2 → h3 должна отражать логическую структуру содержимого, а не тот визуальный размер, который тебе сейчас захотелось. Два правила без компромиссов: один h1 на страницу и никаких пропусков уровней (никакого h4 прямо под h2). Если заголовок выглядит "слишком большим", исправляй это в CSS, а не понижением его семантического уровня.

<h1>Dashboard</h1>
<section>
  <h2>Statistics</h2>
  <h3>Monthly visits</h3>
  <h3>Conversion rate</h3>
</section>
<section>
  <h2>Exportable reports</h2>
</section>

ARIA становится уместным, когда нативный HTML не может выразить динамическое состояние: меню открыто или закрыто, область обновляется в реальном времени, вкладка активна. Ключевые атрибуты - aria-expanded (состояние открыто/закрыто), aria-controls (связь с управляемым элементом) и aria-live (объявление обновлений). Запомни принцип: нативный HTML даёт роли, а ARIA дописывает состояния и свойства, которые твой JavaScript меняет со временем.

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/profile">Profile</a></li>
  <li><a href="/settings">Settings</a></li>
</ul>

Проверка знаний

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

1. Как поступить с чисто декоративным изображением?
   • Дать ему описательный alt, например alt="орнамент"
   • Дать ему пустой атрибут alt: alt=""
   • Полностью убрать атрибут alt
   • Использовать title вместо alt
2. Под h2 тебе нужен визуально неброский подзаголовок. Что ты сделаешь?
   • h5, потому что он меньше по умолчанию
   • h3, размер которого ты уменьшишь в CSS
   • div с классом заголовка
3. Когда уместно добавлять атрибуты ARIA?
   • На каждый интерактивный элемент, просто на всякий случай
   • Когда ни один нативный элемент HTML не выражает нужную роль или состояние
   • Чтобы улучшить позиции страницы в поиске