В чем разница между семантикой и accessibility?

Разница между семантикой и доступностью (Accessibility)

Семантика HTML — использование правильных HTML-элементов, которые описывают смысл содержимого. Это помогает браузерам и поисковикам понять структуру документа.

Доступность (Accessibility, a11y) — комплекс мер, обеспечивающих то, что веб-сайт удобен для всех пользователей, включая людей с ограничениями по зрению, слуху, моторике. Семантика — это только часть доступности.

Семантика

Описывает структуру и смысл контента.

Неправильная разметка (неинформативная)

<div onclick="handleClick()">Нажми меня</div>
<div style="font-size: 24px; font-weight: bold;">Заголовок</div>
<span style="color: red;">Ошибка</span>

Проблемы:

• Поисковик не понимает структуру
• Доступная технология не знает, что это кнопка или заголовок
• Сложнее поддерживать и стилизовать

Правильная семантическая разметка

<button type="button">Нажми меня</button>
<h1>Заголовок</h1>
<div role="alert" class="error">Ошибка</div>

Семантические элементы HTML5

<header>Верхняя часть сайта</header>
<nav>Навигация</nav>
<main>Основной контент</main>
<article>Статья</article>
<section>Раздел</section>
<aside>Боковая панель</aside>
<footer>Подвал</footer>

Доступность (Accessibility)

Обеспечивает удобство использования для всех пользователей.

1. Атрибуты ARIA

<!-- Описание назначения элемента -->
<div role="button" aria-label="Закрыть диалог" tabindex="0">
  X
</div>

<!-- Связь между элементами -->
<label for="username">Имя пользователя</label>
<input id="username" type="text" />

<!-- Живые регионы для уведомлений -->
<div aria-live="polite" aria-atomic="true">
  Данные загружены
</div>

2. Альтернативный текст

<!-- Хорошо: описательный alt -->
<img src="cat.jpg" alt="Рыжий кот спит на диване" />

<!-- Плохо: неинформативный alt -->
<img src="cat.jpg" alt="photo" />

<!-- Правильно: декоративное изображение -->
<img src="decoration.jpg" alt="" aria-hidden="true" />

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

/* Хороший контраст: минимум 4.5:1 для текста */
color: #333; /* Черный текст */
background-color: #fff; /* Белый фон */

/* Плохой контраст: читать невозможно */
color: #999;
background-color: #f0f0f0;

4. Фокусируемость и навигация

<!-- Правильно: интерактивные элементы фокусируемы -->
<button>Отправить</button>
<a href="#">Ссылка</a>
<input type="text" />

<!-- Плохо: div не фокусируется -->
<div onclick="handleClick()">Нажми</div>

<!-- Исправление: добавить tabindex -->
<div role="button" tabindex="0" onclick="handleClick()">Нажми</div>

5. Структура заголовков

<!-- Правильная иерархия -->
<h1>Главный заголовок</h1>
<h2>Подзаголовок</h2>
<h3>Подподзаголовок</h3>

<!-- Плохо: пропуск уровней -->
<h1>Заголовок</h1>
<h3>Подзаголовок</h3> <!-- Должно быть h2 -->

6. Форма с доступностью

<form>
  <!-- Связь label с input -->
  <label for="email">Email:</label>
  <input id="email" type="email" required aria-required="true" />
  
  <!-- Подсказка для ошибок -->
  <span id="email-error" role="alert">Email некорректен</span>
  <input aria-describedby="email-error" />
  
  <!-- Подсказка для вспомогательных технологий -->
  <input type="password" aria-label="Пароль (минимум 8 символов)" />
</form>

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

Практический пример

Плохо: ни семантики, ни доступности

<div onclick="openMenu()" style="cursor: pointer;">
  <div>Меню</div>
  <div>Опция 1</div>
  <div>Опция 2</div>
</div>

Хорошо: семантика + доступность

<nav>
  <button aria-expanded="false" aria-controls="menu">
    Меню
  </button>
  <ul id="menu" role="menu">
    <li role="presentation"><a href="#">Опция 1</a></li>
    <li role="presentation"><a href="#">Опция 2</a></li>
  </ul>
</nav>

Проверка доступности

Инструменты:

• Lighthouse (в DevTools)
• axe DevTools
• WAVE
• Проверка с клавиатуры (Tab, Enter, Esc)
• Чтение с помощью screen reader (NVDA, JAWS, VoiceOver)

Ключевые моменты

• Семантика — основа доступности
• ARIA — для дополнения семантики, когда HTML недостаточно
• Доступность — не только для инвалидов, улучшает UX для всех
• Тестирование — обязательно вручную и автоматизированными инструментами
• Стандарты — WCAG 2.1 (уровни A, AA, AAA)