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

Digital-студия WNDER

Что такое доступность и зачем она нужна

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

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

Семантическая разметка: фундамент доступности

Первый шаг к доступности — использовать правильные HTML-теги. Семантика помогает скринридерам (программам, которые озвучивают содержимое для слепых) понимать структуру страницы. Вместо того чтобы оборачивать всё в <div>, используйте <header>, <nav>, <main>, <footer>.

<header>
  <h1>Мой сайт</h1>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">О нас</a></li>
    </ul>
  </nav>
</header>
<main>
  <p>Основной контент</p>
</main>
<footer>
  <p>© 2025</p>
</footer>

Такая разметка помогает не только скринридерам, но и поисковикам лучше понять страницу. А ещё это просто хорошая практика.

Текст и контраст: чтобы было видно и читаемо

Один из самых частых барьеров — плохой контраст текста и фона. Если вы используете светло-серый текст на белом фоне, многие люди просто не смогут его прочитать. Стандарт WCAG (Web Content Accessibility Guidelines) требует контраст не менее 4.5:1 для обычного текста и 3:1 для крупного.

Проверить контраст можно с помощью онлайн-инструментов, например, WebAIM Contrast Checker. Вот пример CSS, который гарантирует хороший контраст:

<style>
  body {
    color: #333; /* тёмно-серый */
    background-color: #fff; /* белый */
  }
  .large-text {
    font-size: 24px;
    color: #666; /* контраст 5.7:1 — подходит */
  }
</style>

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

Правило: Всегда проверяйте контраст текста и фона с помощью инструментов. Не полагайтесь на глаз — он может обмануть.

Изображения и мультимедиа: добавьте альтернативу

Изображения делают сайт красивее, но для незрячих пользователей они бесполезны, если не добавить атрибут alt. Атрибут alt содержит текстовое описание картинки. Если изображение чисто декоративное, оставьте alt="" (пустой), чтобы скринридер его пропустил.

<img src="cat.jpg" alt="Рыжий кот спит на подоконнике">
<img src="decorative-line.png" alt="">

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

Формы и интерактивные элементы: сделайте их доступными

Формы — частая проблема. У полей ввода должны быть связанные метки (<label>). Не используйте placeholder вместо метки — он исчезает при вводе и плохо читается скринридерами.

<label for="name">Ваше имя:</label>
<input type="text" id="name" name="name">

Для кнопок и ссылок важно, чтобы они были доступны с клавиатуры. Убедитесь, что фокус виден (не убирайте outline без замены).

<style>
  a:focus, button:focus {
    outline: 3px solid #ff9800;
  }
</style>

Также используйте атрибуты ARIA (Accessible Rich Internet Applications), когда стандартных средств недостаточно. Например, для кастомных выпадающих списков.

Лайфхак: Проверьте свою страницу только с клавиатуры (Tab и Shift+Tab). Если вы не можете добраться до всех элементов — это проблема.

Сравнение атрибутов доступности

Вот таблица с основными атрибутами и их назначением:

Атрибут Где использовать Зачем
alt <img> Текстовое описание изображения
aria-label Любой элемент Задаёт метку для скринридера, если нет видимого текста
role Любой элемент Определяет роль элемента (например, role="button")
tabindex Интерактивные элементы Управляет порядком фокуса с клавиатуры

Используйте эти атрибуты с умом — не пихайте ARIA везде, где попало. Лучше сначала использовать нативные HTML-элементы, которые уже доступны по умолчанию.

Что в итоге

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

Внедряйте эти советы постепенно, и вы увидите, как ваш сайт становится лучше. А если нужна помощь — обращайтесь к профессионалам.

Студия WNDER