Создание доступных веб-страниц с помощью HTML и CSS

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

Почему доступность — это не опция, а необходимость

Допустим, вы построили дом. Красивый, с большими окнами. Но входная дверь такая узкая, что в неё не пройдёт человек в инвалидной коляске. Странно, правда? Вот так же и с сайтами. Если ваша страница не доступна для людей с ограниченными возможностями, вы просто отсекаете часть аудитории.

По данным ВОЗ, около 15% населения мира имеют какую-либо форму инвалидности. Это не шутка. К тому же, доступные сайты лучше ранжируются в поисковиках и проще в обслуживании. Так что это выгодно всем.

Начнём с основ: семантическая разметка. Это когда вы используете правильные HTML-теги для разных частей страницы. Например, <header> для шапки, <nav> для навигации, <main> для основного контента. Экранные читалки ориентируются на эти теги, чтобы быстро перемещаться по странице.

<header>
  <h1>Мой блог</h1>
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Статья о доступности</h2>
    <p>Текст статьи...</p>
  </article>
</main>
<footer>
  <p>Копирайт 2023</p>
</footer>

Видите? Всё логично и понятно. Не надо лепить везде <div>.

Контрастность и цвета — чтобы текст был читаем

Теперь про CSS. Одна из главных проблем на сайтах — плохая читаемость текста. Светло-серый текст на белом фоне — это модно? Возможно. Но для людей с плохим зрением это катастрофа.

Есть такое понятие — коэффициент контрастности. Он показывает, насколько текст выделяется на фоне. Для обычного текста коэффициент должен быть не менее 4.5:1, а для крупного текста (от 18px жирного или 24px обычного) — не менее 3:1. Это стандарт WCAG (Web Content Accessibility Guidelines).

Как проверить? Есть куча онлайн-инструментов, например, WebAIM Contrast Checker. Просто введите цвет текста и фона, и он скажет, всё ли ок.

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

.status {
  padding: 5px 10px;
  border-radius: 4px;
}
.status-completed {
  background-color: #4CAF50;
  color: white;
}
.status-pending {
  background-color: #FFC107;
  color: black;
}

А в HTML добавьте атрибут aria-label для экранных читалок:

<span class="status status-completed" aria-label="Статус: завершён">Завершён</span>

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

Многие пользователи не используют мышь. Они перемещаются по странице с помощью клавиши Tab. И если ваш сайт не поддерживает фокус, они просто не смогут нажать на кнопку или перейти по ссылке.

По умолчанию браузеры добавляют контур (outline) к элементам, которые находятся в фокусе. Но некоторые дизайнеры убирают его, потому что "это некрасиво". Пожалуйста, не делайте так. Если уж очень хочется, замените стандартный outline на что-то своё, но чтобы он был виден.

/* Плохо */
:focus {
  outline: none;
}

/* Хорошо */
:focus {
  outline: 2px solid #0073e6;
  outline-offset: 2px;
}

Также убедитесь, что все интерактивные элементы — кнопки, ссылки, поля ввода — доступны с клавиатуры. Для этого используйте правильные теги. Если вы сделали кнопку из <div>, не забудьте добавить tabindex="0" и обработчик нажатия Enter.

<div role="button" tabindex="0" onclick="alert('Привет!')" onkeydown="if(event.key==='Enter') alert('Привет!')">
  Нажми меня
</div>

Но лучше всё-таки использовать <button> — он уже умеет фокусироваться и обрабатывать Enter.

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

Изображения — это здорово, но экранная читалка не видит картинку. Она читает атрибут alt. Поэтому всегда добавляйте его. Если изображение декоративное (просто для красоты), оставляйте alt="" — пустая строка, чтобы читалка его пропустила.

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

<!-- Декоративное изображение -->
<img src="border.png" alt="">

Не пишите "картинка" или "фото" — это бесполезно. Опишите суть.

Таблица: основные правила доступности

Для быстрой проверки вот таблица с базовыми требованиями:

Кстати, про формы. Всегда связывайте <label> с <input> через атрибут for и id.

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

Если лень писать for, просто оберните поле в <label>:

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

Оба варианта работают.

Адаптивность и читаемость

Доступность — это не только про людей с инвалидностью. Это ещё и про мобильные устройства. Если ваш сайт не адаптирован, текст мелкий, кнопки крошечные — это тоже проблема.

Используйте относительные единицы, например, rem вместо px. Тогда пользователь сможет увеличить текст в браузере, и всё не развалится.

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

И не забывайте про max-width для контейнеров, чтобы текст не растягивался на весь экран. Оптимальная длина строки — 60-80 символов.

.content {
  max-width: 65ch; /* ch — это ширина символа '0' */
  margin: 0 auto;
}

Что в итоге

Создание доступных веб-страниц — это не rocket science. Это просто привычка делать сайты удобными для всех. Начните с малого: добавьте alt-текст к картинкам, проверьте контрастность, убедитесь, что по сайту можно перемещаться с клавиатуры. Каждый шаг делает интернет чуточку лучше.

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