Alt-текст для спортивной графики: как описать смысл, а не каждый пиксель
Макет турнирной таблицы без alt-текста — пустой прямоугольник для скринридера. С одной стороны, визуально видно плотность данных и иерархию. С другой стороны, программа озвучивает только имя файла. Задача alt-текста — передать вывод, а не перечислять пиксели.
Сначала назовите вывод
Спортивная инфографика почти всегда несёт один главный сигнал. Это лидер турнира, тренд формы, разрыв в счёте. Alt-текст начинается с этого сигнала.
Плохой вариант: «График с синими столбцами и красной линией». Хороший вариант: «Динамика голов Зенита за 10 туров: рост с 1.2 до 2.4 за матч». Разница в информационной ёмкости.
W3C WAI в дереве решений для alt-текста указывает: если изображение передаёт информацию, текст должен заменять эту информацию. Не описывать форму — передать содержание.
Сравним два подхода к одной карточке. Первый описывает визуал: «Белый прямоугольник с логотипом и цифрами 2:1». Второй передаёт смысл: «Спартак победил Локомотив 2:1, голы забили в первом тайме». Второй вариант делает карточку доступной.
Потом — ключевые значения
После вывода читатель (или скринридер) получает опорные точки. Это конкретные цифры, имена, даты. Без них вывод повисает в воздухе.
Принцип прост: одно изображение — один фокус. Если график показывает xG двух команд, alt-текст называет обе величины. Не нужно перечислять все точки на кривой.
Рассмотрим столбчатую диаграмму результативности. Вывод: «ЦСКА забивает больше всех дома». Значения: «2.8 голов за матч при среднем 1.6 в лиге». Этого достаточно для понимания.
Альтернативное объяснение: может, стоит перечислить все 16 столбцов? Нет. W3C WAI для сложных изображений рекомендует выносить детали в соседний текст или таблицу. Alt остаётся кратким.
Детали уходят в соседний текст или таблицу
Тепловая карта попаданий по воротам содержит десятки зон. Описать каждую в alt — создать стену текста. Это нарушает принцип доступности вместо того, чтобы его обеспечить.
Решение: alt-текст даёт обзор, а детали — в data table или в параграфе после изображения. «Тепловая карта ударов: концентрация в левой девятке, 12 попаданий из 18». Полная таблица — ниже.
С одной стороны, такой подход требует дополнительной разметки. С другой стороны, он даёт пользователю выбор: быстро получить суть или углубиться в цифры.
Связь между графиком и текстом должна быть явной. Атрибут aria-describedby указывает на элемент с деталями. Скринридер сначала озвучит alt, потом предложит перейти к описанию.
Декоративное не получает аналитический alt
Фоновый паттерн из мячей, стилизованные линии поля, абстрактная геометрия в шапке — это декор. W3C WAI прямо указывает: декоративным изображениям нужен пустой alt (alt="").
Ошибка: писать «Декоративные элементы в виде футбольного мяча». Скринридер озвучит это, но пользы ноль. Пустой alt говорит программе: пропусти, это не контент.
Граница между декором и данными не всегда очевидна. Без исходного макета нельзя оценить функцию элемента. Если иконка мяча рядом со счётом — это маркер, а не декор. Тогда alt нужен.
Проверка: уберите элемент. Если смысл остался прежним — это декор. Если потерялась информация — это данные. Простое правило, но оно работает.
Какие данные нужно передать словами?
Спортивная графика оперирует типовым набором значений. Счёт, статистика, позиция в таблице, время события. Именно они составляют ядро alt-текста.
Счёт — всегда приоритет. Если счёт должен читаться за секунду: анатомия хорошей live-score карточки визуально, то в alt он должен звучать первым. «Ливерпуль 3 — 0 Манчестер Юнайтед, 78-я минута».
Статистические графики требуют другого подхода. Когда мы делаем статистику без стены цифр, alt-текст восстанавливает ключевые числа. Названия метрик и их значения — минимум.
Таблицы и сетки турнирной таблицы часто дублируются изображением. В таком случае alt может ссылаться на доступную data table: «Турнирная таблица РПЛ после 15 тура, подробности в таблице ниже».
Контекст определяет глубину описания. На странице матча достаточно счёта и авторов голов. В аналитическом материале — трендов и сравнений. Один и тот же график получает разный alt в разных контекстах.
Цвет как канал информации требует отдельного внимания. Если график использует цвет для различения команд, alt-текст должен называть команды словами, а не цветами. Подробнее об этом — в материале о теме «спортивная инфографика, которую можно прочитать без цвета».
Динамические элементы — live-графики, обновляемые карточки — создают дополнительную сложность. Alt-текст должен отражать текущее состояние, а не начальное. Обновление данных требует обновления alt. Это техническое ограничение, но оно решаемо через ARIA live-регионы.
На малом экране эффект меняется: графика может обрезаться или перестраиваться. Alt-текст привязан к изображению, а не к верстке. Поэтому он должен быть самодостаточным независимо от размера экрана.
Контраст и читаемость визуальной части влияют на решение о длине alt. Если контраст на скорости достаточен для зрячих пользователей, это не отменяет потребности в текстовом дублировании для скринридеров. Две разные задачи — два разных решения.
Три правила для макета
Первое: alt-текст начинается с вывода, а не с описания формы. Если график показывает тренд — назовите направление и масштаб.
Второе: детали выносятся за пределы alt. Сложная визуализация получает краткий обзор в атрибуте и полную расшифровку в соседнем тексте или таблице.
Третье: декор получает пустой alt. Если элемент можно убрать без потери смысла — он не нужен скринридеру.
Визуальный критерий проверки: закройте изображение рукой и прочитайте alt-текст вслух. Если вы поняли, что показывал график, не видя его — текст работает. Если остались вопросы — вернитесь к макету и найдите пропущенный сигнал.
Проверка компонента в системе
В интерфейсе из материала «Alt-текст для спортивной графики: как описать смысл, а не каждый пиксель» элементы «Детали уходят в соседний текст или таблицу» и «Декоративное не получает аналитический alt» конкурируют за одно и то же внимание. Если оба получают одинаковый визуальный вес, пользователь медленнее считывает главный спортивный сигнал. Поэтому сначала определяется приоритет данных, затем размер, контраст и положение компонента, а декоративные признаки подстраиваются под эту иерархию. Вопрос «Какие данные нужно передать словами?» здесь решается через скорость чтения и устойчивость макета на самом тесном экране.
Раздел «Декоративное не получает аналитический alt» полезно сопоставить с «Какие данные нужно передать словами?» именно как две части одной дизайн-системы. Для темы «Alt-текст для спортивной графики: как описать смысл, а не каждый пиксель» хороший результат означает, что изменение одного компонента не разрушает соседний: длинное имя не выталкивает счёт, новый статус не маскирует время, а фирменный цвет не становится единственным носителем смысла. Такая проверка сильнее красивого desktop-макета, потому что показывает поведение компонента при реальных ограничениях.
Когда «Alt-текст для спортивной графики: как описать смысл, а не каждый пиксель» переносится между широким экраном и телефоном, «Какие данные нужно передать словами?» нельзя просто уменьшить вместе с «Сначала назовите вывод». У компонентов разные задачи и разные минимальные размеры для чтения. Один может уйти во второй уровень, другой должен остаться видимым постоянно. Поэтому ответ на «Какие данные нужно передать словами?» начинается с определения обязательного сигнала, после чего второстепенные подписи, иконки и декоративные элементы сокращаются без потери смысла.
Для спортивной графики пара «Сначала назовите вывод» и «Потом — ключевые значения» задаёт полезный стресс-тест. В статье «Alt-текст для спортивной графики: как описать смысл, а не каждый пиксель» макет должен сохранять смысл при длинных фамилиях, локализации, увеличенном шрифте, отсутствии цвета и узкой ширине. Если компонент работает только в идеальном примере, это демонстрация, а не система. Вопрос «Когда длинное описание лучше вынести из alt?» поэтому связан не с украшением, а с тем, какую информацию пользователь сможет распознать первой и без дополнительного объяснения.
В интерфейсе из материала «Alt-текст для спортивной графики: как описать смысл, а не каждый пиксель» элементы «Потом — ключевые значения» и «Детали уходят в соседний текст или таблицу» конкурируют за одно и то же внимание.