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

Digital-студия WNDER

Почему доступность важна?

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

Вот несколько причин, почему стоит задуматься о доступности:

  • Расширение аудитории: люди с инвалидностью составляют значительную часть пользователей.
  • Юзабилити: доступные сайты удобнее для всех.
  • Законодательство: во многих странах доступность требуется по закону.
  • Репутация: вы показываете, что вам не всё равно.

Основные принципы доступности

Чтобы не запутаться, запомните четыре принципа, на которых строится доступность (они описаны в руководстве WCAG):

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

Эти принципы — как фундамент дома. Без них никуда.

Практические приёмы с HTML

Начнём с разметки. Правильные HTML-теги — это половина успеха.

Семантические теги

Используйте теги по назначению. Например, <header>, <nav>, <main>, <footer> помогают скринридерам ориентироваться на странице. Не заменяйте их на <div> без необходимости.

<header>
  <h1>Мой сайт</h1>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">О нас</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Статья</h2>
    <p>Текст статьи...</p>
  </article>
</main>
<footer>
  <p>© 2023</p>
</footer>

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

Каждое изображение должно иметь атрибут alt. Если картинка не несёт смысла, оставьте alt пустым, но не убирайте его.

<img src="logo.png" alt="Логотип компании">
<img src="decor.png" alt="">

Формы и метки

Для полей ввода используйте <label>, связанный с полем через for и id. Это помогает пользователям скринридеров понять, что за поле.

<label for="name">Имя:</label>
<input type="text" id="name" name="name">

Стилизация с учётом доступности

CSS тоже играет большую роль. Вот несколько моментов.

Контрастность

Текст должен быть легко читаем. Проверьте контраст между цветом текста и фоном. Хорошее соотношение — не менее 4.5:1 для обычного текста. Используйте инструменты вроде WebAIM Contrast Checker.

Размер шрифта и масштабирование

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

body {
  font-size: 1rem; /* базовый размер */
}
h1 {
  font-size: 2rem;
}

Фокус и навигация с клавиатуры

Убедитесь, что все интерактивные элементы имеют видимый фокус. По умолчанию браузеры показывают обводку, но некоторые сбрасывают её. Не делайте так! Если хотите кастомизировать, используйте :focus-visible.

a:focus-visible {
  outline: 2px solid blue;
}
Правило: Никогда не удаляйте обводку фокуса полностью. Это лишает пользователей клавиатуры возможности понять, где они находятся.

Инструменты для проверки доступности

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

Инструмент Описание
Lighthouse Встроен в Chrome DevTools, проверяет доступность.
axe Расширение для браузера, быстро находит проблемы.
WAVE Онлайн-сервис, показывает ошибки визуально.
NVDA Бесплатный скринридер для Windows.

Эти инструменты помогут выявить проблемы и исправить их.

Лайфхаки для быстрого старта

Вот несколько простых шагов, которые можно сделать прямо сейчас:

  • Добавьте lang в тег <html>, чтобы указать язык страницы.
  • Используйте заголовки <h1>–<h6> в логическом порядке, не пропускайте уровни.
  • Проверьте, что все ссылки имеют понятный текст (не «здесь», а «скачать отчёт»).
  • Убедитесь, что видео имеют субтитры.
  • Добавьте aria-label для кнопок без текста (например, иконок).
Лайфхак: Используйте prefers-reduced-motion в CSS, чтобы уважать настройки пользователей, которые не хотят анимаций. 
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Что в итоге?

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

Сделайте свой вклад в доступный интернет — это проще, чем кажется.

Студия WNDER