Как сделать страницу доступной

Короткий ответ

Большую часть доступности дают правильные теги. Сравните: у картинки есть alt, у поля — подпись, кнопка — это <button>:

<img src="/media/photo-200x200.jpg" alt="A pink rose in bloom" width="100">
<label>Email <input type="email"></label>
<button>Subscribe</button>

Такую страницу можно пройти клавишей Tab, а программа чтения с экрана объяснит, что на ней есть.

Короткий список проверки

• Картинки: alt описывает смысл; у декоративных — пустой alt="".
• Формы: у каждого поля есть <label>, ошибки описаны текстом, а не только красным цветом.
• Клавиатура: всё нажимается с Tab и Enter, фокус виден (:focus-visible).
• Заголовки: один <h1>, дальше <h2>, <h3> по порядку, без пропусков ради размера шрифта.
• Контраст: текст хорошо читается на фоне, серый на сером — нет.
• Язык: у <html> указан lang.

Подпись для кнопки-иконки

Если у элемента нет видимого текста, его подписывают атрибутом aria-label:

<button aria-label="Close">✕</button>

Как проверить

Пройдите страницу одной клавиатурой, без мыши. Затем увеличьте масштаб до 200% — ничего не должно налезать и пропадать. Встроенная в браузер проверка Lighthouse (F12) найдёт часть оставшихся проблем.

Частая ошибка

Вместо кнопок и ссылок используют <div> с обработчиком щелчка, а потом пытаются исправить это атрибутами ARIA. Правило простое: если есть подходящий тег HTML, берите его — <button>, <a>, <input> уже умеют работать с клавиатурой и скринридером.