Доступность

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

Зачем это знать

Тут три довода, и первый — самый скучный. Незрячих и слабовидящих людей в стране миллионы, и сайт, по которому нельзя пройти клавиатурой, для них просто не существует.

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

Третий: поисковик — тоже слепой посетитель. Он видит ровно то, что видит программа чтения экрана. Поэтому работа над доступностью почти всегда улучшает и позиции в поиске.

Пять правил, которые закрывают почти всё

Когда нужны aria-атрибуты

Атрибуты, начинающиеся на aria-, сообщают программе чтения экрана то, чего не видно из разметки: открыта ли панель (aria-expanded), чем управляет кнопка (aria-controls), какая страница текущая (aria-current), как называется значок без текста (aria-label).

Главное правило про них звучит неожиданно: лучший aria-атрибут — тот, который не понадобился. Если задачу решает обычный тег, берите тег. Неправильно поставленный role хуже, чем его отсутствие: он заставляет программу объявлять элемент не тем, чем он является.

Скип-ссылка и порядок содержимого

В шапке сайта обычно десяток ссылок. Человеку, который ходит клавиатурой, приходится проходить их все на каждой странице, прежде чем добраться до текста. Поэтому первым элементом страницы ставят скип-ссылку «Перейти к содержанию»: обычно она не видна, а при получении фокуса появляется и одним нажатием переносит к основному тексту.

Из того же соображения важен порядок элементов в коде. Программа чтения экрана и клавиатура идут по разметке сверху вниз, а не по тому, как блоки расставлены стилями. Если оглавление визуально справа от статьи, но в коде стоит перед ней, — так и будет прочитано первым. Это не ошибка, но решение осознанное: колонки расставляются через сетку, а порядок в коде выбирается по смыслу чтения.

Три проверки, которые делаются руками

• Пройти страницу по Tab. Порядок должен совпадать с порядком чтения, фокус — быть видимым, и он не должен проваливаться в то, что сейчас скрыто.
• Увеличить страницу до 200 %. Текст не должен обрезаться, а страница — уезжать вбок.
• Отключить картинки. Смысл должен остаться понятным по подписям.

Что проверяет программа

Есть автоматические проверки — например, axe-core: она открывает страницу и ищет нарушения по списку правил. Контраст, подписи, пропущенные уровни заголовков, поля без подписи находятся так за секунду.

Но автоматика ловит примерно треть проблем. Она не скажет, что подпись бессмысленна, что порядок обхода перепутан или что ссылка «подробнее» ни о чём не говорит. Поэтому проверок всегда две: программа и руки.

Что просить у нейросети