Базовая доступность сайта простыми словами для владельца малого бизнеса (без найма специалиста)

Вы слышали, что сайт должен быть «доступным», и наверняка представили дорогой аудит, специалиста и список требований, который невозможно даже прочитать. Хорошая новость: бо́льшая часть пользы приходит из нескольких простых решений, которые вы можете проверить сами за один вечер, не написав ни строчки кода.

Доступность — это не просто «сайт для людей с инвалидностью». Это сайт, которым сможет пользоваться человек с телефоном на ярком солнце, пожилой клиент, который не видит светло-серый текст, или тот, кто перемещается по сайту с клавиатуры. На практике вам звонит и заполняет форму больше людей. В этой статье я покажу, на что именно смотреть и что исправлять, в порядке важности.

Что на самом деле означает доступность (и почему это касается вас)

Доступность сайта означает, что им может пользоваться как можно больше людей — независимо от зрения, слуха, подвижности или условий (дешёвый телефон, слабый сигнал, экран на солнце).

Это не про «политкорректность». Это очень практично: каждый, кто не смог прочитать цену, нажать кнопку или найти номер телефона, — потерянный клиент. Большинство проблем доступности — это на самом деле проблемы удобства, которые касаются всех.

Ещё одна конкретная выгода: Google «читает» доступный сайт легче. Понятный текст, правильно описанные изображения и логичная структура помогают и SEO, а не только вашим читателям. Так вы делаете работу один раз и решаете сразу две задачи.

Контраст текста — самая дешёвая победа

Самая частая проблема на сайтах малого бизнеса — светло-серый текст на белом фоне. На ноутбуке дизайнера это выглядит «элегантно», но становится нечитаемым на телефоне на улице или для уставших глаз.

Правило: тёмный текст на светлом фоне (или наоборот), без «пограничных» оттенков. Стандарт WCAG требует контраста не менее 4,5:1 для обычного текста — звучит технически, но проверяется бесплатно.

• Найдите в Google «WebAIM contrast checker», введите коды цвета текста и фона — он скажет, проходит ли.
• Особенно проверяйте мелкий текст: подвалы, цены, условия, кнопки с тонким шрифтом.
• Не полагайтесь только на цвет. Если вы отмечаете ошибку только красным, человек, плохо различающий цвета, её не увидит — добавьте и текст («Обязательное поле»).

Альтернативный текст для изображений (alt text)

У каждого значимого изображения должно быть короткое текстовое описание — «alt text». Программы чтения с экрана используют его для незрячих, но он появляется и когда картинка не загрузилась (слабый интернет), а Google читает его для контекста.

Как сделать хорошо, без усилий:

• Опишите то, что полезно на изображении, коротко и естественно: «Двухъярусный торт с лесными ягодами» — а не «IMG_2043».
• Для чисто декоративных изображений (фоновая текстура) оставьте описание пустым, чтобы не мешать программе чтения.
• Не набивайте SEO-ключевики. Пишите для человека, который не видит фото.

В большинстве платформ (WordPress, Wix, любой конструктор) поле «Альтернативный текст» находится прямо рядом с изображением. Несколько секунд на фото.

Кнопки, ссылки и формы, которыми может пользоваться каждый

Именно здесь теряется больше всего конверсий, даже если остальной сайт выглядит хорошо.

• Кнопки и ссылки, по которым нажимают пальцем, должны быть достаточно крупными и с отступами. Если вы сами промахиваетесь на телефоне — клиент тоже.
• Текст ссылки должен говорить, куда она ведёт: «Посмотреть меню» или «Позвонить», а не «Нажмите здесь». Тот, кто просматривает список ссылок, должен понимать без окружающего контекста.
• В формах у каждого поля нужна видимая подпись (Имя, Телефон), а не только серый текст-подсказка, который исчезает, как только начинаешь печатать.
• Номер телефона и адрес должны быть настоящим текстом, а не картинкой. Тогда по ним можно нажать напрямую, и их прочитает любое устройство.

Быстрый тест: попробуйте пройти по странице только клавишей Tab. Если вы добираетесь до кнопки и ясно видите, где находитесь, — вы на верном пути.

Частые ловушки и как понять, что всё в порядке (без платного аудита)

Несколько ошибок, которые я вижу часто:

• «Виджеты доступности» (та панель иконок, что обещает сделать сайт доступным одним кликом). Чаще всего они не решают настоящие проблемы, а иногда ухудшают. Волшебной кнопки нет — лучше исправлять в источнике.
• Текст поверх пёстрых изображений без контраста.
• Слишком мелкий шрифт. Меньше 16px для основного текста тяжело читать на телефоне.
• Видео, которое запускается само со звуком.

Как проверить самому, бесплатно: откройте сайт на телефоне при дневном свете; увеличьте текст в браузере и посмотрите, не ломается ли вёрстка; пройдите по странице клавишей Tab; запустите автоматический тест (найдите «WAVE accessibility» или используйте отчёт «Accessibility» в Lighthouse в Chrome). Он поймает не всё, но покажет лёгкие улучшения.

Если хотите, в MPO Web Studio мы делаем бесплатное демо вашего сайта, уже правильно продуманное по контрасту, структуре и мобильной версии — вы видите его до любой оплаты, работаем удалённо по всей стране и прозрачно говорим, сколько это стоит. Напишите нам в WhatsApp, и мы быстро проверим то, что у вас есть сейчас.