Зачем доступность и как ей помогает семантика

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

Доступность (accessibility, a11y) — свойство интерфейса, при котором им может пользоваться как можно больше людей, включая людей с инвалидностью, а машины могут его корректно «прочитать».

Слово a11y — это сокращение: буква «a», 11 пропущенных букв и буква «y» в слове accessibility. Дальше по тексту будем использовать оба варианта.

Кто на самом деле этим пользуется

Когда говорят «доступность», часто представляют редкий крайний случай. На деле аудитория широкая и пересекается с обычными пользователями:

Незрячие и слабовидящие. Они слушают страницу через скринридер — программу, которая читает содержимое вслух (VoiceOver на Mac/iPhone, NVDA и JAWS на Windows, TalkBack на Android). Скринридер не «смотрит» на картинку — он читает разметку.
Люди, которые не могут пользоваться мышью. Из-за травмы, тремора или просто привычки они ходят по странице клавишей Tab. Если по элементу нельзя пройти с клавиатуры — для них его как будто нет.
Слабослышащие. Им нужны субтитры и текстовые альтернативы к аудио.
Люди с дислексией, нарушением внимания, временными ограничениями — сломанная рука, яркое солнце на экране телефона, медленный интернет.

А ещё страницу «читает» поисковый робот и голосовой ассистент. Хорошая семантика одновременно помогает и человеку со скринридером, и SEO — это не два разных проекта, а один.

Семантика — фундамент доступности

Скринридер строит свою картину страницы из семантики: какие здесь заголовки, где ссылка, где кнопка, где список. Если всё свёрстано из «пустых» <div> и <span>, скринридер видит сплошное полотно текста без структуры.

Сравните два варианта «кнопки». Внешне их можно сделать одинаковыми через CSS, но ведут себя они по-разному:

<!-- Плохо: для скринридера это просто текст, по Tab не попасть, Enter не сработает -->
<div class="btn" onclick="send()">Отправить</div>

<!-- Хорошо: нативная кнопка фокусируется, реагирует на Enter/Пробел, объявляется как «кнопка» -->
<button type="button" onclick="send()">Отправить</button>

Нативный <button> бесплатно даёт фокус с клавиатуры, реакцию на Enter и Пробел и правильную роль «кнопка» в скринридере. Повторить всё это на <div> вручную можно, но это десятки строк кода, которые легко забыть. Отсюда главный принцип: сначала ищи подходящий нативный элемент, и только если его нет — собирай свой.

Структурные теги вместо div-супа

HTML даёт готовые «отделы» страницы. Они помогают скринридеру быстро перепрыгивать между блоками:

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

Скринридер умеет показывать список таких ориентиров (landmarks) и перемещаться по ним. Если вся страница — один <div id="app">, этого списка просто нет.

Заголовки — это оглавление, а не размер шрифта

Теги <h1>…<h6> задают структуру, а не внешний вид. Пользователи скринридеров часто навигируют именно по заголовкам — как мы пробегаем глазами по жирным подзаголовкам статьи.

<h1>Рецепт борща</h1>
  <h2>Ингредиенты</h2>
  <h2>Приготовление</h2>
    <h3>Шаг 1. Бульон</h3>
    <h3>Шаг 2. Овощи</h3>

Правила простые: один <h1> на страницу (главный заголовок), уровни не перепрыгивают (после h2 идёт h3, а не сразу h4), и заголовок выбирают по смыслу, а не потому что «нужен текст помельче» — для размера есть CSS.

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

Скринридер не видит, что на картинке. Он читает атрибут alt. Хороший alt описывает смысл изображения в контексте:

<!-- Информативная картинка: опиши, что важно -->
<img src="chart.png" alt="Продажи выросли с 10 до 45 млн за год">

<!-- Декоративная картинка (узор, разделитель): пустой alt, чтобы скринридер её пропустил -->
<img src="divider.png" alt="">

Важно: alt="" (пустой) и полное отсутствие атрибута — это разные вещи. Пустой alt говорит «картинка декоративная, пропусти». Без атрибута вообще скринридер может зачитать имя файла вроде IMG_4821.png — это мусор в ушах пользователя.

Что такое WCAG простыми словами

WCAG (Web Content Accessibility Guidelines) — международный свод рекомендаций по доступности. Звучит громоздко, но в основе всего четыре принципа, которые легко запомнить по аббревиатуре POUR:

Perceivable (воспринимаемость). Контент можно воспринять разными органами чувств: у картинки есть alt, у видео — субтитры, текст контрастен к фону.
Operable (управляемость). Всем можно управлять с клавиатуры, а не только мышью; ничто не мигает агрессивно.
Understandable (понятность). Текст и поведение предсказуемы: ошибки формы объясняются понятно, навигация одинаковая на всех страницах.
Robust (надёжность). Разметка валидна, и её корректно читают разные программы — от старого скринридера до нового браузера.

У WCAG есть уровни соответствия: A (минимум), AA (практический стандарт, к которому стремятся почти все, и который требуют законы многих стран) и AAA (самый строгий, нужен редко). Цель по умолчанию — уровень AA.

Как это работает под капотом

Браузер из вашего HTML строит не только привычное дерево DOM, но и параллельное дерево доступности (accessibility tree). В нём у каждого элемента есть три ключевых вещи: роль (что это — кнопка, ссылка, заголовок), имя (как его назвать вслух — текст ссылки, alt картинки) и состояние (нажата ли кнопка, раскрыт ли список).

Скринридер читает именно это дерево, а не пиксели. Поэтому нативный <button>Отправить</button> попадает в дерево как «кнопка, имя — Отправить», а <div>Отправить</div> — как безымянный текст. Семантические теги наполняют дерево доступности автоматически; <div> и <span> не несут роли вообще.

Частые ошибки

Кнопки и ссылки из <div>. Выглядит как кнопка, но с клавиатуры недостижимо и скринридером не объявляется.
Картинки без alt или с бесполезным alt вроде «картинка», «фото», «image».
Заголовки ради размера. <h4> поставили, потому что «помельче», а структуры под ним нет.
Низкий контраст. Светло-серый текст на белом фоне читается с трудом — это нарушение принципа Perceivable.
Опора только на цвет. «Красным отмечены ошибки» — а как быть тому, кто не различает красный и зелёный? Нужна ещё иконка или текст.

Итоги

Доступность нужна широкой аудитории: незрячим, людям без мыши, слабослышащим — и заодно роботам и SEO.
Скринридер читает разметку, а не картинку; основа доступности — правильная семантика.
Сначала бери нативный элемент (button, nav, main), и только если его нет — собирай свой.
Заголовки задают структуру, у картинок есть осмысленный alt (или пустой для декора).
WCAG держится на четырёх принципах POUR; практическая цель — уровень AA.