Доступное текущее состояние навигации по странице

Введение #

Цвет — эффективный способ передать смысл в Интернете. Например, текущая страница «Блог» в заголовке этого сайта выделена оранжевым цветом.

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

 Снимок экрана, сравнивающий навигацию по этому веб-сайту в цвете и черно-белом. "Loading =" lazy "/> 
 
<figcaption>
    Эмуляция нарушений зрения с помощью Chrome DevTools позволяет понять, как люди с нарушениями зрения видят ваш сайт. В этом примере значок представляет собой визуальный индикатор (рядом с цветом), отражающий текущую страницу.<br />
  </figcaption></figure>
<h2 id= Фоновое изображение CSS #

Первоначально двойной шеврон применялся с использованием фонового изображения CSS из-за простоты его позиционирования с помощью background-position :

    .site-header a [aria-current='page']   {  
фоновое изображение : url ( '/ img / icons / chevron-double-up.svg' ) ;
повторение фона : без повтора ;
фоновое положение : центр низ ;
}

При удовлетворении потребности в дополнении цвета вторым визуальным индикатором использование CSS имело свои недостатки.

Во-первых, цвет значка должен быть жестко закодирован в SVG:

     < svg   заполнить    =   " rgba (206 , 128, 5, 1)  "   ...  >      </  svg  >    

Это повлекло за собой расходы на техническое обслуживание, если акцентный цвет (в настоящее время оранжевый) изменится в будущем. Кроме того, он менее гибок, если значок будет использоваться в другом контексте (в котором используются другие цвета).

Во-вторых, фоновое изображение (являющееся внешним ресурсом, зависящим от сетевого запроса) могло привести к тому, что файл SVG не загрузится.

И, в-третьих, в медленных сетях наблюдается заметная задержка между отображением текста «Блог» и сопровождающего его значка:

 Снимок экрана навигации до и после загрузки значка. "Loading =" lazy "/> 
 
<figcaption> Регулирование сети в Chrome DevTools для имитации медленного соединения 3G позволяет на вкладке производительности фиксировать задержку между отображением HTML и отображение фонового изображения CSS.<br />
  </figcaption></figure>
<h2 id= Встраивание SVG #

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

      < a   href    =   " / blog /  "   aria-current    =  "  page  "  >    
Блог

< svg
xmlns = " http://www.w3.org/2000/svg "
заполнить = " currentColor "
ширина = " 1em "
высота = " 1em "
окно просмотра = " 0 0 24 24 "
скрытая ария = " правда "
фокусируемый = » false "
>

< путь
правило заполнения = « evenodd »
d = " M4.293 15.707a1 1 0 010-1.414l5-5a1 1 0 011.414 0l5 5a1 1 0 01-1.414 1.414L10 11.414l -4,293 4,293a1 1 0 01-1.414 0zm0-6a1 1 0 010-1.414l5-5a1 1 0 011.414 0l5 5a1 1 0 01-1.414 1.414L10 5.414 5.707 9.707a1 1 0 01-1.414 0z " ]
правило зажима = « evenodd »
/>

</ svg >
] </ a >

Жестко запрограммированный цвет можно заменить на fill = "currentColor" давая CSS полный контроль над цветом SVG в этом и других контекстах.

 Два двойных шеврона. Один оранжевый, а другой розовый. "Loading =" lazy "/> 
 
<figcaption>
    Использование <code> fill = "currentColor" </code> позволяет SVG наследовать свой цвет из окружающего контекста.<br />
  </figcaption></figure>
<p> Исключение сетевого запроса (путем встраивания SVG) гарантирует, что значок всегда будет видимым (при условии, что HTML). И убедитесь, что текст <em> «Блог» </em> и значок всегда отображаются вместе синхронно (независимо от скорости Интернета). </p>
<p> Одним из соблазнов использования CSS было простое расположение значка на фоне. Однако использование комбинации <code> left </code> и <code> преобразования </code> дало тот же результат и гибкость: </p>
<div class=
    .site-header a [aria-current='page'] svg   {  
позиция : абсолютный ;
нижний : 0 ;
слева : 50% ;
преобразовать : translateX ( -50% ) ;
}

Использование left: 50% с преобразованием: translateX (-50%) отделяет положение SVG от его ширины и высоты. Другими словами, значок всегда находится по центру независимо от его размеров.

 Три расположенных по центру значка с двойным шевроном разного размера. "Loading =" lazy "/> 
 
<figcaption> <code> left: 50% </code> перемещает левую часть SVG в центр его родительского ( привязку). И <code> translateX (-50%) </code> сдвигает SVG влево на половину его ширины (SVG width / 2).<br />
  </figcaption></figure>
<h2 id= Доступность #

Для доступа к встроенному 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 — это относительные единицы, которые позволяют масштабировать размер значка пропорционально текущему / родительскому элементу или определяемому пользователем размеру шрифта (в то время как пиксели этого не делают).

 Три значка разного размера в зависимости от настроек размера шрифта Google Chromes. "Loading =" lazy "/> 
 
<figcaption>
    Относительные единицы позволяют адаптировать SVG к размеру шрифта, предпочитаемому пользователем. По умолчанию вычисленный размер SVG составляет 20 на 20 пикселей. Однако изменение размера шрифта на <em> «Большой» </em> обновляет размер значка до 25 пикселей.<br />
  </figcaption></figure>
<p> Для встроенных SVG важно иметь ширину и высоту, определенные в HTML. Не делать этого (и заставлять CSS отвечать за ширину / высоту) рискованно, поскольку файл CSS может не загрузиться, что приведет к увеличению значков. </p>
<figure> <img src=
     < 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 обеспечивает дополнительный контекст для вспомогательных технологий.

Зарегистрировано под