1. 13. Как правильно скрывать элементы?

Когда мы говорим, что элемент скрыт, то обычно имеем в виду, что он не виден. Однако мы забываем, что экран — не единственный механизм, от которого нам может потребоваться скрывать контент. Есть такие системы, как программы чтения с экрана (их ещё называют скринридерами) и дисплей Брайля, браузеры без графического отображения (только текст).

Теперь нам нужно определиться с тем, что значит «скрыт». Элемент может не отображаться на экране, может отсутствовать в дереве доступности, может быть не доступен для навигации с помощью клавиатуры. Это всё разные режимы скрытности. Разные способы скрытия элементов могут влиять на все режимы отображения или только на часть. То есть элемент можно скрыть от экрана, но элемент останется доступным для дерева доступности и клавиатуры.

Давайте рассмотрим, какие есть способы скрытия.

• CSS-свойство visibility: hidden;

• Атрибут hidden<span hidden>

• CSS-свойство display: none. Эти способы полностью скрывают элемент от экрана, дерева доступности и клавиатуры.

Эти три способа одинаково скрывают элемент, но с точки зрения взаимодействия разница между ними всё-таки есть. display: none; — элемент полностью исчезнет, он не займёт место и не будет анимирован. visibility: hidden; — разрешает анимацию и сохраняет пространство, которое элемент занимал бы на экране. Мы видим только пустоту, которую занимал бы элемент, будь он виден на экране. Это работает именно так, потому что внутри невидимого контента можно показать элементы.

<div style="visibility: hidden">
  <span>не виден</span>
  <span style="visibility: visible">виден</span>
</div>

        Копировать
        
        
      

В этом примере текст «виден», визуально он будет отображаться на экране.

Чтобы скрыть элемент из дерева доступности, но сохранить контент на экране, мы можем использовать атрибут aria-hidden="true". Такое скрытие часто требуется, если у вас используются декоративные иконки в разметке с помощью SVG.

Скрытие элемента от экрана часто используется для помощи скринридерам и для навигирования по сайту. Хорошего способа скрывать элементы от экрана долго не было, так как это не самая простая задача. Посмотрите на способ ниже — наверняка на его создание пришлось потратить уйму времени:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

        Копировать
        
        
      

В интернете вы можете увидеть несколько вариаций этого паттерна, в том числе с использованием !important. Возникает вопрос: зачем так много свойств для простого скрытия с экрана?. Дело в том, что .visually-hidden давно развивается и его основная задача — быть бронебойным. Скринридеры, как и браузеры, не работают одинаково. .visually-hidden пытается покрывать как можно больше браузеров, скринридеров и других систем. Из-за этого он кажется таким монструозным, но свою задачу выполняет точно.

Итого.

• Используйте атрибут hidden, чтобы полностью скрыть элемент.

• Используйте атрибут aria-hidden, чтобы скрыть элемент из дерева доступности.

• Используйте класс .visually-hidden, чтобы скрыть элемент с экрана.