Дизайн — статьи о сайтах
Сайт музея почти целиком состоит из изображений: экспонаты, афиши выставок, схемы залов, фото документов. Посетитель, который пользуется программой экранного чтения или отключил картинки из-за дорогого мобильного трафика, видит вместо них только то, что вы написали в коде. Если там пусто или стоит имя файла вроде «IMG_0457.jpg», страница для него теряет смысл.
Чем alt-текст отличается от подписи к экспонату
Подпись под картинкой видна всем: название, автор, датировка, техника, инвентарный номер. Атрибут alt нужен тем, кто картинку не видит. Он отвечает на вопрос: что изображено и что важно в этом кадре на этой странице. Если повторить в alt подпись, программа экранного доступа прочитает одно и то же дважды, а описания внешнего вида так и не будет.
Как разделить alt, подпись и развёрнутое описание
Удобно мыслить тремя уровнями. Условный фрагмент страницы с портретом:
<figure>
<img src='portret.jpg'
alt='Портрет мужчины в тёмном камзоле с белым воротником, рука лежит на закрытой книге'>
<figcaption>Неизвестный художник. Портрет купца. XVIII век. Холст, масло.</figcaption>
</figure>
<p><a href='/collection/portret-kupca/opisanie'>Подробное описание картины</a></p>Первый уровень, alt, коротко говорит, что на картинке. Второй, figcaption, даёт справочные данные для всех. Третий, отдельная страница или раскрывающийся блок с текстом, нужен для сложных вещей: композиции, деталей, символики. Для длинных описаний надёжнее обычная ссылка, чем атрибут longdesc, который поддерживается не везде.
Когда alt должен быть пустым
Декоративные элементы вроде орнаментов-разделителей, фоновых рамок и иконок рядом с текстовой ссылкой лучше помечать пустым атрибутом: alt=''. Программа экранного доступа такую картинку пропустит. Атрибут нельзя убирать совсем: тогда многие программы начнут зачитывать адрес файла. Пустой alt уместен и у миниатюры, если название экспоната рядом уже есть в тексте ссылки.
Афиши, планы залов, галереи и документы
- Афиша выставки. Если на ней есть даты, время и условия посещения, дублируйте их обычным текстом на странице. Alt остаётся коротким: «Афиша выставки о городском быте XIX века».
- Картинка-ссылка. Alt описывает действие: «Выставка: даты и билеты», а не «Баннер».
- План залов. Приложите текстовую версию: список залов по порядку обхода, что где расположено, где лестницы и лифт.
- Фото рукописи или документа. Если на снимке важен текст, дайте расшифровку на странице.
- Галерея с увеличением. Кнопки «следующее», «закрыть» и «увеличить» должны быть доступны с клавиатуры и иметь текстовые названия, а не только значки.
- Видео и аудиогид. Добавьте текстовую расшифровку.
Как организовать подписи в редакции музея
Качество описаний зависит не только от разработчика. Попросите студию сделать в системе управления сайтом отдельное поле для alt, не связанное с полем подписи, и сделать его обязательным при загрузке изображения. Решите, кто пишет описания: хранитель или научный сотрудник обычно точнее назовёт предмет и деталь. Договоритесь о правилах. Пишите, что видно, без оценок вроде «великолепный». Не начинайте со слов «изображение» и «фото», программа и так сообщает, что это картинка. Обычно хватает одного-двух предложений, а остальное уходит в развёрнутое описание. Включите эти требования в техническое задание на сайт, иначе поля останутся пустыми.
Проверочный список перед публикацией
- У каждой содержательной картинки есть alt, который не повторяет подпись.
- У декоративных картинок alt пустой, но атрибут присутствует.
- Даты, время и цены с афиш продублированы текстом.
- У картинок-ссылок alt говорит, куда ведёт ссылка.
- У плана залов есть текстовый вариант.
- Для сложных экспонатов есть ссылка на подробное описание.
- Галерея управляется с клавиатуры, кнопки имеют текстовые названия.
- Проверка: отключите загрузку картинок в браузере и убедитесь, что страница остаётся понятной. Затем пройдите по ней с бесплатной программой экранного чтения NVDA.
