Что такое доступность сайта

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

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

Международный стандарт WCAG 2.2 описывает рекомендации, которые помогают сделать веб-контент доступнее для людей с нарушениями зрения, слуха, моторики, речи, когнитивными и другими ограничениями. W3C также указывает, что такие улучшения часто повышают удобство сайта в целом. 

Содержание

    Почему доступность влияет на эффективность сайта

    Доступность часто воспринимают как отдельную техническую задачу, хотя на практике она касается продаж, маркетинга, поддержки и репутации. Например, пользователь может уйти с сайта, если:

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

    Такие проблемы снижают количество обращений даже на красивом и дорогом сайте. Пользователь редко сообщает о барьерах. Чаще он просто закрывает страницу и выбирает другой вариант.

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

    1. Проверьте контраст, размер текста и читаемость

    Первое, что видит пользователь, — текст, кнопки, меню, карточки товаров, формы и подсказки. Если их трудно прочитать, сайт теряет часть аудитории уже на первых секундах.

    По WCAG для обычного текста нужен контраст не ниже 4.5:1, для крупного текста — не ниже 3:1. Для элементов интерфейса, например границ полей, иконок, переключателей и состояний кнопок, также требуется достаточный контраст.

    Что проверить на сайте

    Посмотрите основные страницы: главную, услуги, карточки товаров, блог, контакты, формы заявки, личный кабинет. Проверьте, как читаются:

    • серый текст на светлом фоне;
    • белый текст на цветных баннерах;
    • подписи к полям формы;
    • ошибки в форме;
    • второстепенные ссылки;
    • кнопки в обычном состоянии, при наведении и при фокусе;
    • текст внутри изображений.

    Особенно внимательно доступность нужно проверять на мобильных устройствах: размер кнопок, читаемость текста, расстояние между элементами и поведение форм напрямую влияют на заявки. Эти же принципы важны при разработке мобильных приложений.

    Как улучшить

    Увеличьте базовый размер шрифта для основного текста, настройте нормальную межстрочную высоту, избегайте длинных строк и слабого контраста. Для текста лучше использовать реальные HTML-элементы, а не картинки с надписями. WCAG также требует, чтобы текст можно было увеличить до 200% без потери содержания и функций страницы.

    Цвет не должен быть единственным способом передать смысл. Если поле формы заполнено с ошибкой, одной красной рамки недостаточно. Добавьте текст: «Введите номер телефона в формате +7…». Если акция выделена цветом, продублируйте смысл словами или иконкой с понятной подписью. WCAG прямо указывает, что цвет нельзя использовать как единственное средство передачи информации или действия.

    2. Сделайте сайт удобным для клавиатуры

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

    WCAG требует, чтобы вся функциональность была доступна с клавиатуры, кроме редких случаев, где действие зависит от траектории движения, например рисование. Также фокус должен быть видимым: пользователь должен понимать, на какой кнопке, ссылке или поле он находится сейчас.

    Что проверить на сайте

    Откройте сайт и попробуйте пройти ключевые действия только клавиатурой:

    • перейти по меню;
    • открыть выпадающий список;
    • закрыть модальное окно;
    • заполнить форму;
    • отправить заявку;
    • перейти к карточке товара или услуги;
    • открыть фильтры;
    • перейти к следующему блоку страницы;
    • вернуться назад.

    Используйте Tab, Shift + Tab, Enter, Space, Esc и стрелки. Если фокус пропадает, застревает внутри блока, перескакивает в нелогичное место или его не видно, у пользователя возникнет проблема.

    Как улучшить

    Сохраняйте стандартное поведение HTML-элементов. Для кнопок используйте <button>, для ссылок — <a>, для полей — <input>, <textarea>, <select>. Когда интерактивный элемент сделан из обычного <div>, разработчикам приходится вручную добавлять роль, фокус, обработку клавиатуры и состояние. На практике в таких местах чаще появляются ошибки.

    Добавьте заметный стиль :focus-visible: рамку, подчеркивание, изменение фона или другой понятный признак. Главное, чтобы фокус был виден на любом фоне и не закрывался липкой шапкой, всплывающим окном или баннером.

    Для мобильных интерфейсов проверьте размер кликабельных элементов. В WCAG 2.2 появился критерий Target Size Minimum: целевые элементы для указателя должны быть не меньше 24×24 CSS-пикселей либо иметь достаточное расстояние до соседних элементов. Для более строгого уровня AAA используется ориентир 44×44 CSS-пикселя.

    3. Добавьте понятные alt-тексты и альтернативы для медиа

    Изображения, иконки, графики, схемы и видео часто несут важную информацию. Если эта информация доступна только визуально, часть пользователей ее не получит. Это касается людей со слабым зрением, пользователей скринридеров, тех, у кого не загрузились картинки, а также людей, которые смотрят видео без звука.

    WCAG требует текстовые альтернативы для нетекстового контента. Декоративные изображения можно скрывать от вспомогательных технологий, а значимые изображения должны иметь описание, которое передает их смысл.

    Как писать alt-тексты

    Хороший alt-текст кратко объясняет смысл изображения в контексте страницы. Он не обязан описывать каждую деталь, если она не важна для пользователя.

    Пример для изображения на странице услуги:

    Плохо: alt="картинка"
    Лучше: alt="Пример интерфейса мобильного приложения для записи к врачу"

    Пример для иконки рядом с преимуществом:

    Плохо: alt="галочка"
    Лучше: alt="", если рядом уже есть текст «Гарантия 12 месяцев»

    Пример для графика:

    Плохо: alt="график"
    Лучше: alt="Рост заявок после редизайна сайта: с 120 до 185 обращений в месяц"

    Если график сложный, рядом стоит добавить текстовое пояснение: что сравнивается, за какой период, какой вывод должен сделать читатель.

    Что делать с видео

    Для видео с речью добавьте субтитры. Для роликов, где смысл передается через визуальные действия, добавьте текстовое описание или отдельный материал рядом с видео. WCAG требует субтитры для предварительно записанного аудиоконтента в синхронизированных медиа, а для части видеоконтента — аудиоописание или медиа-альтернативу.

    Для корпоративного сайта это особенно полезно на страницах с кейсами, презентациями, обучающими видео, инструкциями, обзорами продукта и демонстрацией интерфейса.

    4. Улучшите формы, ошибки и понятность действий

    Форма заявки — одно из самых чувствительных мест на сайте. Пользователь уже готов оставить контакт, заказать расчет или зарегистрироваться. Если форма непонятна, часть заявок теряется.

    WCAG требует, чтобы у полей были метки или инструкции, когда пользователь должен ввести данные. Ошибка должна быть определена и описана текстом, а если известно, как ее исправить, сайт должен дать подсказку.

    Частые проблемы в формах

    На сайтах часто встречаются одинаковые ошибки:

    • placeholder используется вместо полноценной подписи;
    • непонятно, какие поля обязательные;
    • сообщение об ошибке появляется только цветом;
    • ошибка написана общими словами: «Некорректное значение»;
    • после отправки пользователь не понимает, ушла заявка или нет;
    • маска телефона мешает вставить номер;
    • капча недоступна для части пользователей;
    • форма сбрасывает введенные данные после ошибки.

    Такие мелочи напрямую влияют на количество заявок. Особенно на мобильных устройствах, где пользователю сложнее возвращаться к полям и исправлять данные.

    Как улучшить

    У каждого поля должна быть видимая подпись. Если нужны пояснения, добавьте короткий пример рядом с полем: «Телефон: +7 999 123-45-67», «Email: name@example.com». Для обязательных полей используйте понятное обозначение и текстовое пояснение.

    Сообщения об ошибках пишите конкретно:

    • «Введите email в формате name@example.com»
    • «Пароль должен содержать минимум 8 символов»
    • «Выберите способ связи»
    • «Файл слишком большой, загрузите документ до 10 МБ»

    После успешной отправки покажите понятное подтверждение: «Заявка отправлена. Мы свяжемся с вами в течение рабочего дня». Если форма связана с оплатой, регистрацией или юридически значимым действием, добавьте проверку данных перед финальной отправкой.

    Также проверьте, как форма работает со скринридером. Поле должно иметь программно определяемое имя, роль и состояние. Для компонентов интерфейса WCAG требует, чтобы имя и роль могли быть определены программно, а изменения состояния были доступны вспомогательным технологиям.

    5. Внедрите регулярную проверку доступности

    Доступность ухудшается постепенно. Сегодня на сайте все в порядке, завтра маркетолог добавил баннер с текстом внутри картинки, дизайнер изменил цвет кнопки, разработчик подключил новый фильтр, редактор вставил таблицу без заголовков. Через несколько месяцев сайт снова становится неудобным.

    W3C рекомендует оценивать доступность на ранних этапах разработки и на протяжении всего процесса, потому что проблемы проще исправлять до релиза. Полная проверка требует больше усилий, а простые проверки можно выполнять даже в браузере.

    Что проверять регулярно

    Составьте небольшой список страниц:

    • главная;
    • страница услуги;
    • карточка товара или проекта;
    • форма заявки;
    • страница контактов;
    • статья блога;
    • страница оплаты или регистрации;
    • личный кабинет, если он есть.

    Для каждой страницы проверьте контраст, заголовки, alt-тексты, клавиатурную навигацию, формы, ошибки, мобильную версию и увеличение текста.

    Доступность лучше учитывать не только на этапе дизайна, но и при верстке, backend-логике, обработке форм и тестировании. Поэтому такие задачи удобно решать в рамках full-stack разработки, когда команда отвечает за интерфейс, серверную часть и качество работы продукта.

    Какие инструменты использовать

    Автоматические инструменты помогают быстро найти часть ошибок:

    • Lighthouse в Chrome DevTools;
    • axe DevTools;
    • WAVE;
    • валидатор W3C;
    • Accessibility Insights;
    • скринридер NVDA для Windows;
    • VoiceOver на macOS и iOS.

    Автоматическая проверка не видит всё. Например, инструмент может сказать, что alt-текст есть, но не поймет, полезен ли он пользователю. Поэтому лучше сочетать автоматические отчеты с ручной проверкой: пройти сайт клавиатурой, увеличить масштаб до 200%, открыть страницу на телефоне, включить скринридер, проверить реальные формы.

    Мини-чек-лист доступности сайта

    Используйте этот список для быстрой проверки:

    1. Основной текст хорошо читается на всех ключевых фонах.
    2. Контраст обычного текста не ниже 4.5:1.
    3. Цвет не используется как единственный способ передать смысл.
    4. Текст можно увеличить до 200% без потери содержания.
    5. Все кнопки, ссылки, меню и формы доступны с клавиатуры.
    6. Фокус виден на интерактивных элементах.
    7. Модальные окна можно закрыть с клавиатуры.
    8. У значимых изображений есть полезные alt-тексты.
    9. Декоративные изображения скрыты от скринридеров.
    10. У видео с речью есть субтитры.
    11. У каждого поля формы есть понятная подпись.
    12. Ошибки в формах описаны текстом.
    13. Пользователь получает понятное сообщение после отправки формы.
    14. Заголовки страниц идут в логичном порядке.
    15. Сайт регулярно проверяется после изменений дизайна, верстки и контента.

    Итог

    Доступность сайта начинается с базовых вещей: читаемый текст, хороший контраст, понятные формы, управление с клавиатуры, корректные alt-тексты и регулярная проверка. Эти улучшения помогают людям с разными возможностями пользоваться сайтом без лишних препятствий, а бизнесу — получать больше заявок, снижать потери на формах и делать интерфейс понятнее.

    Для корпоративного сайта, интернет-магазина, сервиса или личного кабинета доступность лучше учитывать во время проектирования, дизайна, разработки и наполнения. Так исправления обходятся дешевле, а результат получается стабильнее.

    Если вы хотите проверить сайт на удобство, доступность и технические ошибки, команда Yusmp Group поможет провести аудит и подготовить понятный план улучшений.

    Автор текста
    Дима Логинов, IT-блогер

    Published by super_gadget in Главная, Статьи