Как писать понятные инструкции со скриншотами

Выбирайте alt-текст по тому, что изображение добавляет к окружающей инструкции.

Подготовка материалов2 мин чтения

Возьмите одну инструкцию со скриншотом на своей странице. Скройте изображение и попробуйте выполнить её. Если остаётся только «используйте настройки, показанные ниже», читатель не сможет закончить задачу, не рассматривая пиксели.

Перенесите необходимые настройки и действие в текст страницы, затем выберите alt-текст для того, что добавляет снимок. Рекомендации W3C по изображениям текста объясняют пользу настоящего текста: он масштабируется и подстраивается под предпочтения чтения без увеличения пикселей скриншота.

Замените «как показано» конкретной инструкцией

В учебном примере экспорта замените «Используйте настройки, показанные ниже» на «Выберите PNG, задайте размер экспорта 1200 × 1200 пикселей и нажмите Export». Эти размеры относятся к примеру; для своей задачи используйте реальные значения. Оставьте скриншот, чтобы показать расположение элементов управления.

Без скриншота расплывчатая инструкция теряет настройки, а указания PNG, 1200 на 1200 и Export остаются выполнимыми.

В сообщении об ошибке замените «Проблема очевидна на скриншоте» на «При узком окне подпись перекрывает цену товара». Укажите ширину окна или другое условие, нужное для воспроизведения. Снимок может подтверждать наблюдение, не оставаясь единственным объяснением.

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

Дайте alt-тексту конкретную задачу

Примените дерево решений W3C для alt-текста к изображению в реальном контексте страницы:

  • Если оно добавляет значимую визуальную информацию, кратко опишите её. «Панель экспорта с настройками размера под выбором PNG» помогает найти элементы, описанные в инструкции.
  • Если оно полностью повторяет соседний текст или служит украшением, пустая альтернатива alt="" убирает повтор. Убедитесь, что внутри изображения не осталось уникального указания.
  • Если оно — единственное содержимое ссылки или кнопки, опишите назначение ссылки или действие.
  • Если оно содержит сложное сравнение, дайте короткую альтернативу и объясните значимые различия видимым текстом. Рекомендации W3C по сложным изображениям разбирают это разделение.

Альтернативы «Панель экспорта с выбранным PNG» недостаточно, если только изображение сообщает необходимые размеры.

Перед публикацией снова скройте изображения и выполните инструкцию только по тексту. Верните их и проверьте, не упустили ли полезные детали. Готовая страница должна сообщать действие, обязательные значения и ожидаемый результат, не заставляя читателя расшифровывать скриншот.

Все статьи