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

Digital-студия WNDER

Ссылка на оригинальную статью

Почему доступность — это не только про инвалидов

Доступность (a11y) — это не просто модный тренд. Это про то, чтобы ваш сайт могли использовать все: и те, кто видит плохо, и те, кто не может пользоваться мышкой, и те, кто читает с телефона в метро. Знаете, как бывает: вы набираете текст на клавиатуре, а тут вдруг мышка сломалась. Если сайт доступен, вы без проблем всё сделаете с клавиатуры. А если нет — вы в ловушке.

По данным ВОЗ, около 15% населения мира имеют ту или иную форму инвалидности. Это не так уж мало, правда? Плюс, доступные сайты лучше индексируются поисковиками, потому что семантическая разметка — это как понятные заголовки в книге. Поисковик читает их и понимает, о чём страница.

Лайфхак: Включите режим проверки доступности в DevTools браузера (например, Lighthouse в Chrome). Он покажет, что на странице не так, и даст рекомендации. Это как бесплатный аудит от профессионала.

Семантический HTML — ваш лучший друг

Когда я вижу сайт, где всё свёрстано дивами, мне хочется плакать. Представьте, что вы читаете книгу, где все слова написаны одним шрифтом, без абзацев и заголовков. Кошмар, правда? Так и с HTML: если использовать только <div> и <span>, то скринридер (программа, которая читает текст с экрана вслух) не сможет понять структуру страницы.

Вместо этого используйте семантические теги: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. Они не только делают код чище, но и помогают скринридерам навигировать по странице. Например, пользователь может перейти сразу к основному контенту, пропустив меню.

Вот простой пример семантической разметки:

<body>
  <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>© 2025 Мой блог</p>
  </footer>
</body>

Видите, как всё логично? Даже без стилей понятно, где что. А если добавить CSS, то получится красиво и доступно.

ARIA: когда HTML не справляется

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

Пример: у вас есть попап (модальное окно). Чтобы скринридер понял, что это диалог, используйте role="dialog" и aria-labelledby для заголовка.

<div role="dialog" aria-labelledby="modal-title" aria-modal="true">
  <h2 id="modal-title">Подтвердите действие</h2>
  <p>Вы уверены, что хотите удалить этот файл?</p>
  <button>Удалить</button>
  <button>Отмена</button>
</div>

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

CSS и доступность: подводные камни

CSS тоже может влиять на доступность. Например, если вы используете display: none для скрытия элементов, скринридер их не прочитает. Но если вы хотите скрыть визуально, но оставить в дереве доступности, используйте класс .visually-hidden.

Вот как его сделать:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

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

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

Адаптивность и доступность — братья навек

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

Используйте относительные единицы (em, rem, %) вместо пикселей, чтобы текст масштабировался. И не забывайте про meta viewport для мобильных устройств.

Вот таблица сравнения единиц измерения:

Единица Описание Когда использовать
px Фиксированный размер Для границ, иконок
rem Относительно корневого шрифта Для отступов, размеров текста
em Относительно родительского шрифта Для локальных изменений
% Относительно родительского элемента Для ширины, высоты

Лично я предпочитаю rem для всего, что связано с текстом, и % для макета.

Практические советы и частые ошибки

Давайте подведём итоги и перечислим частые ошибки, которые я вижу у новичков:

  • Использование <div> для кнопок — лучше <button>.
  • Отсутствие alt-текста у изображений. Пишите описания, например: «Кот в шляпе сидит на диване».
  • Слишком маленький шрифт. Минимум 16px для основного текста.
  • Недостаточный контраст. Проверяйте на WebAIM.
  • Отсутствие фокуса у элементов. Убедитесь, что при навигации с клавиатуры видно, где вы находитесь.
Правило: Сначала семантика, потом стили. Если HTML неправильный, никакой CSS не спасёт доступность.

Заключение

Создание доступных веб-страниц — это не ракетостроение. Достаточно следовать простым правилам: использовать семантические теги, добавлять ARIA только там, где нужно, заботиться о контрасте и делать адаптив. Начните с малого: проверьте свой сайт на клавиатуре и с помощью скринридера (например, NVDA или VoiceOver). Вы удивитесь, сколько всего можно улучшить.

Помните: доступность — это не ограничение, а свобода. Свобода для всех пользователей. Так что давайте делать интернет лучше вместе.

Студия WNDER