Задумывались ли вы, что ваш сайт могут читать не только люди с идеальным зрением и быстрым интернетом? Кто-то пользуется скринридером, кто-то не различает цвета, а кто-то заходит с древнего телефона. Если ваш ресурс не учитывает такие нюансы, вы теряете значительную часть аудитории. В этой статье я расскажу, как сделать веб-страницы доступными с помощью простых приёмов HTML и CSS. Никакой магии — только практика.

Digital-студия WNDER

Почему доступность — это не скучно, а выгодно

Доступность (a11y) — это про то, чтобы ваш сайт могли использовать все: и бабушка с увеличением, и парень с дальтонизмом, и человек, который временно сломал руку. По данным ВОЗ, около 15% населения имеют какую-либо форму инвалидности. Представьте, что каждый седьмой посетитель не может прочитать ваш текст или нажать кнопку. Это как вывесить объявление на высоте трёх метров — вроде написали, но никто не прочитает.

Кроме того, поисковики любят доступные сайты. Чем понятнее структура и семантика — тем лучше индексация. А ещё с 2025 года в ЕС действует European Accessibility Act, обязывающий многие сайты быть доступными. Так что это не только этично, но и юридически грамотно.

Правило №1: Начните думать о доступности не в конце проекта, а с самого начала. Потом переделывать — дороже и больнее.

Семантика — это скелет вашей страницы

HTML — это не просто набор тегов. Это способ сообщить браузеру и вспомогательным технологиям, что здесь заголовок, а здесь — навигация. Если вы используете <div> для всего подряд, скринридер не сможет понять структуру. Человек с нарушением зрения услышит бесконечный поток текста без ориентиров.

Используйте правильные теги:

  • <header> — для шапки сайта.
  • <nav> — для навигации.
  • <main> — для основного контента.
  • <article> — для самостоятельных статей.
  • <section> — для логических разделов.
  • <footer> — для подвала.

Заголовки должны идти по порядку: один <h1> на странице, затем <h2>, <h3> и так далее. Не прыгайте с <h2> на <h5> — это ломает логику.

<main>
    <h1>Добро пожаловать в мой блог</h1>
    <article>
        <h2>Как я провёл лето</h2>
        <p>Текст статьи...</p>
    </article>
</main>

Если вы используете CSS-фреймворк типа Bootstrap, он уже даёт базовую семантику. Но не забывайте проверять, что у вас есть только один <h1>.

Текст и изображения: делаем контент читабельным

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

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

<img src="dog.jpg" alt="Собака породы хаски играет в снегу">
<!-- Декоративное изображение -->
<img src="background.jpg" alt="">

Также следите за контрастностью текста. Слишком светлый текст на белом фоне — враг доступности. Контраст должен быть не менее 4.5:1 для обычного текста. Можно использовать онлайн-инструменты для проверки, например, WebAIM Contrast Checker.

Лайфхак: Если вы не уверены в контрасте, сделайте скриншот страницы и переведите его в чёрно-белый режим. Если текст всё ещё читается — скорее всего, всё в порядке.

Формы и кнопки: путь без препятствий

Формы — это боль для многих пользователей. Особенно для тех, кто не может быстро печатать или имеет тремор рук. Убедитесь, что каждое поле имеет связанную метку <label>. Это позволяет кликать по метке, чтобы активировать поле, и помогает скринридерам понять назначение.

<label for="email">Ваш email:</label>
<input type="email" id="email" name="email" required>

Кнопки должны быть достаточно большими — не менее 44x44 пикселей (рекомендация Apple). Это удобно и для пальцев на мобильных, и для людей с ограниченной моторикой. Также не полагайтесь только на цвет для обозначения состояния — добавьте иконку или текст.

Для отправки формы используйте <button>, а не <div> с обработчиком. Нативная кнопка поддерживает навигацию с клавиатуры и скринридеры из коробки.

Клавиатурная навигация: для тех, кто не использует мышь

Многие люди с двигательными нарушениями пользуются только клавиатурой. Если ваш сайт нельзя полностью обойти с помощью Tab и Enter — это провал. Убедитесь, что все интерактивные элементы (ссылки, кнопки, поля) доступны с клавиатуры.

Проверьте порядок табуляции: он должен быть логичным — сверху вниз, слева направо. Иногда CSS меняет визуальный порядок, но не порядок в DOM. Это сбивает с толку.

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

a:focus, button:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

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

CSS и анимация: не навреди

CSS может как помочь, так и навредить. Например, анимация, которая мигает чаще 3 раз в секунду, может вызвать приступ у людей с эпилепсией. Используйте prefers-reduced-motion — медиазапрос, который позволяет отключить анимацию, если пользователь включил соответствующую настройку в системе.

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

Также не скрывайте контент с помощью display: none или visibility: hidden, если он должен быть доступен скринридеру. Используйте класс visually-hidden, который скрывает визуально, но оставляет в доступности.

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

И помните: не полагайтесь только на цвет для передачи информации. Например, если ошибка в форме обозначена красным цветом, добавьте ещё и текст или иконку.

Проверка доступности: как убедиться, что всё работает

Вы всё сделали, но как проверить? Есть несколько инструментов:

ИнструментЧто делаетТип
LighthouseВстроен в Chrome DevTools, даёт аудит доступностиАвтоматический
axe DevToolsРасширение для браузера, находит множество проблемАвтоматический
WAVEОнлайн-сервис, показывает ошибки прямо на страницеАвтоматический
NVDA или VoiceOverСкринридеры, позволяют услышать, как сайт воспринимаетсяРучной

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

Что в итоге: доступность — это не фича, а стандарт

Создание доступных веб-страниц — это не rocket science. Это просто здравый смысл и немного дисциплины. Семантический HTML, альтернативный текст, достаточный контраст, удобная навигация с клавиатуры — всё это делает ваш сайт лучше для всех. Вы не только помогаете людям с ограниченными возможностями, но и улучшаете SEO, повышаете удобство для мобильных пользователей и снижаете юридические риски.

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

Помните: доступность — это не чек-лист, который выполнил и забыл. Это постоянный процесс. Но он стоит того.

Студия WNDER