Сайт архитектурного бюро строится вокруг изображений: рендеры, фасады, планы. Из-за этого текст и ссылки часто остаются на втором плане: светло-серые подписи на фото, десять одинаковых кнопок «Подробнее», чертежи в PDF-сканах. Всё это можно проверить самостоятельно за час, без специальных программ и навыков.
Что именно проверяем и зачем
Доступность здесь означает, что информацию получит любой посетитель: человек с плохим зрением, тот, кто смотрит сайт на планшете при солнце, заказчик с медленным интернетом, где картинки не загрузились, или тот, кто листает страницу клавишей Tab, а не мышью. Для бюро важны четыре зоны: текст на главной и в карточках проектов, ссылки портфолио, навигация и документы для скачивания. Ориентиром можно взять рекомендации WCAG 2.0 (W3C), на них опираются большинство проверок.
Пример: карточка проекта, которую трудно понять
Представим условную страницу «Жилой дом у леса». Поверх большого рендера белым тонким шрифтом написано название, ниже идут три блока проектов. Фрагмент кода одного из них:
<a href="/projects/house-12">Подробнее</a>
Если посетитель слушает страницу через экранный диктор или просматривает список ссылок, он услышит «Подробнее, Подробнее, Подробнее» и не поймёт, куда они ведут. Лучше так:
<a href="/projects/house-12">Дом у леса: планы, фасады, описание</a>
Такая ссылка понятна и без соседнего текста, а название проекта работает как якорь для всех, кто просматривает страницу выборочно.
Читается ли текст поверх фотографий
Самая частая проблема портфолио — надпись на изображении. На одном фото фон тёмный, на другом светлое небо, и белый заголовок пропадает. Проверьте:
- откройте страницу на ноутбуке и на телефоне на улице, а не только на своём мониторе;
- измерьте контраст бесплатной утилитой, например Colour Contrast Analyser: WCAG 2.0 требует не меньше 4,5:1 для обычного текста и 3:1 для крупного;
- убедитесь, что важные сведения (адрес, телефон, название проекта, площадь) набраны текстом, а не вшиты в картинку;
- проверьте размер основного текста: если подписи к чертежам приходится увеличивать вручную, их стоит сделать крупнее.
Если фон разный, решение обычно простое: подложка под текстом или вынос заголовка под изображение.
Понятны ли ссылки и работает ли сайт без мыши
Нажимайте Tab, начиная с верхней части страницы. Вы должны видеть, где находится фокус: рамку или подчёркивание вокруг текущей ссылки. Проверьте порядок: он должен совпадать с порядком чтения. Меню должно раскрываться не только при наведении курсора, а галерея проектов — листаться стрелками клавиатуры, а не только перетаскиванием. Если слайдер сделан на Flash, он не откроется на многих планшетах и телефонах, поэтому у него нужна текстовая альтернатива.
Затем увеличьте масштаб страницы до 200 % (Ctrl и «+»). Текст не должен наезжать на изображения, а кнопки — исчезать за краем экрана. Отдельно проверьте ссылки на файлы: «Скачать презентацию» лучше дополнить форматом и объёмом, например «презентация бюро, PDF». Тогда посетитель заранее знает, что его ждёт.
Картинки и PDF: что будет, если их не видно
Отключите загрузку изображений в настройках браузера и откройте карточку проекта. Остался ли смысл страницы? У каждого значимого изображения должно быть краткое описание в атрибуте alt: «Фасад дома со стороны сада, деревянная обшивка». Для декоративных элементов (линии, фоновые узоры) описание оставляют пустым, чтобы не засорять чтение.
PDF проверьте так: откройте файл и попробуйте выделить текст мышью. Если выделяется только вся страница целиком, это скан. Такой файл не читается диктором, в нём не работает поиск. Для пояснительных записок лучше выкладывать документ с текстовым слоем, а ключевые сведения о проекте дублировать на самой странице.
Короткий чек-лист для владельца бюро
- Нет ссылок «Подробнее», «Здесь», «Читать далее» без названия проекта или раздела.
- Текст на фото проходит проверку контраста на самых светлых и тёмных снимках.
- Адрес, телефон и название проекта набраны текстом.
- По странице можно пройти клавишей Tab, фокус виден.
- Меню и галерея управляются без мыши.
- При масштабе 200 % ничего не перекрывается.
- У значимых изображений есть alt, у декоративных он пустой.
- PDF-файлы допускают выделение текста, формат и размер указаны рядом со ссылкой.
Если по нескольким пунктам есть замечания, составьте список страниц и передайте его разработчикам. Начните с главной, портфолио и контактов: именно там заказчик принимает решение, писать вам или нет.
