Приведи примеры доступности в HTML

Примеры доступности (a11y) в HTML

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

1. Семантическая разметка

Использование семантических тегов вместо <div> и <span> — основа доступности. Они несут смысловую нагрузку для скринридеров (программ чтения с экрана).

<!-- Хорошо: семантические теги -->
<header>
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Заголовок статьи</h1>
    <p>Текст статьи...</p>
  </article>
</main>
<footer>Подвал сайта</footer>

<!-- Плохо: "дивная" верстка -->
<div id="header">
  <div class="nav">
    <div class="menu-item"><a href="/">Главная</a></div>
  </div>
</div>
<div id="content">...</div>

Теги <header>, <nav>, <main>, <article>, <footer> сообщают структуру страницы. Скринридеры могут быстро перемещаться между ними (например, перейти к <main> минуя повторяющийся <nav>).

2. Атрибуты для интерактивных элементов

Ключевые атрибуты, которые делают элементы интерфейса понятными для вспомогательных технологий.

<!-- Альтернативный текст для изображений -->
<img src="chart.png" alt="Диаграмма: рост продаж на 25% в 2023 году">
<!-- Если изображение декоративное -->
<img src="divider.png" alt="" role="presentation">

<!-- Подписи и связи для полей форм -->
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required aria-describedby="username-hint">
<span id="username-hint" class="hint">Используйте латинские буквы и цифры</span>

<!-- Состояние элемента через aria-атрибуты -->
<button aria-expanded="false" aria-controls="dropdown-menu">Меню</button>
<ul id="dropdown-menu" hidden>
  <li><a href="#">Пункт 1</a></li>
</ul>

Атрибут alt — один из самых важных. Он должен содержать содержательное описание для информативных изображений. Для декоративных изображений используйте пустой alt="" или role="presentation".

3. Управление фокусом и клавиатурная навигация

Все интерактивные элементы должны быть доступны с клавиатуры (Tab, Shift+Tab, Enter, Space, стрелки).

<!-- Нативные элементы уже доступны с клавиатуры -->
<button onclick="submit()">Отправить</button>
<a href="/about">О нас</a>

<!-- Кастомные элементы требуют доработки -->
<div class="custom-button" 
     tabindex="0" 
     role="button"
     onclick="handleClick()"
     onkeydown="if(event.key === 'Enter' || event.key === ' ') handleClick()">
  Кастомная кнопка
</div>

<!-- Управление фокусом после действий -->
<button onclick="openModal()">Открыть модальное окно</button>
<div id="modal" hidden>
  <h2>Окно</h2>
  <button onclick="closeModal()" autofocus>Закрыть</button>
</div>

Атрибут tabindex определяет порядок перехода по элементам:

• tabindex="0" — элемент включается в естественный порядок навигации
• tabindex="-1" — элемент может получить фокус программно, но не через Tab
• tabindex="1" и больше — нарушает естественный порядок, использовать не рекомендуется

4. ARIA (Accessible Rich Internet Applications)

Набор атрибутов для описания ролей, свойств и состояний элементов, когда нативной семантики недостаточно.

<!-- Прогресс-бар -->
<div role="progressbar" 
     aria-valuenow="65"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-label="Загрузка файла">
  <div class="progress" style="width: 65%"></div>
</div>

<!-- Оповещение для скринридера -->
<div role="alert" aria-live="assertive">
  Файл успешно загружен!
</div>

<!-- Скрытый от зрячих, но доступный для скринридера текст -->
<button class="icon-button">
  <svg aria-hidden="true">...</svg>
  <span class="visually-hidden">Удалить элемент</span>
</button>

Ключевые правила использования ARIA:

• Не используйте ARIA, если есть нативный HTML-элемент (<button> вместо <div role="button">)
• Не меняйте семантику нативных элементов (не добавляйте role="button" к настоящей кнопке)
• Убедитесь, что элемент интерактивен (управляется с клавиатуры, если имеет роль интерактивного элемента)

5. Доступные формы и сообщения об ошибках

<form>
  <fieldset>
    <legend>Выберите способ доставки</legend>
    
    <input type="radio" id="courier" name="delivery" value="courier">
    <label for="courier">Курьер</label>
    
    <input type="radio" id="pickup" name="delivery" value="pickup">
    <label for="pickup">Самовывоз</label>
  </fieldset>
  
  <label for="email">Email:</label>
  <input type="email" 
         id="email" 
         name="email" 
         aria-required="true"
         aria-invalid="false"
         aria-describedby="email-error">
         
  <div id="email-error" role="alert" aria-live="polite"></div>
</form>

<script>
  // Динамическое обновление сообщения об ошибке
  function validateEmail() {
    const errorElement = document.getElementById('email-error');
    const input = document.getElementById('email');
    
    if (!input.value.includes('@')) {
      input.setAttribute('aria-invalid', 'true');
      errorElement.textContent = 'Введите корректный email адрес';
    } else {
      input.setAttribute('aria-invalid', 'false');
      errorElement.textContent = '';
    }
  }
</script>

Практические рекомендации

• Проверяйте вручную: попробуйте пройти по сайту только с клавиатуры (Tab, Shift+Tab, Enter)
• Используйте инструменты: Lighthouse в Chrome DevTools, axe DevTools, NVDA/JAWS для тестирования со скринридерами
• Тестируйте с пользователями: привлекайте людей с ограниченными возможностями к тестированию
• Следуйте WCAG: Руководство по доступности веб-контента — основной стандарт

Доступность — не опция, а необходимость. По данным ВОЗ, более 1 миллиарда людей имеют какую-либо форму инвалидности. Создавая доступные интерфейсы, вы не только соблюдаете законы (как ADA в США), но и расширяете аудиторию своего продукта, улучшаете SEO (поисковые системы учитывают семантику) и создаёте более качественный код в целом.