Доступность сайта означает простую вещь: им может пользоваться любой, как бы он на него ни попал. Тот, кто плохо видит и увеличивает текст. Пожилой человек, который пальцем целится в маленькую кнопку. Кто-то на медленном интернете в маршрутке. Тот, кто ходит по сайту только с клавиатуры. Если для всех них сайт остаётся читаемым и удобным — он доступный. И это не про благотворительность. Это про клиентов, которых вы иначе тихо теряете.
Это не «для инвалидов», это для всех
Вот главное недопонимание. Люди слышат «доступность» и думают про редкий случай, который их не касается. На деле хороший контраст помогает каждому, кто читает телефон на улице под солнцем. Текст покрупнее помогает любому клиенту за 50 — а они как раз платят. Субтитры выручают того, кто смотрит ролик без звука в обеденный перерыв. Всё, что вы делаете ради «сложного» случая, делает сайт лучше вообще для всех.
Почему доступный сайт приносит деньги
Три очень конкретных причины, без теории.
- Больше клиентов. Клиент, который не смог прочитать цену или не попал по кнопке, уходит. Доступный сайт не бросает никого на полпути.
- Лучше SEO. Google «читает» страницу примерно как человек, который её не видит. Alt у картинок, упорядоченные заголовки, понятные ссылки — это ровно то, чего хотят и доступность, и поисковик. Они идут рука об руку.
- Меньше рисков. Всё больше рынков требуют доступность по закону. Заложить её сразу дешевле, чем спешно прикручивать после жалобы.
Базовые правила, без занудства
Не нужен аудит на 200 страниц, чтобы закрыть большинство случаев. Несколько конкретных правил решают:
- Достаточный контраст текста и фона — не серое по серому.
- Текст от 16px для основного содержимого, чтобы не приходилось зумить.
- Атрибут alt у картинок, который описывает, что на них, — для скринридеров и для Google.
- Навигация с клавиатуры: пройти весь сайт через Tab, с видимой рамкой на активном элементе.
- Понятные ссылки и кнопки: «Смотреть цены», а не «нажмите здесь».
- Подписи к полям формы, а не только текст, который исчезает, когда печатаешь.
- Не передавайте смысл одним цветом: «красное поле» ничего не говорит тому, кто не различает красный — добавьте текст или значок.
- Субтитры к видео, для тех, кто смотрит без звука или плохо слышит.
Как проверить свой сайт за 15 минут
Разработчиком быть не нужно. Три быстрых пробы:
Откройте Lighthouse (он в Chrome, по правому клику «Просмотреть код») и запустите отчёт Accessibility — он даст оценку и список конкретных проблем. Потом уберите мышь в сторону и попробуйте пройти по сайту одной клавишей Tab: если вы теряетесь или не видите, где вы, человек с клавиатуры теряется так же. Напоследок прогоните контраст-чекер по важным текстам, чтобы понять, читаются ли они на самом деле. Три пробы, ноль затрат — а половину проблем вы найдёте уже на первой.
Ошибки, которые встречаются чаще всего
- Светло-серый текст «ради эстетики», нечитаемый на телефоне под солнцем.
- Картинки без alt — Google не знает, что это, скринридер тем более.
- Форма без подписей, где уже не понять, какое поле заполнял.
- Мелкие, слипшиеся кнопки, в которые не попасть пальцем на телефоне.
В shadowforge мы строим доступные сайты с первого дня — правильный контраст, навигация с клавиатуры, структура, которую читают и люди, и Google. Напишите нам, если хотите дизайн, который не оставляет за бортом ни одного клиента.