Кейсы
Работа с клиентом

Кнопка со стрелкой на сайте тренера: назовите действие, а не картинку

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

Глеб убрал слова «Скачать план»

В вымышленном примере тренер Глеб делает страницу компактнее. Он заменяет текстовую ссылку на PDF тренировочного плана иконкой и заполняет описание картинки словами «стрелка вниз». Клиент спрашивает, где получить файл: озвученная стрелка ничего не говорит о скачивании.
Глеб возвращает смысл действия: «Скачать тренировочный план, PDF». Перед этим сверяет, что элемент действительно ведёт к нужному документу, а не прокручивает страницу. Если ссылка открывает список планов, название должно говорить о выборе плана, не обещать немедленное скачивание.

Назначение изображения определяет текст

В руководстве W3C WAI о функциональных изображениях текстовая альтернатива такой картинки передаёт действие или цель ссылки. Для значка принтера это печать страницы, а не описание принтера; для кнопки поиска — поиск, а не увеличительное стекло.
Когда изображение является единственным содержимым ссылки, его альтернатива должна давать понятное назначение. Но если внутри той же ссылки уже есть слова, полностью объясняющие переход, дублирующее описание картинки может создать повтор. W3C показывает для такого случая пустой alt у изображения рядом с текстом ссылки.
Для страницы Глеба это означает два разных оформления. У одной иконки скачивания нужно доступное название действия. У ссылки с видимым текстом «Скачать тренировочный план, PDF» декоративная стрелка не должна ещё раз произносить ту же фразу. Пустое описание одной картинки не означает, что вся ссылка может остаться без имени.

Проверяйте кнопку, а не только поле описания

Глеб просит разработчика показать, какое имя фактически получает интерактивный элемент в разметке. Одно поле с подписью в редакторе ещё не подтверждает, что программа экранного доступа озвучит назначение кнопки. Для разных способов вставки иконки реализация может отличаться.
На тестовой странице Глеб проверяет переход к элементу с клавиатуры, его название и открывающийся документ. В проверке используется учебный PDF без данных клиентов. Если название обещает план на неделю, а открывается общий каталог, исправляют обещание или адрес ссылки, а не добавляют ещё больше слов в описание стрелки.

Иконка записи и иконка скачивания не взаимозаменяемы

Надпись «Записаться» у кнопки, которая лишь открывает форму выбора времени, может скрывать следующий шаг. Глеб уточняет назначение: «Открыть форму записи на тренировку». Для скачивания плана сохраняет другое имя. Так клиент понимает, куда попадёт, до активации элемента.
Название не должно содержать рекламный список вроде «лучший фитнес-тренер, похудение, персональные занятия»: эти слова не объясняют действие кнопки. Меняется цель перехода — повторно проверяют и доступное имя, и видимый текст.
Фото упражнения выполняет другую задачу: оно передаёт положение тела или инвентаря, а не запускает скачивание. Для него используется подход из статьи об alt-тексте фотографии упражнения. Нельзя автоматически переносить описание кадра на кнопку со стрелкой.
После этой проверки Глеб может утверждать только, что конкретный переход к PDF имеет понятное название и соответствует ему. Проверку клавиатурной навигации, формы записи и остальных элементов сайта это не заменяет.