Как достигается доступность?

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

Доступность достигается через семантический HTML, клавиатурную навигацию, ARIA-атрибуты, достаточный контраст, альтернативные тексты и тестирование со скринридерами.

Основные способы

Семантический HTML

Использовать теги по смыслу (<button>, <nav>, <main>, заголовки) — они дают роли и поведение из коробки:

<button>Кнопка</button> <!-- доступна: фокус, Enter/Space, роль -->

Клавиатурная навигация

Всё управляемо с клавиатуры (Tab, Enter, Escape, стрелки).
Видимый фокус (:focus-visible).
Логичный порядок табуляции.

ARIA — где семантики не хватает

<div role="button" aria-label="Закрыть" aria-expanded="false">

Роли, состояния (aria-expanded), свойства (aria-label). Правило: сначала нативные теги, ARIA — при необходимости.

Контраст и визуал

Контраст текста ≥ 4.5:1 (WCAG).
Состояние не только цветом (иконка/текст).

Альтернативы

alt для изображений, субтитры для видео.

Формы

<label for>, понятные ошибки, aria-describedby.

Тестирование

Скринридеры (VoiceOver, NVDA), клавиатура, axe/Lighthouse.

Стандарт

WCAG (принципы POUR: Perceivable, Operable, Understandable, Robust).

Коротко для собеседования

Доступность достигается: семантическим HTML (<button>, <nav>, роли из коробки), клавиатурной навигацией (Tab, видимый фокус), ARIA (role, aria-label, где семантики нет), контрастом ≥ 4.5:1, alt-текстами, доступными формами (<label>). Тестируют скринридерами и axe/Lighthouse. Ориентир — WCAG (POUR).