Джейк проводил аудит доступности и решил проверить атрибуты alt у изображений. Первое, что он увидел: alt равен image или просто пустая строка там, где должно быть описание. На платформе было больше 500 изображений курсов, иллюстраций к урокам и инфографики.
Он понял масштаб работы, когда открыл страницу курса по веб-разработке. Скриншот кода имел alt равен screenshot.png. Диаграмма архитектуры — diagram.jpg. Фотография преподавателя — IMG_0234.jpg. Пользователи screen reader получали абсолютно бесполезную информацию.
Систематизация подхода
Джейк создал гайдлайн для команды. Декоративные изображения должны иметь пустой alt, но это должно быть осознанное решение. Информативные изображения требуют конкретного описания контекста.
Для скриншотов кода он стал добавлять краткое описание того, что показано: Пример функции React компонента с использованием useState. Для диаграмм — суть информации: Схема взаимодействия клиента и сервера через REST API.
Особенно сложные случаи
Самыми трудными оказались комплексные инфографики. Джейк не мог просто написать Инфографика о JavaScript. Нужно было передать смысл: Статистика популярности JavaScript фреймворков в 2024 году, React лидирует с 40%.
Он потратил месяц на обновление всех изображений. Создал шаблоны для типичных случаев и обучил команду контента. Теперь каждое новое изображение проходит проверку на наличие осмысленного alt перед публикацией.
Джейк получил благодарность от студента, который использует screen reader и впервые смог полноценно изучать визуальные материалы курсов.