Доступное текущее состояние навигации по странице
Введение #
Цвет — эффективный способ передать смысл в Интернете. Например, текущая страница «Блог» в заголовке этого сайта выделена оранжевым цветом.
Оранжевый цвет сопровождается значком с двойным шевроном который является не только косметической деталью, но и служит функциональным целям для людей с плохим зрением или нарушениями цветового зрения.
Использование left: 50%
с преобразованием: translateX (-50%)
отделяет положение SVG от его ширины и высоты. Другими словами, значок всегда находится по центру независимо от его размеров.
Для доступа к встроенному SVG требовалось несколько вещей.
Во-первых, значок скрыт от вспомогательных технологий, таких как программы чтения с экрана, с помощью атрибута aria-hidden. В противном случае некоторые программы чтения с экрана объявляют "группа", обнаружив ее.
< svg
xmlns = " http://www.w3.org/2000/svg "
заполнить = " currentColor "
ширина = » 1em "
высота = " 1em "
viewBox = " 0 0 24 24 "
aria-hidden = " true " ]
фокусируемый = « ложный »
>
</ svg >
Во-вторых, 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
обеспечивает дополнительный контекст для вспомогательных технологий.