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

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

Что уже умеем / что добавим

Вы умеете верстать семантически и правильно выбирать интерактивные элементы. Теперь добавим смысловые атрибуты, повышающие доступность. В сквозном проекте мы пропишем осмысленные alt изображениям и снабдим ключевые элементы понятными подписями.

Что вы узнаете в рамках статьи

• Как писать полезный alt для изображений.
• Когда alt должен быть пустым.
• Для чего служит атрибут title.
• Что такое aria-атрибуты и когда они нужны.
• Как aria-label подписывает элементы без видимого текста.

Ключевые термины

• alt — текстовое описание изображения.
• Декоративное изображение — картинка без смысловой нагрузки.
• title — всплывающая подсказка при наведении.
• ARIA — набор атрибутов для повышения доступности.
• aria-label — невидимая текстовая подпись для элемента.

Осмысленный alt

Атрибут alt вы уже встречали: он описывает изображение текстом. Но важно писать его осмысленно. Хороший alt передаёт суть картинки так, чтобы человек, не видящий её, понял, что на ней изображено и зачем она здесь:

<img src="team.jpg" alt="Команда компании за работой в офисе">

Скринридер зачитает этот текст вслух, а браузер покажет его, если картинка не загрузится. Пишите по сути, без «фото» в начале — скринридер и так объявит, что это изображение. Плохой alt вроде alt="img1" или вовсе пропущенный атрибут делают картинку бесполезной для части пользователей и хуже для SEO.

Пустой alt для декора

Не каждая картинка несёт смысл. Разделители, фоновые узоры, чисто декоративные иконки ничего не добавляют к содержанию. Для таких изображений alt оставляют пустым — alt="":

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

Пустой alt — это не то же самое, что отсутствующий. Он осознанно говорит скринридеру: «это декор, пропусти его», и программа не станет отвлекать пользователя. Если же alt вовсе не указать, некоторые скринридеры зачитают имя файла — что почти всегда бесполезно. Поэтому правило такое: смысловым картинкам — описательный alt, декоративным — пустой alt="".

Подсказка title

Атрибут title задаёт всплывающую подсказку, которая появляется при наведении курсора на элемент:

<a href="/report.pdf" title="Скачать отчёт в формате PDF, 2 МБ">Отчёт</a>

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

Базовый ARIA

ARIA (Accessible Rich Internet Applications) — это набор атрибутов, которые уточняют роль и свойства элементов для вспомогательных технологий. Главное правило ARIA: он нужен только там, где обычной семантики недостаточно. Если можно использовать семантический тег — используйте его, а не aria.

Самый полезный для начала атрибут — aria-label. Он задаёт невидимую текстовую подпись элементу, у которого нет видимого текста, например кнопке с одной иконкой:

<button aria-label="Закрыть окно">✕</button>

Визуально на кнопке только крестик, но скринридер объявит «Закрыть окно, кнопка» — пользователь поймёт назначение. Без aria-label он услышал бы лишь невнятный символ. Начните с этого атрибута: он закрывает самый частый случай — элементы, понятные глазами, но немые для скринридера.

Применяем в проекте

Повысим доступность сайта. Пропишем осмысленные alt изображениям, декоративной картинке дадим пустой alt, а кнопке-иконке добавим aria-label.

<header class="header">
  <img src="logo.png" alt="Логотип компании «Моя компания»" class="logo">
  <nav>
    <ul class="nav">
      <li><a href="#">Главная</a></li>
      <li><a href="#">Услуги</a></li>
    </ul>
  </nav>
  <button class="icon-button" aria-label="Открыть меню">☰</button>
</header>

<main>
  <section class="services">
    <img src="pattern.png" alt="">
    <h2>Наши услуги</h2>
  </section>
</main>

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

Частые ошибки

• Бессмысленный alt.
  Описание вроде alt="img" бесполезно; передавайте суть изображения.
• Отсутствие alt у декора.
  Декоративным картинкам нужен именно пустой alt="", а не пропуск атрибута.
• title вместо текста.
  Не прячьте важное только в title — он недоступен на тач-экранах и с клавиатуры.
• ARIA вместо семантики.
  Не заменяйте семантические теги атрибутами aria; ARIA нужен лишь там, где тегов не хватает.

Итоги

Великолепно — вы завершили раздел о семантике на самой важной ноте, доступности! Теперь вы умеете описывать изображения осмысленным alt, помечать декор пустым alt, добавлять подсказки title и подписывать немые элементы через aria-label. Эти небольшие детали делают ваши сайты пригодными для всех, включая людей, которые пользуются вспомогательными технологиями. Ваш сайт компании теперь по-настоящему доступен.

Поздравляем — второй раздел позади, и ваша разметка стала осмысленной и инклюзивной! В следующем разделе мы возьмёмся за формы: научимся собирать данные от пользователей с помощью полей ввода, чекбоксов и кнопок.