Использование SVG. Внедрение SVG в HTML

Для иконок-ссылок с текстом надо использовать aria-label в ссылке, добавляя альтернативный текст с описанием.

С aria-label в теге a скринридер не читает текст внутри ссылки, поэтому мы добавили aria-label="See Picked Pens" в a .

CodePen

Пример №5: иконка-ссылка с динамическим текстом

Итак, предположим в ссылке у нас динамическое значение текст + иконка. В таком случае мы не должны использовать aria-label в ссылке, так как значение динамического текста будет утрачено. В таком случае мы можем использовать тег span и текст, спрятанный за экраном. Числовым значением в id="itemsInCart" тега span является динамически добавляемый элемент.

• добавьте дополнительный span с остальным альтернативным текстом (типа “предметов в вашей корзине”);
• добавьте этому span класс class="offscreen-text" , чтобы визуально прятать его;
• добавьте aria-hidden="true" в svg .

Все образцы иконок:

Сложные изображения: доступные графики

Замечательно, что мы можем использовать SVG вместо PNG и JPG, особенно при отображении сложного контента типа графиков. Было бы чрезмерным передавать всю информацию с графика в атрибуте alt , поэтому задание альтернативного текста в изображении будет непростым. Но, используя SVG, мы можем сделать весь текст доступным непосредственно.

1. Настройка файла

Порядок слоев - в Adobe Illustrator слои SVg экспортируются снизу вверх. Это важно, потому что мы хотим настроить слои так, чтобы они могли логично переключаться с клавиатуры в ходе чтения. Группа “Jaws” должна быть в коде сначала, поэтому в иллюстраторе слой “Jaws” находится в самом низу.

Именование слоев - это хорошая практика, тем более что названия слоев будут добавляться как id при экспорте SVG. Не волнуйтесь насчет одинаковых имен, в таком случае, к id будет добавляться число.

Группирование слоев - важно обратить внимание на то, как сгруппированы элементы. Текстовая метка + ключ элемента вместе со столбиком графика объединяются в одну группу для каждого варианта графика (Jaws, NVDA и т.д.). Это сделано для понимания прочитанного при использовании скринридеров. В некоторых браузерах пользователь может нажать на столбик и соответствующий текст будет зачитан и/или выделен.

Сохранение/экспорт - для гарантии я держу две версии своего SVG, одну для редактирования в Illustrator, а вторую для редактирования кода. Версию для работы в Illustrator я сохраняю через меню “сохранить как”, а более чистую версию для веба через “файл → экспорт → svg”.

Оптимизация - это последнее, что нужно сделать перед ручным редактированием SVG. Инструмент от Джейка Арчибальда SVGOMG отлично справляется с этим. Добавьте SVG, затем переключитесь в режим просмотра “CODE”, чтобы увидеть именно то, что переключает каждая функция. Не забудьте про опцию “prettify”, ведь мы еще будем редактировать код вручную и он должен быть читаемым.

Лучше всего воздержаться от ручного редактирования SVG (добавления доступности) до полной уверенности в его готовности. Потому как после начала ручного редактирования, работа с SVG в редакторе (Inkscape/Illustrator/и т.д.) может случайно изменить что-либо из добавленного вручную.

Контроль за исходниками - если вы используете контроль версий на основе git (git, SourceTree и т.д.), добавляйте SVG в коммит. Управление файлом в одной из систем версий поможет решить проблемы с неудачными изменениями в нем, особенно если он был открыт и сохранен в редакторе после ручного исправления, так как Illustrator не понимает любой код для доступности (aria-*) и удаляет его.

2. Добавление доступности к SVG

SVG делается проходимым во всех браузерах после добавления role="group" в

Название и описание - так как у нас есть текстовые элементы в SVG, работающие как название и описание, мы привяжем их к элементу

Очистка разметки SVG - удалите все странности, создаваемые Illustrator. Например, к нашему элементу добавлено несколько . Скрин ридер может зачитать отдельные буквы вместо слова целиком (“J” “a” “w” “s” “- 44%” вместо “Jaws - 44%”). Поэтому надо удалить необязательные , оборачивающие отдельные буквы.

Плохой пример:

J a w s - 44%

Исправленный пример

Jaws - 44%

Небольшое замечание по скрытию элементов (прямоугольников, кругов) от вспомогательных технологий в SVG. Единственный способ для этого - добавить им role="presentation" . Таким образом вы отключаете нативную семантику для accessibility API. Если вам надо спрятать много элементов, то, к сожалению, вы не можете просто обернуть их тегом и добавить role="presentation" . Хорошая новость состоит в том, что новая спецификация SVG Accessibility решает большую часть этих проблем. Элементы, такие как формы без альтернативного текста, будут рассматриваться так, как если бы у них была роль none или presentation .

Скрытие форм/линий - все элементы с геометрическими формами прячутся путем добавления role="presentation" .

Скрытие текстовых элементов - мешающие текстовые элементы надо спрятать от скринридера (на рисунке выше они подсвечены желтым цветом, это процентные значения у вертикальной оси, линия горизонтальной оси и столбцы в графике) путем добавления role="presentation" и aria-hidden="true" .

Демо-видео использования скринридеров:

Интерактивные изображения

Еще лучше, в сравнении с диаграммами и графиками, обстоят дела с доступностью интерактивных изображений. Рассмотрим простую хронологическую инфографику. Она разбивается на верхнюю часть с заголовком и раздел хронологии, который в свою очередь разбивается на сегменты, каждый из которых содержит заголовок, изображение и описание.

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

1. Настройка файла

Все то же самое, что и в секции предыдущего раздела. Но после описания оптимизации для веба можете смело пропускать все об анимации CSS и переходить непосредственно к доступности.

