Дизайн — статьи о сайтах
В онлайн-школе картинки часто несут учебную и коммерческую информацию: схема программы, скриншот урока, таблица расписания, кнопка записи. Человек, который слушает страницу через программу экранного доступа (например, JAWS, NVDA или VoiceOver), не увидит эти картинки. То же случается при медленном мобильном соединении, когда графика не загрузилась. Вместо картинки он получает только её текстовую подпись, и эту подпись пишете вы.
Что делает атрибут alt и чего он не заменяет
Атрибут alt задаёт текстовую замену изображения. Его показывает браузер, если файл не загрузился, и зачитывает программа экранного доступа. Его же учитывают текстовые браузеры. Если атрибута нет совсем, программа может зачитать имя файла вроде «IMG_0457.jpg». Для посетителя это шум. Атрибут title с этой задачей справляется нестабильно, поэтому полагаться на него не стоит. Видимая подпись под картинкой (в разметке для неё подходит связка figure и figcaption) тоже не отменяет alt: это два разных механизма.
Сначала определите роль картинки, потом пишите текст
Текст подписи зависит не от того, что изображено, а от того, зачем картинка стоит на странице. Задайте себе три вопроса:
- Несёт ли картинка информацию, которой нет в тексте рядом? Тогда её нужно передать словами.
- Это ссылка или кнопка? Тогда alt описывает действие, а не внешний вид.
- Это украшение или повтор уже написанного? Тогда alt оставляют пустым (alt=""), чтобы диктор не зачитывал лишнее.
Разбор условной страницы курса
Возьмём вымышленную страницу курса «Английский для работы, уровень A2». Это иллюстрация, а не описание реального проекта. Вот как можно подписать её элементы:
- Фото преподавателя рядом с биографией. Имя и должность уже написаны текстом, поэтому alt можно оставить пустым. Если имени рядом нет, подойдёт «Анна Орлова, преподаватель курса».
- Схема программы из четырёх модулей. Для alt достаточно краткого «Схема программы: четыре модуля, от знакомства до деловой переписки». Полный перечень модулей дайте обычным списком под схемой.
- Скриншот урока. Подойдёт «Экран урока: слева видео, справа тест из пяти вопросов». Подпись объясняет, что покажет картинка и зачем она нужна.
- Картинка-кнопка записи. alt повторяет надпись на ней: «Записаться на курс». Лучше сделать кнопку текстом средствами CSS.
- Иконка сертификата в списке «Что вы получите». Рядом есть слова, поэтому alt пустой.
- Логотип компании-партнёра со ссылкой. Нужно назвать компанию и назначение ссылки: «Компания «Пример», партнёр курса».
- Декоративная волна-разделитель. Её лучше вынести в оформление через CSS. Если она всё же стоит в разметке, alt пустой.
Ошибки, которые встречаются чаще всего
- Подпись начинается со слов «картинка», «фото», «изображение». Программа и так сообщает, что это графика.
- В alt набиты фразы вроде «английский курсы онлайн недорого». Слушать это тяжело, а пользы для посетителя нет.
- Важный текст существует только внутри баннера: дата старта потока, условия рассрочки, состав группы. Такие сведения нужно дублировать обычным текстом на странице.
- У всех миниатюр курсов одинаковая подпись «Курс». Посетитель не отличит один курс от другого.
- В alt уместили абзац. Если описание не помещается в одну-две короткие фразы, вынесите его в текст рядом с картинкой.
- Формулы, таблицы и схемы выложены только картинками. Для учебных материалов дайте текстовую запись или таблицу в разметке.
Как встроить это в работу школы
Лучше всего подписи пишут люди, которые знают смысл материала: методисты и редакторы. Попросите разработчиков сделать поле подписи заметным при загрузке изображения в систему управления сайтом, чтобы его нельзя было пропустить. Договоритесь, что к каждой новой схеме и скриншоту подпись пишет тот, кто их загружает. Для старых страниц начните с самых посещаемых: каталога курсов, страницы курса, оформления заявки.
Простая проверка: отключите загрузку картинок в браузере и пройдите путь от главной страницы до записи на курс. Если непонятно, что делать дальше, подписи нужно доработать. Можно также послушать страницу в бесплатной программе NVDA.
Проверочный список перед публикацией страницы
- У каждого изображения в разметке есть атрибут alt, пусть даже пустой.
- Декоративные элементы и повторы текста имеют пустой alt.
- Подпись к схеме или скриншоту говорит, что на них важного, а не просто называет предмет.
- У картинок-ссылок и кнопок alt описывает действие или адресата ссылки.
- Даты, цены и условия записи есть в тексте страницы, а не только на баннере.
- Подписи не начинаются со слова «картинка» и не перегружены ключевыми словами.
- Миниатюры разных курсов подписаны по-разному.
- Страница понятна при отключённых картинках.
