Альтернативы изображениям в учебной статье

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

Продолжим статью a11y-lab/lesson.html. В разделе о Descendants уже есть выражение выбора потомков и короткий ожидаемый результат. Добавим схему XML и разберём, что необходимо сохранить в тексте. Затем рассмотрим декоративный значок и скриншот вывода. Эти изображения требуют разных решений, хотя все могут быть представлены элементом img.

Что именно объясняет схема

В нашем учебном документе корневой элемент Employees содержит два дочерних элемента Employee. У первого значение FirstName равно Alex, у второго — Elena. Иллюстрация дерева показывает отношения между узлами. Её полезная информация — структура и значения, а не цвет прямоугольников или количество пикселей между ними.

Если написать alt="XML", получится слишком общее название. Если перечислить все видимые линии, описание будет длинным и не объяснит назначение. Для схемы удобнее коротко назвать содержание, а подробную структуру дать обычным текстом рядом. Этот подход позволяет обращаться к объяснению по частям, а не прослушивать большой атрибут как единую строку.

Вставьте следующий фрагмент после первого пояснения в разделе descendants. Файл images/employees-tree.svg здесь обозначает учебную схему; её исходник входит в папку примера курса, а не является снимком рабочего сайта.

<figure>
  <img src="images/employees-tree.svg"
       width="640" height="260"
       alt="Дерево Employees с двумя сотрудниками; структура описана ниже.">
  <figcaption>
    Корневой элемент Employees содержит два элемента Employee.
    В первом FirstName имеет значение Alex, во втором — Elena.
    Метод Descendants("Employee") выбирает оба элемента Employee.
  </figcaption>
</figure>

Короткая альтернатива сообщает, что показано и где найти объяснение. Подпись сохраняет существенные отношения и связывает их с методом. Цвет схемы не становится единственным носителем смысла. width и height задают исходные пропорции изображения; они не определяют содержательность описания и не заменяют alt.

Если позднее схема усложнится, рядом можно добавить список ветвей или отдельный раздел с подробным описанием. Прежде чем писать длинный атрибут, спросите: нужен ли читателю поиск по частям этого описания? Для сложных изображений WAI рассматривает сочетание краткой идентификации и подробного текстового представления. Разбор сложных изображений.

Подпись и альтернатива решают разные задачи

figcaption связывает видимую подпись с иллюстрацией. Он может объяснять, почему изображение присутствует в уроке, или назвать результат. Атрибут alt относится непосредственно к изображению. Подпись не означает, что любую картинку можно оставить без alt; нужно оценить, передаёт ли окружающий текст её существенный смысл и как устроено чтение.

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

Пустой атрибут и отсутствующий атрибут — разные состояния. alt="" явно обозначает отсутствие дополнительной текстовой информации от картинки в этом контексте. Отсутствие alt не сообщает такого намерения и может приводить к чтению других сведений, например имени файла. Поэтому редактор должен принимать решение осознанно, а не оставлять атрибут пустым по умолчанию для всей библиотеки.

Не нужно начинать каждую альтернативу со слова «изображение». Важнее назначение: «Дерево Employees», «Выбран пункт…», «Результат отбора…». Если тип представления существенен, его можно назвать. Для диаграммы и фотографии он иногда помогает понять контекст; для кнопки, изображённой значком, полезнее объяснить действие, а не геометрию значка.

Декоративный значок внутри ссылки

Добавим учебную ссылку на каталог прежних материалов. Её видимый текст уже полностью объясняет назначение. Стрелка рядом только поддерживает оформление:

<a href="/catalog/legacy/">
  Прежние уроки
  <img src="images/arrow.svg" width="20" height="20" alt="">
</a>

При таком устройстве имя ссылки берётся из слов «Прежние уроки». Дополнительное «стрелка вправо» не улучшило бы выбор назначения. Теперь изменим условие: уберём текст и оставим только картинку. Ссылка потеряет очевидное название, и пустой alt уже не подходит. Нужно вернуть видимую подпись либо дать изображению содержательное описание назначения.

Именно контекст отличает декоративный значок от функционального. Один и тот же SVG в одном месте может дополнять текст, а в другом быть единственным содержимым кнопки. Нельзя составить глобальный список файлов «всегда декоративные» без знания использования. Для принятия решения полезно дерево выбора WAI для alt.

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

Вывод программы должен оставаться содержанием

Для объяснения метода важен результат. Скриншот консоли показывает его визуально, но строки можно представить обычным текстом. В нашем стенде не требуется имитировать настоящий запуск C#: ниже приведён ожидаемый вывод отбора имён для учебных данных, а не измерение рабочего ProfessorWeb.

<p>Если из выбранных сотрудников вывести FirstName, ожидаются две строки:</p>
<pre><code>Alex
Elena</code></pre>
<p>После условия FirstName == "Elena" остаётся одна строка: Elena.</p>

Такое представление можно читать, выделять и сопоставлять с условием. Изображение вывода при необходимости остаётся дополнительной иллюстрацией. Не следует заменять весь разбор огромным alt, содержащим код, результат и пояснения: тогда читатель лишится обычной структуры материала и возможности возвращаться к отдельному месту.

Для скриншота интерфейса задача другая. Полезно назвать действие и путь к команде, а не перечислять всё окно. Если урок требует нажать определённый пункт, его название должно присутствовать текстом. Обновление интерфейса может сделать снимок историческим; соответствие снимка и инструкции проверяется отдельно. Не выдумывайте расположение команды по старой картинке.

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