Дизайн — статьи о сайтах
На сайте бизнес-центра изображения часто несут главные сведения: на плане этажа видно, где свободные блоки, на схеме показано, как добраться от метро, на баннере написан телефон отдела аренды. Посетитель со screen reader (программой экранного чтения), с отключёнными картинками или с медленным мобильным соединением получает вместо этого пустое место. Исправить это можно текстовой подписью, то есть атрибутом alt, и немного продуманной вёрсткой.
Какие картинки на сайте бизнес-центра несут информацию
Сначала составьте перечень изображений по типам. Для бизнес-центра он обычно такой:
- планы этажей и планировки блоков;
- схема проезда, карта, фото въезда на парковку;
- фотографии фасада, холла, входной группы, переговорных;
- логотипы арендаторов;
- баннеры с акциями и контактами;
- декоративные фоны, линии, иконки рядом с текстом.
Для каждого типа нужен свой подход. Одинаковые подписи вроде «фото» или «изображение» не помогают никому.
Как отличить содержательное изображение от декоративного
Задайте себе вопрос: что потеряет посетитель, если картинка исчезнет? Если потеряет сведения, например расположение блока или маршрут, нужен осмысленный alt. Если ничего, как в случае с орнаментом или разделительной полосой, оставьте атрибут пустым: alt="". Тогда программа чтения пропустит картинку. Полностью убирать атрибут нельзя: некоторые программы тогда зачитывают имя файла, например «img_0457.jpg».
Пример: страница «Аренда офисов», этаж 5
Допустим, на странице есть план пятого этажа и таблица свободных помещений. Слабый вариант выглядит так:
<img src="plan5.png" alt="план">
Лучше описать то, что на плане важно для выбора:
<img src="plan5.png" alt="План 5 этажа: блоки 501–506 вдоль южного фасада, лифтовой холл у входа, санузлы в восточном крыле">
Но подпись не должна пересказывать всю схему. Площади, номера блоков и статус «свободно» или «сдано» вынесите в обычную HTML-таблицу рядом. Так данные доступны всем, их можно скопировать, а alt остаётся коротким. Если план сложный, добавьте абзац с описанием под ним и сошлитесь на него в подписи.
Схема проезда, карта и баннеры с контактами
Главное правило: всё, что написано на картинке и нужно посетителю, должно быть продублировано текстом. Адрес, ближайшая станция метро, пеший маршрут от остановки, часы работы пропуска и въезда на парковку пишутся в обычных абзацах. Alt у схемы тогда может быть коротким: «Схема проезда от Садового кольца к шлагбауму на улице Примерной». Для баннера с телефоном и акцией alt должен содержать тот же текст, который на нём напечатан, а лучше сам телефон разместить текстом: так его можно набрать нажатием на мобильном.
Логотипы арендаторов и фотогалереи
Для логотипа достаточно названия компании: alt="Компания «Север»". Слово «логотип» добавлять не нужно. Если логотип служит ссылкой на страницу арендатора, alt должен сообщать, куда ведёт ссылка, или рядом должно стоять название текстом; тогда сам логотип можно оставить с пустым alt, чтобы название не зачитывалось дважды.
В галерее из двадцати фото не повторяйте одну и ту же фразу. Опишите, что видно и чем кадр отличается: «Холл первого этажа, стойка ресепшн и зона ожидания», «Переговорная на 10 человек с экраном». Не нужно начинать со слов «фотография» и «картинка»: программа чтения и так сообщает, что это изображение.
Проверочный список перед публикацией
- У каждого тега img есть атрибут alt, даже если он пустой.
- Планы и схемы сопровождаются текстом или таблицей с теми же сведениями.
- Телефон, адрес и условия акции есть в тексте страницы, а не только на баннере.
- Декоративные элементы имеют alt="" либо вынесены в CSS-оформление.
- Подписи не содержат имён файлов и слов «картинка», «фото».
- Alt у ссылок-картинок говорит о назначении ссылки.
- Страница осмысленна при отключённых изображениях: проверьте в настройках браузера.
- Подписи прочитаны вслух: понятно ли без картинки, что на ней важно?
Такую проверку можно закрепить как обязательный пункт для того, кто загружает материалы в систему управления сайтом: поле для alt заполняется при каждой загрузке изображения, а не «когда-нибудь потом».
