Представьте, что на фото сумки виден карман на молнии, а нейросеть предлагает "Стильная сумка на каждый день". Чтобы получить описание, по которому можно понять, что на снимке, покажите ИИ само фото и объясните, зачем оно стоит на странице.

Такое описание называют alt, или текстовой альтернативой изображения. Его может прочитать скринридер, программа для озвучивания интерфейса. В руководстве W3C по доступности совет зависит от роли картинки. Для фотографии, которая добавляет информацию, передайте её смысл. У декоративной картинки без собственной функции alt оставляют пустым. Это подходит и для снимка, смысл которого уже передаёт соседний текст. Если картинка служит кнопкой и у кнопки нет другой подписи, передайте действие. Например, "Увеличить фото".

Вот учебный пример. В карточке сумки указаны цвет и размер. На отдельном снимке сумка раскрыта, и внутри видно отделение на молнии. Этот снимок помогает понять, как устроена сумка. Именно эту деталь стоит передать в описании.

Если ваш чат принимает изображения, приложите фото и добавьте фрагмент страницы, который его окружает. Подставьте свой текст в этот запрос.

"Предложи короткий alt для фото в карточке товара. Название, цвет и размеры уже указаны рядом. Снимок нужен, чтобы показать устройство сумки внутри. Опиши, что снимок добавляет к тексту рядом. Указывай только то, что хорошо видно на фото. Если нужная деталь не видна, скажи об этом отдельно. Текст рядом с фото: [вставьте текст]."

Для учебного фото подошёл бы вариант "Внутреннее отделение сумки на молнии". Перед сохранением снова посмотрите на изображение. На снимке видна молния. По фото нельзя определить, поместится ли в карман паспорт. Уберите такие догадки и проверьте в редакторе сайта, что текст попал в поле альтернативного описания. Если есть скринридер, послушайте весь фрагмент карточки. Так проще заметить повторы и понять, хватает ли описания.

На каких картинках вашего сайта читатель потеряет больше всего информации, если не увидит их?

#нейросети #сайты #доступность