Цвет — эффективный способ передать смысл в Интернете. Например, текущая страница «Блог» в заголовке этого сайта выделена оранжевым цветом.
Оранжевый цвет сопровождается значком с двойным шевроном который является не только косметической деталью, но и служит функциональным целям для людей с плохим зрением или нарушениями цветового зрения.
Использование left: 50% с преобразованием: translateX (-50%) отделяет положение SVG от его ширины и высоты. Другими словами, значок всегда находится по центру независимо от его размеров.
Доступность #
Для доступа к встроенному SVG требовалось несколько вещей.
Во-первых, значок скрыт от вспомогательных технологий, таких как программы чтения с экрана, с помощью атрибута aria-hidden. В противном случае некоторые программы чтения с экрана объявляют "группа", обнаружив ее.
Во-вторых, SVG не должен позволять фокусироваться. Использование focusable = "false" предотвращает вторую позицию табуляции в Internet Explorer, что, если бы это было разрешено, было бы неинтуитивно и нежелательно.
В-третьих, ширина и высота SVG используют ems вместо пикселей. Ems — это относительные единицы, которые позволяют масштабировать размер значка пропорционально текущему / родительскому элементу или определяемому пользователем размеру шрифта (в то время как пиксели этого не делают).
< a href = " / blog / " ария-текущая = " страница " > Блог
</ a >
Это позволяет некоторым программам чтения с экрана передавать дополнительный контекст, объявляя «Блог, ссылка на текущую страницу », чтобы указать (что неудивительно), что это за страница. Леони Уотсон очень подробно объясняет использование атрибута тока арии.
Вот и все!
Резюме #
Цвет не может быть использован для передачи значения. Его следует дополнить вторым визуальным индикатором (например, значком).
Перед использованием фоновых изображений CSS примите во внимание любые ограничения или недостатки, которые могут возникнуть при дополнительном сетевом запросе.
Использование left: 50% с transform: translateX (-50%) центрирует элемент по горизонтали независимо от его размера.
Скрыть презентационные SVG от программ чтения с экрана с помощью aria-hidden = "true" .
Предотвратить фокусировку SVG в Internet Explorer с помощью focusable = "false" .
Относительные единицы (em) позволяют SVG масштабировать пропорциональность, в отличие от пикселей.
Встроенные SVG-файлы должны определять свою ширину и высоту на случай, если CSS не загрузится.
Иконки должны иметь достаточный цветовой контраст по сравнению с цветом фона.
Атрибут aria-current обеспечивает дополнительный контекст для вспомогательных технологий.