Мария разрабатывала онлайн-курсы три года и никогда не включала экранный диктор. Ей казалось, что если код валидный и семантичный, то всё будет работать. Однажды она решила проверить.
Включила NVDA, закрыла глаза и попыталась записаться на курс. Через пять минут сдалась. Диктор зачитывал кнопка, кнопка, кнопка без объяснения, что эти кнопки делают. Изображения курсов описывались как image.png. Формы регистрации были просто набором полей без связи с подписями.
Первые проблемы
Мария составила список. У всех кнопок с иконками отсутствовал aria-label. Декоративные изображения не были помечены как декоративные, и диктор старательно озвучивал названия файлов. Поля ввода не были связаны с label через атрибут for.
Она начала исправлять по приоритету. Сначала добавила осмысленные aria-label для всех кнопок действий. Вместо просто кнопка диктор стал говорить Записаться на курс Python для начинающих.
Неожиданные находки
Самым странным оказалось меню навигации. Мария использовала список ul-li, что правильно, но забыла обернуть его в nav. Диктор не мог определить, что это навигация, и просто перечислял элементы списка.
Ещё она обнаружила, что видеоплеер вообще не имел доступных элементов управления. Пользователи screen reader физически не могли поставить на паузу или перемотать видео.
Исправление заняло две недели. Мария теперь тестирует каждую новую функцию с NVDA до отправки в продакшн. И рекомендует всем коллегам сделать то же самое хотя бы раз.