2. Доступность

Стили удалены из следующих примеров для упрощения кода, но они, разумеется, есть в работающем демо.

Проходимость для скринридеров - чтобы SVG был проходимым во всех браузерах, добавьте к SVG role="group" /

Название и описание - в нашем примере мы можем использовать текст в верхней части SVG () в качестве названия и ссылаясь на него с помощью aria-labelledby в

Затем добавим id к и привяжем его к

An Interactive Timeline

Добавление семантических ролей - добавьте семантические роли к группам, содержащим хронологию и ее отдельные сегменты. Вот группа с полным списком: .

Добавьте метку к списку: .

Отдельные временные сегменты будут элементами списка: .

Взаимодействие/доступность с клавиатуры - сразу после каждого элемента с role="listitem" добавьте так, чтобы он охватывал все содержимое группы. На данный момент это единственный способ добавить интерактивность к SVG.

Добавьте туда же tabindex="0" , чтобы обеспечить фокусируемость во всех браузерах.

Исправление семантики ссылок - обратите внимание, что ссылки указывают сами на себя. Это не семантичные ссылки, так как они не ведут к чему-либо и могут смутить пользователей скринридеров. Поэтому добавим role="img" , чтобы обозначить, что это изображение, а не ссылка.

Доступность текста внутри временных сегментов - добавление роли изображения прекращает проход элементов вспомогательными технологиями, поэтому нам надо добавить aria-labelledby с идентификаторами текстовых элементов в том порядке, в котором они читаются.

Добавление скрытого описания для изображений - используйте с классом для скрытия элемента так, что визуально он скрыт, но остается в DOM.

A gray kitten tangled in a ball of yarn.

Добавление идентификатора к атрибуту aria-labelledby в xlink так, чтобы он стал читаемым.

Добавление стилей для фокуса - настройка стилей для фокуса необходима пользователям, осуществляющим навигацию в браузере с помощью клавиатуры. Мне нравятся эти стили, поэтому я добавила их и для наведенного состояния.

A:focus , a:hover { stroke: black; stroke-width: 5; paint-order: stroke; }

Добавление JavaScript для фокуса окна - в SVG при навигации по ссылкам окно не всегда сдвигается так, чтобы элемент оказался в области видимости. Причина этого в том, что некоторые браузеры (баг-репорт добавлен

Хорошая новость: у нас есть специальные медиа-запросы для решения этой проблемы.

Вот пример исправлений для раздела с иконками в этой статье:

@media screen and (-ms-high-contrast: active) { .icon svg { /* select a color that will contrast well on black or white because other color modes can be chosen and you need a color that will work with either */ fill: green; } } /* black text on white background *. @media screen and (-ms-high-contrast: black-on-white) { .icon svg { /* select a dark color that will contrast on black (#fff is too much contrast) */ fill: #333; } } /* black text on white background */ @media screen and (-ms-high-contrast: white-on-black) { .icon svg { /* select a light color that will contrast on white (#000 is too much contrast) */ fill: #efefef; } }

Заключение

Задавайте при необходимости альтернативный текст:

1. Если альтернативного текста нет, прячьте SVG от вспомогательных технологий с помощью aria-hidden="true" .
2. Если альтернативный текст есть:
   1. Добавьте название и/или описание в элемент SVG (или ссылку на них). 2. Используйте роли для добавления семантических значений (типа role="list" , role="listitem"). 3. Прячьте графические и группирующие элементы, которые не следует зачитывать с помощью role="presentation" . 4. Прячьте текстовые элементы, которые не следует зачитывать с помощью role="presentation" и aria-hidden="true" .

Для интерактивных SVG:

1. Установите фокус с помощью xlink и tabindex="0" .
2. Если ссылка не выполняет функции ссылки, добавьте соответствующую семантическую роль.
3. Добавьте JavaScript для настройки фокуса окна.
4. Задайте CSS для выделения focus: outline .

Тестируйте с разными скринридерами и браузерами. Тестируйте в различных режимах контрастности. Тестируйте навигацию с клавиатуры.

Благодарности

Огромное спасибо Амелии Беллами-Ройдс и Леони Уотсон за проверку примеров и выявление проблем. Я бы не смогла написать эту статью без их помощи.

Баги, сообщения о которых были отправлены в ходе работы над статьей:

Microsoft:

• https://connect.microsoft.com/​IE/Feedback/Details/​2483564

Mozilla:

• https://bugzilla.mozilla.org/​show_bug.cgi?​id=1257399 by Léonie Watson
• SVGOMG by Jake Archibald
• We’ll Always Have Paris: Using SVG Namespacing and XLink by Dudley Storey
• Basic screen reader commands for accessibility testing by The Paciello Group

Дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

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

Формат SVG тоже можно создавать и менять в редакторах графики, вроде Illustrator, Sketch или Inkscape. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

Я вам больше скажу: SVG - это как отдельная HTML-страница. Когда вы вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Стилями и скриптами, Карл! Вот вам и простая картинка.

Если смотреть на SVG как на отдельную страницу - становится понятнее, какой способ вставки вам нужен. Есть четыре основных и у каждого - особенности.

Первый и самый простой - элемент прямо в HTML-коде. Это в принципе самый эффективный способ загрузить любую картинку - браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.

Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.

Такой способ лучше всего подходит контентным изображениям, которым не нужно взаимодействие: логотипы, графики, схемы.

Второй способ - фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите - результат будет таким же, как с : за стеклом, но внутри что-то работает.

Этот способ подходит для оформительской графики, которой не нужно взаимодействие: фоны, иконки и другая мелочь.

Третий способ, через