SVG (Scalable Vector Graphics) – это векторный формат изображений, который используется в современных веб-проектах для создания масштабируемой, чёткой и лёгкой графики. За последние десять лет SVG значительно вырос в популярности благодаря преимуществам, которые он предлагает в сравнении с растровыми изображениями. Вместе с этим появилось множество инструментов и методик для оптимизации SVG и обеспечения доступности, что особенно важно для веб-платформ, стремящихся к максимальной продуктивности и удобству использования для всех категорий пользователей. Оптимизация SVG – процесс, направленный на уменьшение веса файлов без потери качества визуального восприятия. Это особенно актуально, когда речь идёт о веб-сайтах, так как меньший размер файлов влияет на скорость загрузки страниц и сокращает расход трафика.
Одним из наиболее популярных инструментов для оптимизации SVG является SVGO, который активно развивается и недавно представил новую версию с улучшенной логикой оптимизации. Благодаря обновлениям SVGO теперь по умолчанию сохраняет важные атрибуты, такие как viewBox и title. Это важное улучшение, поскольку эти элементы отвечают за масштабируемость изображения и его доступность для экранных читалок. Ранее в SVGO необходимо было вручную отключать функции удаления viewBox и title, чтобы сохранить корректное отображение и правильное восприятие SVG элементами доступности. Сейчас же новая версия избавляет от необходимости создавать дополнительные конфигурационные файлы, что облегчает работу разработчиков.
Кроме того, использование SVGO в командной строке позволяет автоматизировать оптимизацию сразу нескольких файлов, что ускоряет процессы разработки и деплоя сайтов. Важным аспектом является выбор между инструментами командной строки и графическими интерфейсами. Например, веб-приложение SVGOMG предоставляет возможность оптимизировать файлы через удобный интерфейс, ориентированный на пользователей, предпочитающих визуальные решения. Однако стоит отметить, что SVGOMG пока использует более старую версию SVGO. Впрочем, для многих проектов это не критично, если не требуется использование последних нововведений интерфейса.
Некоторые разработчики начали экспериментировать с современными средами выполнения, такими как Bun, заменяющими Node.js для запуска SVGO с дополнительными параметрами форматирования. Предпочтение таких технологий может привести к более быстрой загрузке скриптов и упрощению работы с исходным кодом благодаря улучшенному форматированию SVG после оптимизации. Удобочитаемый и аккуратно структурированный SVG-код упрощает его дальнейшую поддержку и внедрение анимаций. Когда речь заходит о внедрении SVG непосредственно в HTML, важно понимать особенности, влияющие на доступность контента.
Встраивание SVG позволяет не только создавать интерактивные и стилизуемые изображения, но и хранить важную информацию для пользователей вспомогательных технологий, например, экранных читалок. При этом не требуется исполнять XML-пролог и лишние атрибуты пространства имён, но обязательно следует сохранять ключевые атрибуты viewBox, width и height. viewBox задаёт масштабирование и обеспечивает гибкость отображения, а width и height помогают браузерам корректно вычислить соотношение сторон и предотвратить визуальные артефакты при загрузке. Отсутствие альтернативного атрибута alt в SVG ставит задачу обеспечить доступность другими средствами. Наиболее распространённый способ – использование тега title внутри SVG.
Контент этого тега будет восприниматься экранными читалками как текстовое описание изображения. При этом важно не путать HTML-атрибут title, который чаще всего игнорируется в контексте SVG, и внутрифайловый тег title, который признаётся assistive-технологиями. Ещё один способ передать описание SVG – использование aria-label с соответствующим текстом. Это позволяет чётко и лаконично обозначить назначение изображения для тех, кто пользуется вспомогательными устройствами. Вариант с aria-labelledby ссылается на идентификатор тега title, что иногда может восприниматься как избыточное решение.
Излишнее использование ARIA-трейтов без необходимости часто приводит к конфликтам и неправильному чтению, поэтому стоит придерживаться принципа минимализма и добавлять только необходимые атрибуты. Особое внимание следует уделять случаям, когда SVG содержит видимый текст. Без наличия role="img" в таких ситуациях экранные читалки могут дублировать текст несколько раз, что ухудшает пользовательский опыт. Установка роли img указывает на то, что SVG следует воспринимать как изображение, а не контейнер со структурой, благодаря чему экранные читалки пропускают содержимое внутренних элементов, избегая повторного проговаривания. Для декоративной графики, такой как иконки, которая не несёт смысловой нагрузки, рекомендуется использовать aria-hidden="true".
Это полностью исключит SVG из дерева доступности, не отвлекая пользователей вспомогательных технологий лишними элементами. Использование aria-hidden избавляет от необходимости добавлять описание или иные элементы, иконки становятся невидимыми для экранных читалок, что соответствует принципу создания сопоставимого пользовательского опыта. Позиционирование видимых ярлыков рядом с иконками играет важную роль для обеспечения понятности контента. Иконки без текста создают преграду для понимания у пользователей с ограниченными возможностями, а также для тех, кто смотрит на страницу впервые. Поисковые системы также ценят комбинацию изображений с соответствующим текстом и учитывают это как фактор качества сайта.
Основное правило – создавать совместимый опыт для всех пользователей, а не ставить препятствия на пути восприятия информации. Использование role="presentation" в SVG-инструкциях обычно запрещает интерпретацию графики как изображения, но при этом вложенные в SVG фокусируемые элементы, например, текст, сохраняют доступность отдельно. Важно понять, что role="presentation" нивелирует важные семантические свойства у контейнера, а не у каждого внутреннего объекта по отдельности, что может привести к непредвиденным эффектам в работе вспомогательных технологий. Создание доступных и оптимизированных SVG требует сочетания профессионализма, понимания нужд пользователей и тщательного тестирования. Разработчики должны уделять внимание типам контента и целевой аудитории, учитывая, что базовая задача доступности – обеспечить сопоставимый опыт использования для людей с разными возможностями, а не улучшение для одних в ущерб другим.
