Если мы искали причины использования значков в проекте, нам не нужно далеко ходить, чтобы их найти. Как прекрасно заметил Оливер Райхенштейн в своем выступлении «О иконах» на Smashing Conference Freiburg 2016: «На определенном этапе проекта кто-то всегда приходит и говорит:« Нам нужны значки! »» И почему людям нужны иконки?
Значки помогают справляться с узкими пробелами, где текст не помещается,
Они могут иметь общее значение независимо от языка,
Они марки,
Они могут помочь привлечь внимание к важным элементам пользовательского интерфейса.
Каковы бы ни были причины, нам нужно убедиться, что люди, которые не могут видеть или распознать эти значки, могут понять их назначение.
кнопка, получение бекона — это так очевидно.
Стоя сами по себе, значки могут быть неверно истолкованы, как показывает Мэллори ван Ачтерберг в своем выступлении на конференции Fronteers в 2017 году. Но самая важная проблема: у них нет текста. Текст — самый доступный формат для получения информации в Интернете. Программы чтения с экрана лучше всего понимают текст, и то же самое относится к большинству вспомогательных технологий, таких как приложения для перевода и дисплеи Брайля. Поэтому, если на нашей веб-странице есть что-то, что не является текстом — например, значки — мы должны добавить текст, который дает нашим пользователям ту же информацию, в противном случае мы могли бы исключить людей из понимания наших интерфейсов.
Первое, что вы делаете, когда видите, что кто-то тонет?
Масштабируемая векторная графика ( SVG ) — это спецификация расширяемого языка разметки ( XML ), которая может быть встроена в документ HTML с помощью ]как в следующем примере кода (в примере SVG в браузере будет показана стрелка, указывающая вниз):
Этот базовый пример показывает все, что нам нужно для отображения SVG в поддерживаемых браузерах. Однако, без добавления заданной высоты или ширины, SVG будет отображаться настолько большим, насколько позволит область просмотра. Это можно исправить, как показано в следующем примере:
Один вспомогательный класс CSS, обращающийся к нашим SVG-иконкам, чтобы заставить их вести себя, затем переопределяет эти значения и отлично масштабирует наши иконки в соответствии с текстом:
.svg-icon {
/ * Поместить значок в текстовую базовую линию. * /
положение: относительное;
верх: .125em;
/ * Предотвратить сжатие иконки внутри гибкого контейнера. * /
гибкая усадка: 0;
/ * Масштабировать иконку, чтобы соответствовать размеру шрифта родительского элемента. * /
высота: 1em;
ширина: 1em;
/ * Пусть иконка будет любого цвета, который имеет родитель. * /
fill: currentColor;
/ *
* Если значок используется для ссылки, которая имеет цветовой переход,
* мы также можем использовать переход на значение заполнения.
* /
переход: заполнить .3s;
}
со следующим HTML:
Я создал Codepen, чтобы продемонстрировать, на что способен этот единственный CSS-селектор. Мы можем увеличить или уменьшить значение абзаца font-size на панели CSS и увидеть масштаб пиктограммы с текстом. Мы также можем изменить значение цвета и посмотреть, как корректировка влияет на значок. При наведении курсора на ссылку или ее настройке отображается изменение цвета ссылки и цвета заливки значка.
Эта проблема решается, и мы столкнулись с другой: нам не хватает текстового эквивалента графического изображения, которое мы добавили на нашу веб-страницу.
Создание значка SVG доступным
Предположим, нам нужно создать кнопку, которая переключает видимость навигации по сайту. При активации будет показана навигация, а при повторной активации она снова будет скрыта. Как мы все согласны, мы надеемся, что кнопка — это кнопка, и поэтому она должна быть
Теперь нам нужно добавить текст, который можно интерпретировать с помощью вспомогательных технологий. Используя этот встроенный SVG, мы можем добавить элемент </code> в качестве первого потомка элемента <code> <svg> </code> и присвоить ему идентификатор. Затем мы хотим сослаться на значение идентификатора с помощью <code> aria-labelledby </code> на самом открывающем теге <code> <svg> </code>: </p>
<pre> <button type="button">
<svg viewBox="0 0 10 10"
role="img"
class="svg-icon"
aria-labelledby="menu-icon-title"
focusable="false">
<title id="menu-icon-title"> Меню
Теперь, когда кто-то устанавливает фокус на кнопку, будет объявлен текст в элементе заголовка (некоторые браузеры даже показывают текст внутри элемента </code> во всплывающей подсказке). Обратите внимание на комбинацию атрибут-значение <code> focusable = "false" </code> в SVG! Это не даст Internet Explorer и Microsoft Edge сосредоточиться на SVG. Это ошибка, которая не будет исправлена в Internet Explorer 10 и 11. </p>
<h4><span id="U-nas-est-varianty"> У нас есть варианты </span></h4>
<p> Существует еще один способ добавить невидимый текстовый эквивалент рядом со значком, которому требуется немного больше HTML и вспомогательный класс CSS, чтобы работать так же, как в примере выше. </p>
<p> Вы можете использовать элемент <code> <span> </code>чтобы обернуть текст, а затем визуально скрыть его от зрителя. Таким образом, мы предоставляем вспомогательные технологии с текстовым объяснением, не меняя дизайн кнопки. </p>
<pre> <button type="button">
<svg class="svg-icon"
height="10"
width="10"
viewBox="0 0 10 10"
aria-hidden="true"
focusable="false">
<path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"/>
</svg>
<span class="visually-hidden">
Меню
</span>
</button>
</pre>
<p> CSS для помощника выглядит следующим образом: </p>
<pre>. Визуально-скрытый {
// Перемещаем текст из потока контейнера.
положение: абсолютное;
// Уменьшаем его высоту и ширину до одного пикселя.
высота: 1 пикс;
ширина: 1px;
// Скрыть все переполненные элементы или текст.
переполнение: скрытое;
// Обрезать прямоугольник до нуля пикселей.
клип: прямоугольник (0, 0, 0, 0);
// Текст не будет перенесен на вторую строку.
пустое пространство: nowrap;
}
</pre>
<h4><span id="Ne-slishkom-otlichnyy-primer"> Не слишком отличный пример. </span></h4>
<p> Теперь наш дизайнер решил добавить еще одну кнопку <em> с текстом </em> <em> и значком </em> рядом с ним. Если рядом со значком есть текст, не добавляйте заголовок и описание, а замените <code> role = "img" </code> в SVG на <code> aria-hidden = "true" </code>. Установка <code> aria-hidden = "true" </code> на элемент удаляет его и его потомков из дерева доступности вообще. Он не будет доступен API доступа: </p>
<pre> <button type="button">
Меню
<svg viewBox="0 0 10 10"
class="svg-icon"
aria-hidden="true"
focusable="false">
<path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"/>
</svg>
</button>
</pre>
<p> Поскольку у нас есть текст, объясняющий назначение кнопки, теперь значок стал просто украшением. Имея дело с декоративным изображением или графикой, мы хотим скрыть его от дерева доступности. </p>
<p> Вот кодекс, показывающий четыре различных примера кнопок: Создание кнопки со значком SVG. </p>
<p> Сосредоточив внимание на кнопке, программы чтения с экрана сообщат: <em> «Меню, кнопка». </em> Прекрасно. Но теперь, визуально, мы получили тот же SVG, но с другим кодом. Представьте, что вам нужно добавить его в другом контексте, где текстовые метки первой версии не применяются. А потом еще один. И еще один. Это не идеально. </p>
<p> Мы должны быть осторожны, чтобы не ошибиться <code> aria-hidden = "true" </code> для <code> role = "none" </code>! У них разные варианты использования и разные результаты. Скотт О'Хара написал замечательную статью о том, когда использовать какой атрибут. </p>
<h2><span id="Pishite-menshe-koda-8212-ispolzuyte-sprayt"> Пишите меньше кода — используйте спрайт </span></h2>
<p> Теперь, чтобы процитировать Гейдона Пикеринга из его доклада «Написание менее чёртового кода» из Beyond Tellerrand Berlin 2016: <em> «Меньше кода — лучший код! Это меньше кода, чтобы думать. Меньше кода для поддержки. Меньше данных для передачи по сети. »</em> </p>
<p> Представьте себе следующую ситуацию: через несколько недель в проекте наш дизайнер повсюду со своими иконками. У нас есть много разных, с которыми нужно иметь дело, и разные варианты использования (некоторые требуют заголовка и описания, а другие должны быть скрыты). Создание значков с различными атрибутами и текстовыми вариациями займет много времени. Следовательно, появился SVG-спрайт и сэкономил нам часы времени! </p>
<p> Помещая пустой <code> <svg> </svg> </code> в качестве первого потомка открывающего тега <code> <body> </code> и скрывая его от всех (видимых или нет) с помощью встроенного стиль отображения <code>: нет </code>мы создали пространство для размещения наших значков. Важно разместить экран <code>: ни один </code> не будет встроен, так как мы не хотим, чтобы спрайт был виден, пока браузер загружает нашу таблицу стилей! Если у вас есть стили в критическом пути вашего сайта, вы можете добавить их туда и оставить спрайт в покое. </p>
<pre> <body>
<svg style="display:none;">
</svg>
</body>
</pre>
<p> <strong> Примечание </strong>: Это единственный <em> один </em> способ создания спрайта с SVG! Есть несколько способов сделать это, но в этой статье совершенно невозможно объяснить их все. Сара Суидан очень подробно показывает различные способы создания SVG-спрайта со всеми преимуществами и проблемами, которые возникают при каждом подходе. </p>
<p> При использовании SVG-спрайта для системы значков вы можете оставить SVG-файл в покое. Когда вы будете ссылаться на один значок в элементе <code> <svg> </code>вы захотите пометить его там или спрятать там, где это только декоративный рисунок. </p>
<p> Вообще говоря, следует всегда оптимизировать их SVG-код независимо от варианта использования. К счастью для нас, так как это сеть и миллион инструментов от миллиона людей, нам не нужно выполнять работу самостоятельно. </p>
<h3><span id="SVGO-MG"> SVGO (МГ) </span></h3>
<p> Существуют различные способы оптимизации и упрощения нашего SVG-кода перед добавлением его в наш HTML-документ. Первое и самое полезное — открыть SVG в редакторе и вручную удалить все ненужные помехи. Это также самый трудоемкий вариант, и вероятность удаления того, что нам могло понадобиться, довольно высока. Хотя я могу рекомендовать сделать это один или два раза, чтобы лучше понять структуру файла SVG, я не советую идти этим путем вечно. </p>
<p> Для тех, кто предпочитает командную строку графическому интерфейсу, есть svgo. Мы можем передать ему массу аргументов о том, как оптимизировать SVG, что удалить, что оставить на месте и даже что заставить остаться. Для людей, предпочитающих исполнителей задач, есть grunt-svgmin, построенный поверх SVGO и gulp-svgmin. Сара Соуэйдан написала замечательный обзор существующих инструментов с преимуществами и недостатками для каждого. </p>
<p> Если бы мы больше интересовались инструментами графического пользовательского интерфейса, есть SVGOMG от Jake Archibald. Он такой же мощный, как вариант командной строки, и в то же время показывает вывод (код и визуальный). Вместо того, чтобы писать флаги на нашем терминале, мы можем ставить или снимать флажки с правой стороны панели. Одно предостережение: загружать и оптимизировать каждую иконку в отдельности может быть довольно утомительно. </p>
<h3><span id="Sozdanie-sprayta"> Создание спрайта </span></h3>
<p> Перед запуском наших значков через SVGOMG они могут выглядеть следующим образом в зависимости от программного обеспечения, которое вы используете для создания графики (в примере показан вывод кода SVG с помощью параметра «Сохранить как» в Adobe Illustrator): </p>
<pre> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In.
SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24"
enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"/>
<path fill="none" d="M0,0h24v24H0V0z"/>
</svg>
</pre>
<p> Примечание. Использование параметра «Экспорт» в Adobe Illustrator позволяет получить намного более чистый код SVG! </p>
<p> Открывая SVG в браузере, мы видим угол 90 градусов, направленный вниз. Запустив этот код через SVGOMG со всеми отмеченными флажками, мы получим хороший минимизированный файл SVG. <strong> Примечание: </strong> единственный флажок, который необходимо оставить <em> не отмеченным </em>это <em> «Remove ViewBox» </em>! Нам всегда нужно сохранять атрибут viewBox, чтобы значок работал правильно! </p>
<p> Посмотрите, что осталось после оптимизации: </p>
<pre> <svg viewBox="0 0 24 24">
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
<path fill="none" d="M0 0h24v24H0V0z"/>
</svg>
</pre>
<p> Поместив код SVG в спрайт, нам нужно лишь немного откорректировать код (я вернул разрывы строк для лучшей читаемости): </p>
<pre> <svg style="display: none">
<symbol id="icon-angle-down"
viewBox="0 0 24 24">
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
<path fill="none" d="M0 0h24v24H0V0z"/>
</symbol>
</svg>
</pre>
<p> Мы заменили <code> svg </code> на символ <code> </code> и присвоили значку уникальный идентификатор, чтобы мы могли ссылаться на него в других частях нашего документа. Самым большим преимуществом этого подхода является возможность повторно использовать значок до бесконечности и маркировать его для каждого варианта использования. Не нужно создавать один значок более одного раза: </p>
<pre> <button type="button">
<svg role="img"
class="svg-icon"
aria-labelledby="toggle-nav-icon-title"
focusable="false">
<title id="toggle-nav-icon-title"> Меню
Прокрутите дальше вниз для получения дополнительной информации!
С помощью самозакрывающегося элемента мы можем ссылаться на идентификатор символа SVG в спрайте. В приведенном выше примере кода у нас есть четыре разных варианта использования, все с одинаковым значком. Мы можем скрыть это, когда он используется в качестве украшения или мы можем пометить его, где это необходимо. Круто!
Посмотрите на созданный мной кодекс! Между иконками нет визуальной разницы, но разница в количестве кода, используемого для их отображения, огромна.
Подведение итогов
Надеюсь, вы нашли этот учебник полезным и теперь можете использовать значки SVG в своих проектах. В этой маленькой статье невозможно объяснить все основные понятия. Чтобы помочь вам начать глубокое погружение в океан SVG, я предоставлю вам несколько ссылок на другие статьи и книги на эту тему.
Дополнительные ресурсы
Подтверждение
То, что я накопил в знаниях за эти годы, когда мы говорим о SVG, а также о доступности в Интернете, получено из чтения книг, публикаций в блогах и учебных пособий. Также следите за теми людьми, которые работают в этой области нашей отрасли и написали эти книги, посты в блогах и учебные пособия. Конечно, бесконечные манипуляции, создание и ломка вещей в поздние часы с компьютером перед моим носом также помогли.
Итак, без лишних слов: благодаря Леони Уотсон, Лоре Калбэг, Леа Веру, Эстель Вейль, Саре Соуэдан, Саре Драснер, Вэл Хед, Серену Дэвису, Марси Саттон, Кари Фишер, Зои Джилленуотер, Хизер Мильориси, Мэллори ван Ахтерберг, Стив Фолкнер, Патрик Лаук, Хейдон Пикеринг, Нил Милликен, Николас Стинхоут, Марко Зехе, Уго Жираудель, Гуннар Биттерсманн, Эрик Бэйли, Алан Далтон, Крис Койер, Брюс Лоусон, Аарон Густафсон, Скотт О'Хлоара Груп, Скотт О'Хлоара Груп , AListApart и ABookApart, Kahn Academy, команда Pa11y, команда tenon.io и многие, кого я забыл упомянуть здесь.
Спасибо всем тем людям, которые (надеюсь) никогда не устанут показывать другим (и мне), почему доступность важна и как сделать Интернет более инклюзивным.
кнопка, получение бекона — это так очевидно. 
Первое, что вы делаете, когда видите, что кто-то тонет? 
Загрузка...
