Портфолио — главное на сайте студии интерьеров, и почти всё оно состоит из фотографий и визуализаций. Человек со скринридером (программой экранного чтения) их не видит: она зачитывает только текст. Если подписи нет, он услышит что-нибудь вроде «IMG_4821.jpg». То же случится с тем, у кого в браузере отключена графика или кто открыл страницу по медленному каналу. Ниже — как описывать изображения, чтобы страница оставалась понятной.
Что делает атрибут alt и кто его использует
Атрибут alt тега img — это текстовая замена картинки. Его зачитывает скринридер (например, JAWS или NVDA). Браузер показывает его, если файл не загрузился. Поисковые системы тоже учитывают его как описание изображения. Рекомендации WCAG 2.0 требуют текстовой альтернативы для содержательной графики. Есть и практическая польза: если без фото непонятно, о чём страница проекта, значит, на ней мало собственного текста.
Три вида изображений на сайте студии
- Содержательные — фото и визуализации проектов, планировки, образцы материалов. Alt передаёт то, ради чего снимок размещён.
- Функциональные — логотип-ссылка, кнопка «Заказать консультацию» в виде графики, значки соцсетей. Alt описывает действие или назначение, а не внешний вид: «Студия «Название» — на главную».
- Декоративные — разделители, уголки, текстуры. Для них нужен пустой alt (alt с пустым значением), и скринридер их пропустит. Ещё лучше вынести такую графику в CSS.
Как описывать фотографию интерьера
Представьте, что вы по телефону объясняете человеку, зачем на странице этот снимок. Обычно хватает одной-двух коротких фраз: что за помещение, в чём главная идея, какие материалы и цвета заметнее всего. Не начинайте с «Фото» или «Изображение»: программа и так сообщает, что перед пользователем графика. Не пытайтесь перечислить всё, что есть в кадре. Подробности о материалах и мебели лучше вынести в основной текст страницы, где их прочтут все.
Условный пример: страница проекта «Гостиная в панельном доме»
Допустим, на странице три изображения: общий вид, деталь отделки и схема расстановки мебели. Это учебная иллюстрация, а не реальная работа.
- Общий вид:
alt="Светлая гостиная: серый диван у окна, за ним стена из тёмного дерева". Под снимком видимая подпись (figcaption): «Вид от входа. Шпон дуба, лён, латунь». - Деталь отделки:
alt="Стык дубового шпона и латунной вставки на стене". - Схема:
alt="Схема гостиной: диван у окна, телевизор на противоположной стене, проход шириной около метра". Рядом нужен текст с теми же сведениями, потому что на схеме важны детали, которые не умещаются в alt.
Плохие варианты для того же снимка: alt="IMG_4821" или alt="дизайн интерьера гостиной заказать дизайн-проект недорого". Первый ничего не сообщает, второй набит ключевыми словами и мешает слушателю. Если figcaption уже подробно описывает кадр, alt можно сделать короче, чтобы скринридер не читал одно и то же дважды.
Типичные ошибки в подписях
- Одинаковый alt у всех снимков галереи, например «Интерьер».
- Имя файла или название программы визуализации вместо описания.
- Тексты вроде «как видно на фото». Страница должна читаться и без картинки.
- Цены, акции и контакты внутри баннера без текстового дубля: скринридер их не прочтёт.
Галереи, слайдеры и фоновые картинки
Галерея на Flash недоступна для большинства программ экранного чтения. Если без неё не обойтись, продублируйте снимки обычным списком img с alt в HTML. Для увеличения по клику (lightbox) убедитесь, что ссылка вокруг миниатюры имеет понятное имя: оно берётся из alt вложенного изображения. Картинки, заданные в CSS через background, alt не имеют. Если на таком фоне есть смысл или текст, повторите его в HTML.
Проверочный список
- У каждого тега img есть атрибут alt, даже если он пустой.
- Пустой alt стоит только у чисто декоративной графики.
- Описание отвечает на вопрос «зачем этот снимок здесь», а не перечисляет предметы.
- В подписях нет слов «фото», «картинка» и наборов ключевых слов.
- У логотипа и кнопок-картинок alt называет действие или адрес перехода.
- Планировки и схемы дополнены текстом рядом.
- Информация с баннеров есть в тексте страницы.
- Страница проекта понятна, если отключить загрузку изображений в браузере.
