Дизайн — статьи о сайтах
На сайте издательства много изображений: обложки, портреты авторов, развороты, иллюстрации, схемы, баннеры акций. Человек, который пользуется программой экранного чтения, не видит их и узнаёт о содержимом только из текстового описания. Если описания нет, программа может зачитать имя файла вроде IMG_4032.jpg. Пользы от этого нет, а каталог превращается в набор непонятных пауз и обрывков.
Чем alt отличается от видимой подписи
Атрибут alt находится в коде изображения. Его читает программа экранного чтения, а браузер показывает его вместо картинки, если она не загрузилась. Видимую подпись под изображением обычно оформляют элементами figure и figcaption, и она адресована всем посетителям.
Эти тексты не должны дословно повторять друг друга. Если под фотографией написано «Анна Лебедева на презентации сборника», то в alt слушателю достаточно того, что не сказано в подписи, либо короткого описания. Иначе один и тот же текст прозвучит дважды подряд.
Что писать в alt для обложки книги
Всё зависит от окружения. В карточке товара название и автор уже есть в заголовке рядом, поэтому в alt достаточно «Обложка» или короткого уточнения, например «Обложка, твёрдый переплёт». Читать полное название второй раз незачем.
В каталоге из десятков книг есть частая ошибка: обложка и заголовок сделаны двумя отдельными ссылками на одну страницу. Слушатель встречает каждую книгу дважды. Лучше объединить их в одну ссылку и оставить у обложки пустой alt, потому что название прочитается из текста. Если же обложка в ссылке единственная, alt должен называть то, куда ведёт ссылка: «Анна Лебедева. Зимние письма».
Авторы, иллюстрации, схемы и баннеры
- Портрет автора. Обычно хватает имени: «Анна Лебедева, автор книги». Внешность описывайте, только если она важна для материала.
- Иллюстрации из книг. Опишите то, что несёт смысл: «Лисёнок идёт с фонарём по заснеженному лесу». Перечислять каждую деталь не нужно.
- Схемы и графики в научных и учебных изданиях. В alt дайте вывод в одной фразе, а полные данные поместите рядом в виде таблицы или текста.
- Баннеры с текстом. Если на картинке написано «Предзаказ до 15 мая», этот текст лучше сделать обычным текстом на странице. Тогда он доступен всем, и дублировать его в alt не придётся.
- Фрагменты страниц и сканы отрывков. Рядом разместите текстовую версию отрывка, одного alt для этого мало.
Когда alt должен быть пустым
Декоративные элементы вроде разделителей, орнаментов и фоновых узоров описывать не нужно. Для них задают пустой атрибут alt=''. Программа чтения пропустит такую картинку. Если атрибут не указан вовсе, многие программы прочитают имя файла. Пустой alt и отсутствие alt означают разное.
Пример: фрагмент карточки книги
Условная карточка издания в каталоге, где обложка и заголовок объединены в одну ссылку:
<article>
<a href='/books/zimnie-pisma'>
<img src='cover.jpg' alt=''>
<h3>Зимние письма</h3>
</a>
<p>Анна Лебедева</p>
</article>
<figure>
<img src='author.jpg' alt='Анна Лебедева, автор книги'>
<figcaption>На встрече с читателями</figcaption>
</figure>Слушатель услышит ссылку «Зимние письма», затем имя автора, без лишних повторов. Фото автора получит краткое описание, а видимая подпись добавит контекст.
Как закрепить правила в работе редакции и проверить результат
Описания обычно пишут не разработчики, а редакторы и контент-менеджеры. Поэтому в админке стоит сделать отдельное поле «Описание изображения» и короткую памятку с примерами для обложек, портретов и иллюстраций. Для декоративных картинок удобен флажок «Не требует описания», который выводит пустой alt. Тогда пропуск поля будет осознанным решением, а не забывчивостью.
Проверочный список для страницы:
- у каждого изображения в коде есть атрибут alt, пусть даже пустой;
- имена файлов нигде не служат описанием;
- обложка и заголовок не образуют две одинаковые ссылки подряд;
- alt не повторяет видимую подпись слово в слово;
- текст с баннеров и сканов доступен и в виде обычного текста;
- у схем и графиков есть текстовое описание или таблица;
- декоративные элементы имеют пустой alt;
- страницу прослушали хотя бы одной программой чтения, например NVDA, или встроенным VoiceOver.
