Что такое Помощник по alt-тексту?

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

Выберите один из шести типов изображения — фотография, иконка, диаграмма, декоративное, информативное или изображение-ссылка — и поле подскажет именно то, что нужно пользователю скринридера. Счётчик символов предупредит, когда вы перевалите за 125, а чек-лист из шести пунктов проверит, что описание конкретное, краткое, учитывает контекст, не начинается с шаблонов вроде «изображение», ставит самое важное в начало и не утопает в запятых или повторах ключевых слов. Для декоративных картинок появляется напоминание про alt="" — чтобы ассистивные технологии их пропускали.

Как использовать

1. Выберите тип описываемого изображения: фотография, иконка, диаграмма, декоративное, информационное или изображение-ссылка.
2. Используйте подсказку для вашего типа изображения, чтобы написать краткое описание.
3. Проверьте alt-текст по чек-листу доступности, затем скопируйте его для использования в HTML или CMS.

Когда использовать

• Заполнить атрибуты alt в галерее товаров Shopify или WordPress перед запуском.
• Написать alt для графика в квартальном отчёте, чтобы скринридер передал цифры.
• Проверить существующий сайт на соответствие WCAG 1.1.1 перед аудитом доступности.

Результат

Для столбчатой диаграммы продаж за Q1: вместо «chart.png» напишите «Столбчатая диаграмма продаж за 1 квартал 2024 года по регионам: Северная Америка — $2,1 млн, Европа — $1,8 млн, Азия — $1,4 млн».

Частые вопросы

Почему alt-текст считают самым важным атрибутом доступности?

Это первый критерий WCAG (1.1.1 «Нетекстовый контент», уровень A) и единственное требование, с которым незрячий пользователь скринридера сталкивается на каждой странице. Без него страдает доступность, а ещё поисковые системы и краулеры предпросмотра берут alt как подпись к картинке.

Насколько коротким должен быть alt? 125 символов — это жёсткий потолок?

Технически нет. Браузеры и скринридеры справляются и с длинными строками. Цифра 125 идёт от старых версий JAWS, которые неудачно резали длинные описания. В современных версиях это исправлено, но короткие описания всё равно проще слушать.

Что делать с чисто декоративными картинками — разделителями, узорами?

Поставьте alt="" (пустую строку), а не убирайте атрибут совсем. Пустой alt сообщает скринридеру пропустить картинку. Если выкинуть атрибут полностью, некоторые скринридеры начнут читать имя файла — это хуже тишины.

Как описать сложный график в 125 символов?

Начинайте с типа графика и главного вывода, а не с перечня значений. «Линейный график: мобильные обогнали десктоп в Q3 2024» работает лучше длинного списка месячных цифр. Полные данные оформите отдельным текстовым описанием рядом.

Стоит ли начинать с «фото» или «изображение»?

Нет. Скринридер сам объявляет, что читает изображение, поэтому «изображение кота» превращается в «изображение, изображение кота». Начинайте с предмета: «Серый кот на синем диване». Чек-лист этого инструмента подсвечивает такие случаи.

Похожие инструменты